import * as i0 from '@angular/core'; import { AfterContentInit, EventEmitter, QueryList, ElementRef } from '@angular/core'; import * as i1 from '@eui/components/shared'; import { BaseStatesDirective } from '@eui/components/shared'; import { EuiIconSvgComponent } from '@eui/components/eui-icon'; /** * @description * Chips are compact elements that allow users to enter information, select a choice, filter content or trigger an action. * The eui-chip component can also be displayed dynamically as a group of multiple interactive elements, see eui-chip-list. * * @usageNotes * #### Basic chip * ```html * Chip label * ``` * * #### Chip with color variant * ```html * Primary * Success * ``` * * #### Removable chip * ```html * * Removable * * ``` * * #### Chip with icon * ```html * * * User * * ``` * * #### Filled chip with tooltip * ```html * * Info * * ``` * * #### Size variants * ```html * Small * Default * ``` * * ```ts * onRemove(data: any): void { * console.log('Chip removed:', data); * } * ``` * * ### Accessibility * - Uses role="status" for screen reader announcements (changes to "listitem" within eui-chip-list) * - aria-label provides context about chip content (default: "Chip content") * - Removable chips have keyboard accessible remove button (Enter/Space) * - Backspace key can also remove chips when focused * - Icon-only chips should have descriptive aria-label * - Color variants provide visual meaning supplemented by text * * ### Notes * - Can be used as element (eui-chip) or attribute (span[euiChip], li[euiChip]) * - Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger * - Size variants: euiSizeS, default (medium) * - isChipRemovable adds close button and enables removal * - isFilled applies solid background color instead of outline * - euiOutline applies outline/ghost styling * - euiDisabled disables interaction * - colorPalette accepts custom color palette names for extended theming * - tooltipMessage displays tooltip on hover * - id and euiInternalId for identification (euiInternalId used internally for tracking) * - data property holds chip metadata including tooltip configuration * - remove event emits chip data when removed * - Supports icon content via eui-icon-svg child component * - Automatically sets role="listitem" when used within eui-chip-list * - Commonly used in eui-chip-list for managing multiple chips */ declare class EuiChipComponent implements AfterContentInit { /** * @description * Computes and returns the CSS classes for the component based on its current state. * * @returns {string} Space-separated string of CSS class names */ get cssClasses(): string; /** * Sets the `role` attribute for the host element. * * @default 'status' */ role: string; /** * Sets the `aria-label` attribute for the host element. * * @default 'Chip content' */ ariaLabel: string; /** * Sets the `data-e2e` attribute for the host element. * * @default 'eui-chip' */ e2eAttr: string; /** * Sets the euiInternalId of the chip. * * @default null */ euiInternalId: string; /** * Sets the label of the tooltip to diaply on hover. */ tooltipMessage: string; /** * Sets the id of the chip. */ id: string | number; /** * Sets the data of the chip like tooltip configuration. */ data: any; /** * Wether the chip can be removed. * * @default false */ isChipRemovable: boolean; /** * Wether the chip is filled with color. * * @default false */ isFilled: boolean; /** * Extra color palette to be used on the chip. */ colorPalette: string; /** * Event emitted when the chip is removed. */ remove: EventEmitter; /** * Icon declares by user in the chip */ euiIcons: QueryList; chipLabel: ElementRef; baseStatesDirective: BaseStatesDirective; private _elementRef; ngAfterContentInit(): void; /** * Remove chip handler * * @param event Click event */ onRemove(event?: Event): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isChipRemovable: unknown; static ngAcceptInputType_isFilled: unknown; } declare class EuiChip { id: string | number; euiInternalId: string; label: string; isRemovable: boolean; isOutline: boolean; isRounded: boolean; isDisabled: boolean; variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent'; tooltip: EuiChipTooltip; iconClass?: string; iconSvgName?: string; constructor(values?: {}); } declare class EuiChipTooltip { tooltipMessage: string; position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after'; contentAlignment?: 'center' | 'left' | 'right' | 'justify'; delay?: number; constructor(values?: {}); } declare const EUI_CHIP: readonly [typeof EuiChipComponent]; export { EUI_CHIP, EuiChip, EuiChipComponent, EuiChipTooltip }; //# sourceMappingURL=eui-components-eui-chip.d.ts.map