import * as i0 from '@angular/core';
import { computed, signal, input, booleanAttribute, output, contentChildren, viewChild, inject, ElementRef, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { EuiIconSvgComponent } from '@eui/components/eui-icon';
import * as i2 from '@eui/components/eui-icon-button';
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';

/**
 * @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
 * <eui-chip>Chip label</eui-chip>
 * ```
 *
 * #### Chip with color variant
 * ```html
 * <eui-chip euiPrimary>Primary</eui-chip>
 * <eui-chip euiSuccess>Success</eui-chip>
 * ```
 *
 * #### Removable chip
 * ```html
 * <eui-chip [isChipRemovable]="true" (remove)="onRemove($event)">
 *   Removable
 * </eui-chip>
 * ```
 *
 * #### Chip with icon
 * ```html
 * <eui-chip>
 *   <eui-icon-svg icon="user:outline"></eui-icon-svg>
 *   User
 * </eui-chip>
 * ```
 *
 * #### Filled chip with tooltip
 * ```html
 * <eui-chip
 *   [isFilled]="true"
 *   euiTooltip="Additional information"
 *   tooltipMessage="Chip details">
 *   Info
 * </eui-chip>
 * ```
 *
 * #### Size variants
 * ```html
 * <eui-chip euiSizeS>Small</eui-chip>
 * <eui-chip>Default</eui-chip>
 * ```
 *
 * ```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
 */
class EuiChipComponent {
    constructor() {
        /**
         * @description
         * Computes and returns the CSS classes for the component based on its current state.
         *
         * @returns {string} Space-separated string of CSS class names
         */
        this.cssClasses = computed(() => [
            this.baseStatesDirective.getCssClasses('eui-chip'),
            this.isChipRemovable() ? 'eui-chip--removable' : '',
            this.isFilled() ? 'eui-chip--filled' : '',
            this.colorPalette() ? `eui-chip--${this.colorPalette()}` : '',
        ].join(' ').trim(), ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
        /**
         * Sets the `role` attribute for the host element.
         *
         * @default 'status'
         */
        this.role = signal('status', ...(ngDevMode ? [{ debugName: "role" }] : []));
        /**
         * Sets the `aria-label` attribute for the host element.
         *
         * @default 'Chip content'
         */
        this.ariaLabel = input('Chip content', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
        /**
         * Sets the `data-e2e` attribute for the host element.
         *
         * @default 'eui-chip'
         */
        this.e2eAttr = input('eui-chip', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : []));
        /**
         * Sets the euiInternalId of the chip.
         *
         * @default null
         */
        this.euiInternalId = input(null, ...(ngDevMode ? [{ debugName: "euiInternalId" }] : []));
        /**
         * Sets the label of the tooltip to diaply on hover.
         */
        this.tooltipMessage = input(null, ...(ngDevMode ? [{ debugName: "tooltipMessage" }] : []));
        /**
         * Sets the id of the chip.
         */
        this.id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
        /**
         * Sets the data of the chip like tooltip configuration.
         */
        // TODO: type should be specific
        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.data = input({
            id: crypto.randomUUID(),
            tooltip: {
                color: 'euiTooltipPrimary',
                contentAlignment: null,
                position: 'above',
            },
        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
        /**
         * Wether the chip can be removed.
         *
         * @default false
         */
        this.isChipRemovable = input(false, { ...(ngDevMode ? { debugName: "isChipRemovable" } : {}), transform: booleanAttribute });
        /**
         * Wether the chip is filled with color.
         *
         * @default false
         */
        this.isFilled = input(false, { ...(ngDevMode ? { debugName: "isFilled" } : {}), transform: booleanAttribute });
        /**
         * Extra color palette to be used on the chip.
         */
        this.colorPalette = input(null, ...(ngDevMode ? [{ debugName: "colorPalette" }] : []));
        /**
         * Event emitted when the chip is removed.
         */
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.remove = output();
        /**
         * Icon declares by user in the chip
         */
        this.euiIcons = contentChildren(EuiIconSvgComponent, ...(ngDevMode ? [{ debugName: "euiIcons" }] : []));
        this.chipLabel = viewChild('chipLabel', ...(ngDevMode ? [{ debugName: "chipLabel" }] : []));
        this.baseStatesDirective = inject(BaseStatesDirective);
        this._elementRef = inject(ElementRef);
        afterNextRender(() => {
            // checks if the parent element is an eui-chip-list to set role listitem or if a parent above in case cdkdroplist interferes
            if (this._elementRef.nativeElement.parentElement?.classList.contains('eui-chip-list__chip-container') ||
                this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eui-chip-list__chip-container')) {
                this.role.set('listitem');
            }
        });
    }
    /**
     * Remove chip handler
     *
     * @param event Click event
     */
    onRemove(event) {
        if (event instanceof KeyboardEvent && event.code === 'Backspace') {
            this.remove.emit({ chip: this.data(), event });
        }
        else {
            this.remove.emit(this.data());
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiChipComponent, isStandalone: true, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, euiInternalId: { classPropertyName: "euiInternalId", publicName: "euiInternalId", isSignal: true, isRequired: false, transformFunction: null }, tooltipMessage: { classPropertyName: "tooltipMessage", publicName: "tooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isChipRemovable: { classPropertyName: "isChipRemovable", publicName: "isChipRemovable", isSignal: true, isRequired: false, transformFunction: null }, isFilled: { classPropertyName: "isFilled", publicName: "isFilled", isSignal: true, isRequired: false, transformFunction: null }, colorPalette: { classPropertyName: "colorPalette", publicName: "colorPalette", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { properties: { "class": "cssClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" } }, queries: [{ propertyName: "euiIcons", predicate: EuiIconSvgComponent, isSignal: true }], viewQueries: [{ propertyName: "chipLabel", first: true, predicate: ["chipLabel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div class=\"eui-chip__content-container\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isChipRemovable()) {\n    <eui-icon-button\n        class=\"eui-chip__close\"\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\n        icon=\"eui-close\"\n        size=\"s\"\n        euiRounded\n        hasNoPadding\n        [euiVariant]=\"baseStatesDirective.euiVariant()\"\n        (keydown.enter)=\"onRemove($event)\"\n        (keydown.backspace)=\"onRemove($event)\"\n        (buttonClick)=\"onRemove($event)\">\n    </eui-icon-button>\n}\n", styles: [".eui-21 :host.eui-chip{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border);--_size-s-font: var(--eui-f-s);--_size-m-font: var(--eui-f-m)}.eui-21 :host.eui-chip--primary{--_bg-color: var(--eui-c-primary-surface-light);--_color: var(--eui-c-primary-on-surface-light);--_close-hover-color: var(--eui-c-primary-surface-light-hover);--_border-outline-color: var(--eui-c-primary-border);--_border-color: var(--eui-c-primary-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--primary{--_bg-color: var(--eui-c-primary-surface);--_color: var(--eui-c-primary-on-surface);--_icon-color: var(--eui-c-primary-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-primary-surface-hover)}.eui-21 :host.eui-chip--secondary{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--secondary{--_bg-color: var(--eui-c-secondary-surface);--_color: var(--eui-c-secondary-on-surface);--_icon-color: var(--eui-c-secondary-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-secondary-surface-hover)}.eui-21 :host.eui-chip--info{--_bg-color: var(--eui-c-info-surface-light);--_color: var(--eui-c-info-on-surface-light);--_close-hover-color: var(--eui-c-info-surface-light-hover);--_border-outline-color: var(--eui-c-info-border);--_border-color: var(--eui-c-info-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--info{--_bg-color: var(--eui-c-info-surface);--_color: var(--eui-c-info-on-surface);--_icon-color: var(--eui-c-info-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-info-surface-hover)}.eui-21 :host.eui-chip--success{--_bg-color: var(--eui-c-success-surface-light);--_color: var(--eui-c-success-on-surface-light);--_close-hover-color: var(--eui-c-success-surface-light-hover);--_border-outline-color: var(--eui-c-success-border);--_border-color: var(--eui-c-success-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--success{--_bg-color: var(--eui-c-success-surface);--_color: var(--eui-c-success-on-surface);--_icon-color: var(--eui-c-success-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-success-surface-hover)}.eui-21 :host.eui-chip--warning{--_bg-color: var(--eui-c-warning-surface-light);--_color: var(--eui-c-warning-on-surface-light);--_close-hover-color: var(--eui-c-warning-surface-light-hover);--_border-outline-color: var(--eui-c-warning-border);--_border-color: var(--eui-c-warning-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--warning{--_bg-color: var(--eui-c-warning-surface);--_color: var(--eui-c-warning-on-surface);--_icon-color: var(--eui-c-warning-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-warning-surface-hover)}.eui-21 :host.eui-chip--danger{--_bg-color: var(--eui-c-danger-surface-light);--_color: var(--eui-c-danger-on-surface-light);--_close-hover-color: var(--eui-c-danger-surface-light-hover);--_border-outline-color: var(--eui-c-danger-border);--_border-color: var(--eui-c-danger-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--danger{--_bg-color: var(--eui-c-danger-surface);--_color: var(--eui-c-danger-on-surface);--_icon-color: var(--eui-c-danger-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-danger-surface-hover)}.eui-21 :host.eui-chip--red{--_bg-color: #fee2e2;--_color: #450a0a;--_close-hover-color: #fecaca;--_border-outline-color: #ef4444;--_border-color: #fca5a5}.eui-21 :host.eui-chip--filled.eui-chip--red{--_bg-color: #f87171;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #dc2626}.eui-21 :host.eui-chip--orange{--_bg-color: #ffedd5;--_color: #431407;--_close-hover-color: #fed7aa;--_border-outline-color: #f97316;--_border-color: #fdba74}.eui-21 :host.eui-chip--filled.eui-chip--orange{--_bg-color: #fb923c;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #ea580c}.eui-21 :host.eui-chip--amber{--_bg-color: #fef3c7;--_color: #451a03;--_close-hover-color: #fde68a;--_border-outline-color: #f59e0b;--_border-color: #fcd34d}.eui-21 :host.eui-chip--filled.eui-chip--amber{--_bg-color: #fbbf24;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #d97706}.eui-21 :host.eui-chip--yellow{--_bg-color: #fef9c3;--_color: #422006;--_close-hover-color: #fef08a;--_border-outline-color: #eab308;--_border-color: #fde047}.eui-21 :host.eui-chip--filled.eui-chip--yellow{--_bg-color: #facc15;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #ca8a04}.eui-21 :host.eui-chip--lime{--_bg-color: #ecfccb;--_color: #1a2e05;--_close-hover-color: #d9f99d;--_border-outline-color: #84cc16;--_border-color: #bef264}.eui-21 :host.eui-chip--filled.eui-chip--lime{--_bg-color: #a3e635;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #65a30d}.eui-21 :host.eui-chip--green{--_bg-color: #dcfce7;--_color: #052e16;--_close-hover-color: #bbf7d0;--_border-outline-color: #22c55e;--_border-color: #86efac}.eui-21 :host.eui-chip--filled.eui-chip--green{--_bg-color: #4ade80;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #16a34a}.eui-21 :host.eui-chip--emerald{--_bg-color: #d1fae5;--_color: #022c22;--_close-hover-color: #a7f3d0;--_border-outline-color: #10b981;--_border-color: #6ee7b7}.eui-21 :host.eui-chip--filled.eui-chip--emerald{--_bg-color: #34d399;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #059669}.eui-21 :host.eui-chip--teal{--_bg-color: #ccfbf1;--_color: #042f2e;--_close-hover-color: #99f6e4;--_border-outline-color: #14b8a6;--_border-color: #5eead4}.eui-21 :host.eui-chip--filled.eui-chip--teal{--_bg-color: #2dd4bf;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #0d9488}.eui-21 :host.eui-chip--cyan{--_bg-color: #cffafe;--_color: #083344;--_close-hover-color: #a5f3fc;--_border-outline-color: #06b6d4;--_border-color: #67e8f9}.eui-21 :host.eui-chip--filled.eui-chip--cyan{--_bg-color: #22d3ee;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #0891b2}.eui-21 :host.eui-chip--sky{--_bg-color: #e0f2fe;--_color: #082f49;--_close-hover-color: #bae6fd;--_border-outline-color: #0ea5e9;--_border-color: #7dd3fc}.eui-21 :host.eui-chip--filled.eui-chip--sky{--_bg-color: #38bdf8;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #0284c7}.eui-21 :host.eui-chip--blue{--_bg-color: #dbeafe;--_color: #172554;--_close-hover-color: #bfdbfe;--_border-outline-color: #3b82f6;--_border-color: #93c5fd}.eui-21 :host.eui-chip--filled.eui-chip--blue{--_bg-color: #60a5fa;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #2563eb}.eui-21 :host.eui-chip--indigo{--_bg-color: #e0e7ff;--_color: #1e1b4b;--_close-hover-color: #c7d2fe;--_border-outline-color: #6366f1;--_border-color: #a5b4fc}.eui-21 :host.eui-chip--filled.eui-chip--indigo{--_bg-color: #818cf8;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #4f46e5}.eui-21 :host.eui-chip--violet{--_bg-color: #ede9fe;--_color: #2e1065;--_close-hover-color: #ddd6fe;--_border-outline-color: #8b5cf6;--_border-color: #c4b5fd}.eui-21 :host.eui-chip--filled.eui-chip--violet{--_bg-color: #a78bfa;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #7c3aed}.eui-21 :host.eui-chip--purple{--_bg-color: #f3e8ff;--_color: #3b0764;--_close-hover-color: #e9d5ff;--_border-outline-color: #a855f7;--_border-color: #d8b4fe}.eui-21 :host.eui-chip--filled.eui-chip--purple{--_bg-color: #c084fc;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #9333ea}.eui-21 :host.eui-chip--fuchsia{--_bg-color: #fae8ff;--_color: #4a044e;--_close-hover-color: #f5d0fe;--_border-outline-color: #d946ef;--_border-color: #f0abfc}.eui-21 :host.eui-chip--filled.eui-chip--fuchsia{--_bg-color: #e879f9;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #c026d3}.eui-21 :host.eui-chip--pink{--_bg-color: #fce7f3;--_color: #500724;--_close-hover-color: #fbcfe8;--_border-outline-color: #ec4899;--_border-color: #f9a8d4}.eui-21 :host.eui-chip--filled.eui-chip--pink{--_bg-color: #f472b6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #db2777}.eui-21 :host.eui-chip--rose{--_bg-color: #ffe4e6;--_color: #4c0519;--_close-hover-color: #fecdd3;--_border-outline-color: #f43f5e;--_border-color: #fda4af}.eui-21 :host.eui-chip--filled.eui-chip--rose{--_bg-color: #fb7185;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #e11d48}.eui-21 :host.eui-chip--ecl-blue-navy{--_bg-color: #f0f0f8;--_color: rgb(0, 0, 45.08);--_close-hover-color: #d9d9ec;--_border-outline-color: #8c8cc7;--_border-color: #bfbfe0}.eui-21 :host.eui-chip--filled.eui-chip--ecl-blue-navy{--_bg-color: #a0a0d1;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #4545a4}.eui-21 :host.eui-chip--ecl-blue-electric{--_bg-color: #d9f5fb;--_color: rgb(.95, 69.35, 84.55);--_close-hover-color: #b1eaf7;--_border-outline-color: #03a8cf;--_border-color: #5bd3ef}.eui-21 :host.eui-chip--filled.eui-chip--ecl-blue-electric{--_bg-color: #03bbe6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #028cad}.eui-21 :host.eui-chip--ecl-blue-ocean{--_bg-color: #dcf5f2;--_color: rgb(13.3, 106.4, 95.95);--_close-hover-color: #b7eae4;--_border-outline-color: #18baa8;--_border-color: #97e0d8}.eui-21 :host.eui-chip--filled.eui-chip--ecl-blue-ocean{--_bg-color: #69d2c6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #16a797}.eui-21 :host.eui-chip--ecl-green{--_bg-color: #daf6eb;--_color: rgb(2.85, 113.05, 70.3);--_close-hover-color: #b2edd6;--_border-outline-color: #05c67b;--_border-color: #8fe5c4}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green{--_bg-color: #5ddaa9;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #05b26f}.eui-21 :host.eui-chip--ecl-green-dark{--_bg-color: #d9e8e8;--_color: rgb(0, 57.95, 57.95);--_close-hover-color: #b0d0d0;--_border-outline-color: #066;--_border-color: #8cbaba}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green-dark{--_bg-color: #599c9c;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #005c5c}.eui-21 :host.eui-chip--ecl-orange{--_bg-color: #ffe9d6;--_color: rgb(101.65, 55.1, 12.35);--_close-hover-color: #ffdbba;--_border-outline-color: #ff8a20;--_border-color: #ffc998}.eui-21 :host.eui-chip--filled.eui-chip--ecl-orange{--_bg-color: #ffb16a;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #e87e1d}.eui-21 :host.eui-chip--ecl-purple{--_bg-color: #ebe1f8;--_color: rgb(57, 38, 86.45);--_close-hover-color: #ddcdf3;--_border-outline-color: #905fd9;--_border-color: #ccb5ee}.eui-21 :host.eui-chip--filled.eui-chip--ecl-purple{--_bg-color: #b594e6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #8356c5}.eui-21 :host.eui-chip--ecl-green-lemon{--_bg-color: #f7fbe5;--_color: rgb(103.7, 115.6, 40.8);--_close-hover-color: #eff6c9;--_border-outline-color: #cbe250;--_border-color: #e8f2b0}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green-lemon{--_bg-color: #ddec8d;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #b7cb48}.eui-21 :host.eui-chip--ecl-green-pine{--_bg-color: #dae2e4;--_color: rgb(7.6, 44.65, 55.1);--_close-hover-color: #ced8db;--_border-outline-color: #809ba2;--_border-color: #b6c6ca}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green-pine{--_bg-color: #94abb1;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #445c63}.eui-21 :host.eui-chip--ecl-red-crayola{--_bg-color: #f6c1ca;--_color: rgb(90.25, 21.85, 34.2);--_close-hover-color: #f2a3b1;--_border-outline-color: #e33755;--_border-color: #ec798d}.eui-21 :host.eui-chip--filled.eui-chip--ecl-red-crayola{--_bg-color: #e95f77;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #cf324d}.eui-21 :host.eui-chip--ecl-yellow-gold{--_bg-color: #fff3c2;--_color: rgb(109.25, 88.35, 0);--_close-hover-color: #ffea91;--_border-outline-color: #ffce00;--_border-color: #ffe05e}.eui-21 :host.eui-chip--filled.eui-chip--ecl-yellow-gold{--_bg-color: #ffd72e;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #d9af00}.eui-21 :host.eui-chip--ecl-orange-abricot{--_bg-color: #fff1d4;--_color: rgb(119.7, 51.3, 15.2);--_close-hover-color: #ffdfa9;--_border-outline-color: #fc8713;--_border-color: #ffbe5c}.eui-21 :host.eui-chip--filled.eui-chip--ecl-orange-abricot{--_bg-color: #fea439;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #ed6c09}.eui-21 :host.eui-chip--ecl-purple-violet{--_bg-color: #dbd4ff;--_color: rgb(55.1, 45.6, 101.65);--_close-hover-color: #cabfff;--_border-outline-color: #8b73ff;--_border-color: #b1a1ff}.eui-21 :host.eui-chip--filled.eui-chip--ecl-purple-violet{--_bg-color: #a28fff;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #7e69e8}.eui-21 :host.eui-chip--ecl-red-tomato{--_bg-color: #ffd0c7;--_color: rgb(101.65, 41.8, 29.45);--_close-hover-color: #ffbaac;--_border-outline-color: #ff684a;--_border-color: #ff9a86}.eui-21 :host.eui-chip--filled.eui-chip--ecl-red-tomato{--_bg-color: #ff866e;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #e85f43}.eui-21 :host.eui-chip{align-items:center;border-radius:calc(2 * var(--eui-br-l));display:inline-flex;position:relative;font:var(--_size-m-font);min-height:calc(var(--eui-s-m) * 2);padding:var(--eui-s-3xs) var(--eui-s-s);outline:var(--eui-bw-xs) solid var(--_border-color);outline-offset:-1px}.eui-21 :host.eui-chip .eui-chip__content-container{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-21 :host.eui-chip{background-color:var(--_bg-color);color:var(--_color)}.eui-21 :host.eui-chip ::ng-deep .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-chip ::ng-deep .eui-icon-button{--_hover-color: var(--_close-hover-color);--_color: var(--_icon-color)}.eui-21 :host.eui-chip .eui-chip__close{margin-left:var(--eui-s-2xs)}.eui-21 :host.eui-chip.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 :host.eui-chip--outline{background-color:var(--eui-c-surface-container);outline-color:var(--_border-outline-color)}.eui-21 :host.eui-chip--size-s{font:var(--_size-s-font);min-height:var(--eui-s-xl);padding:var(--eui-s-4xs) var(--eui-s-xs)}.eui-21 :host.eui-chip--size-s .eui-chip__content-container{gap:var(--eui-s-3xs)}.eui-21 :host.eui-chip--size-s .eui-chip__content-container ::ng-deep svg{height:var(--eui-is-s);width:var(--eui-is-s)}.eui-21 :host.eui-chip--size-s .eui-chip__content-container ::ng-deep .eui-flag-icon{height:var(--eui-is-xs);min-width:calc(1.3333333 * var(--eui-is-xs));width:calc(1.3333333 * var(--eui-is-xs))}.eui-21 :host.eui-chip--size-s .eui-chip__content-container ::ng-deep .eui-flag-icon.eui-flag-icon--rounded{height:var(--eui-is-s);width:var(--eui-is-s)}\n"], dependencies: [{ kind: "component", type: i2.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-chip, span[euiChip], li[euiChip]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON_BUTTON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeVariant',
                                'euiOutline',
                                'euiDisabled',
                            ],
                        },
                    ], host: {
                        '[class]': 'cssClasses()',
                        '[attr.role]': 'role()',
                        '[attr.aria-label]': 'ariaLabel()',
                        '[attr.data-e2e]': 'e2eAttr()',
                    }, template: "<div class=\"eui-chip__content-container\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isChipRemovable()) {\n    <eui-icon-button\n        class=\"eui-chip__close\"\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\n        icon=\"eui-close\"\n        size=\"s\"\n        euiRounded\n        hasNoPadding\n        [euiVariant]=\"baseStatesDirective.euiVariant()\"\n        (keydown.enter)=\"onRemove($event)\"\n        (keydown.backspace)=\"onRemove($event)\"\n        (buttonClick)=\"onRemove($event)\">\n    </eui-icon-button>\n}\n", styles: [".eui-21 :host.eui-chip{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border);--_size-s-font: var(--eui-f-s);--_size-m-font: var(--eui-f-m)}.eui-21 :host.eui-chip--primary{--_bg-color: var(--eui-c-primary-surface-light);--_color: var(--eui-c-primary-on-surface-light);--_close-hover-color: var(--eui-c-primary-surface-light-hover);--_border-outline-color: var(--eui-c-primary-border);--_border-color: var(--eui-c-primary-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--primary{--_bg-color: var(--eui-c-primary-surface);--_color: var(--eui-c-primary-on-surface);--_icon-color: var(--eui-c-primary-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-primary-surface-hover)}.eui-21 :host.eui-chip--secondary{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--secondary{--_bg-color: var(--eui-c-secondary-surface);--_color: var(--eui-c-secondary-on-surface);--_icon-color: var(--eui-c-secondary-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-secondary-surface-hover)}.eui-21 :host.eui-chip--info{--_bg-color: var(--eui-c-info-surface-light);--_color: var(--eui-c-info-on-surface-light);--_close-hover-color: var(--eui-c-info-surface-light-hover);--_border-outline-color: var(--eui-c-info-border);--_border-color: var(--eui-c-info-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--info{--_bg-color: var(--eui-c-info-surface);--_color: var(--eui-c-info-on-surface);--_icon-color: var(--eui-c-info-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-info-surface-hover)}.eui-21 :host.eui-chip--success{--_bg-color: var(--eui-c-success-surface-light);--_color: var(--eui-c-success-on-surface-light);--_close-hover-color: var(--eui-c-success-surface-light-hover);--_border-outline-color: var(--eui-c-success-border);--_border-color: var(--eui-c-success-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--success{--_bg-color: var(--eui-c-success-surface);--_color: var(--eui-c-success-on-surface);--_icon-color: var(--eui-c-success-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-success-surface-hover)}.eui-21 :host.eui-chip--warning{--_bg-color: var(--eui-c-warning-surface-light);--_color: var(--eui-c-warning-on-surface-light);--_close-hover-color: var(--eui-c-warning-surface-light-hover);--_border-outline-color: var(--eui-c-warning-border);--_border-color: var(--eui-c-warning-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--warning{--_bg-color: var(--eui-c-warning-surface);--_color: var(--eui-c-warning-on-surface);--_icon-color: var(--eui-c-warning-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-warning-surface-hover)}.eui-21 :host.eui-chip--danger{--_bg-color: var(--eui-c-danger-surface-light);--_color: var(--eui-c-danger-on-surface-light);--_close-hover-color: var(--eui-c-danger-surface-light-hover);--_border-outline-color: var(--eui-c-danger-border);--_border-color: var(--eui-c-danger-border-light)}.eui-21 :host.eui-chip--filled.eui-chip--danger{--_bg-color: var(--eui-c-danger-surface);--_color: var(--eui-c-danger-on-surface);--_icon-color: var(--eui-c-danger-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-danger-surface-hover)}.eui-21 :host.eui-chip--red{--_bg-color: #fee2e2;--_color: #450a0a;--_close-hover-color: #fecaca;--_border-outline-color: #ef4444;--_border-color: #fca5a5}.eui-21 :host.eui-chip--filled.eui-chip--red{--_bg-color: #f87171;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #dc2626}.eui-21 :host.eui-chip--orange{--_bg-color: #ffedd5;--_color: #431407;--_close-hover-color: #fed7aa;--_border-outline-color: #f97316;--_border-color: #fdba74}.eui-21 :host.eui-chip--filled.eui-chip--orange{--_bg-color: #fb923c;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #ea580c}.eui-21 :host.eui-chip--amber{--_bg-color: #fef3c7;--_color: #451a03;--_close-hover-color: #fde68a;--_border-outline-color: #f59e0b;--_border-color: #fcd34d}.eui-21 :host.eui-chip--filled.eui-chip--amber{--_bg-color: #fbbf24;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #d97706}.eui-21 :host.eui-chip--yellow{--_bg-color: #fef9c3;--_color: #422006;--_close-hover-color: #fef08a;--_border-outline-color: #eab308;--_border-color: #fde047}.eui-21 :host.eui-chip--filled.eui-chip--yellow{--_bg-color: #facc15;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #ca8a04}.eui-21 :host.eui-chip--lime{--_bg-color: #ecfccb;--_color: #1a2e05;--_close-hover-color: #d9f99d;--_border-outline-color: #84cc16;--_border-color: #bef264}.eui-21 :host.eui-chip--filled.eui-chip--lime{--_bg-color: #a3e635;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #65a30d}.eui-21 :host.eui-chip--green{--_bg-color: #dcfce7;--_color: #052e16;--_close-hover-color: #bbf7d0;--_border-outline-color: #22c55e;--_border-color: #86efac}.eui-21 :host.eui-chip--filled.eui-chip--green{--_bg-color: #4ade80;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #16a34a}.eui-21 :host.eui-chip--emerald{--_bg-color: #d1fae5;--_color: #022c22;--_close-hover-color: #a7f3d0;--_border-outline-color: #10b981;--_border-color: #6ee7b7}.eui-21 :host.eui-chip--filled.eui-chip--emerald{--_bg-color: #34d399;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #059669}.eui-21 :host.eui-chip--teal{--_bg-color: #ccfbf1;--_color: #042f2e;--_close-hover-color: #99f6e4;--_border-outline-color: #14b8a6;--_border-color: #5eead4}.eui-21 :host.eui-chip--filled.eui-chip--teal{--_bg-color: #2dd4bf;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #0d9488}.eui-21 :host.eui-chip--cyan{--_bg-color: #cffafe;--_color: #083344;--_close-hover-color: #a5f3fc;--_border-outline-color: #06b6d4;--_border-color: #67e8f9}.eui-21 :host.eui-chip--filled.eui-chip--cyan{--_bg-color: #22d3ee;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #0891b2}.eui-21 :host.eui-chip--sky{--_bg-color: #e0f2fe;--_color: #082f49;--_close-hover-color: #bae6fd;--_border-outline-color: #0ea5e9;--_border-color: #7dd3fc}.eui-21 :host.eui-chip--filled.eui-chip--sky{--_bg-color: #38bdf8;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #0284c7}.eui-21 :host.eui-chip--blue{--_bg-color: #dbeafe;--_color: #172554;--_close-hover-color: #bfdbfe;--_border-outline-color: #3b82f6;--_border-color: #93c5fd}.eui-21 :host.eui-chip--filled.eui-chip--blue{--_bg-color: #60a5fa;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #2563eb}.eui-21 :host.eui-chip--indigo{--_bg-color: #e0e7ff;--_color: #1e1b4b;--_close-hover-color: #c7d2fe;--_border-outline-color: #6366f1;--_border-color: #a5b4fc}.eui-21 :host.eui-chip--filled.eui-chip--indigo{--_bg-color: #818cf8;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #4f46e5}.eui-21 :host.eui-chip--violet{--_bg-color: #ede9fe;--_color: #2e1065;--_close-hover-color: #ddd6fe;--_border-outline-color: #8b5cf6;--_border-color: #c4b5fd}.eui-21 :host.eui-chip--filled.eui-chip--violet{--_bg-color: #a78bfa;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #7c3aed}.eui-21 :host.eui-chip--purple{--_bg-color: #f3e8ff;--_color: #3b0764;--_close-hover-color: #e9d5ff;--_border-outline-color: #a855f7;--_border-color: #d8b4fe}.eui-21 :host.eui-chip--filled.eui-chip--purple{--_bg-color: #c084fc;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #9333ea}.eui-21 :host.eui-chip--fuchsia{--_bg-color: #fae8ff;--_color: #4a044e;--_close-hover-color: #f5d0fe;--_border-outline-color: #d946ef;--_border-color: #f0abfc}.eui-21 :host.eui-chip--filled.eui-chip--fuchsia{--_bg-color: #e879f9;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #c026d3}.eui-21 :host.eui-chip--pink{--_bg-color: #fce7f3;--_color: #500724;--_close-hover-color: #fbcfe8;--_border-outline-color: #ec4899;--_border-color: #f9a8d4}.eui-21 :host.eui-chip--filled.eui-chip--pink{--_bg-color: #f472b6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #db2777}.eui-21 :host.eui-chip--rose{--_bg-color: #ffe4e6;--_color: #4c0519;--_close-hover-color: #fecdd3;--_border-outline-color: #f43f5e;--_border-color: #fda4af}.eui-21 :host.eui-chip--filled.eui-chip--rose{--_bg-color: #fb7185;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #e11d48}.eui-21 :host.eui-chip--ecl-blue-navy{--_bg-color: #f0f0f8;--_color: rgb(0, 0, 45.08);--_close-hover-color: #d9d9ec;--_border-outline-color: #8c8cc7;--_border-color: #bfbfe0}.eui-21 :host.eui-chip--filled.eui-chip--ecl-blue-navy{--_bg-color: #a0a0d1;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #4545a4}.eui-21 :host.eui-chip--ecl-blue-electric{--_bg-color: #d9f5fb;--_color: rgb(.95, 69.35, 84.55);--_close-hover-color: #b1eaf7;--_border-outline-color: #03a8cf;--_border-color: #5bd3ef}.eui-21 :host.eui-chip--filled.eui-chip--ecl-blue-electric{--_bg-color: #03bbe6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #028cad}.eui-21 :host.eui-chip--ecl-blue-ocean{--_bg-color: #dcf5f2;--_color: rgb(13.3, 106.4, 95.95);--_close-hover-color: #b7eae4;--_border-outline-color: #18baa8;--_border-color: #97e0d8}.eui-21 :host.eui-chip--filled.eui-chip--ecl-blue-ocean{--_bg-color: #69d2c6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #16a797}.eui-21 :host.eui-chip--ecl-green{--_bg-color: #daf6eb;--_color: rgb(2.85, 113.05, 70.3);--_close-hover-color: #b2edd6;--_border-outline-color: #05c67b;--_border-color: #8fe5c4}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green{--_bg-color: #5ddaa9;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #05b26f}.eui-21 :host.eui-chip--ecl-green-dark{--_bg-color: #d9e8e8;--_color: rgb(0, 57.95, 57.95);--_close-hover-color: #b0d0d0;--_border-outline-color: #066;--_border-color: #8cbaba}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green-dark{--_bg-color: #599c9c;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #005c5c}.eui-21 :host.eui-chip--ecl-orange{--_bg-color: #ffe9d6;--_color: rgb(101.65, 55.1, 12.35);--_close-hover-color: #ffdbba;--_border-outline-color: #ff8a20;--_border-color: #ffc998}.eui-21 :host.eui-chip--filled.eui-chip--ecl-orange{--_bg-color: #ffb16a;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #e87e1d}.eui-21 :host.eui-chip--ecl-purple{--_bg-color: #ebe1f8;--_color: rgb(57, 38, 86.45);--_close-hover-color: #ddcdf3;--_border-outline-color: #905fd9;--_border-color: #ccb5ee}.eui-21 :host.eui-chip--filled.eui-chip--ecl-purple{--_bg-color: #b594e6;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #8356c5}.eui-21 :host.eui-chip--ecl-green-lemon{--_bg-color: #f7fbe5;--_color: rgb(103.7, 115.6, 40.8);--_close-hover-color: #eff6c9;--_border-outline-color: #cbe250;--_border-color: #e8f2b0}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green-lemon{--_bg-color: #ddec8d;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #b7cb48}.eui-21 :host.eui-chip--ecl-green-pine{--_bg-color: #dae2e4;--_color: rgb(7.6, 44.65, 55.1);--_close-hover-color: #ced8db;--_border-outline-color: #809ba2;--_border-color: #b6c6ca}.eui-21 :host.eui-chip--filled.eui-chip--ecl-green-pine{--_bg-color: #94abb1;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #445c63}.eui-21 :host.eui-chip--ecl-red-crayola{--_bg-color: #f6c1ca;--_color: rgb(90.25, 21.85, 34.2);--_close-hover-color: #f2a3b1;--_border-outline-color: #e33755;--_border-color: #ec798d}.eui-21 :host.eui-chip--filled.eui-chip--ecl-red-crayola{--_bg-color: #e95f77;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #cf324d}.eui-21 :host.eui-chip--ecl-yellow-gold{--_bg-color: #fff3c2;--_color: rgb(109.25, 88.35, 0);--_close-hover-color: #ffea91;--_border-outline-color: #ffce00;--_border-color: #ffe05e}.eui-21 :host.eui-chip--filled.eui-chip--ecl-yellow-gold{--_bg-color: #ffd72e;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #d9af00}.eui-21 :host.eui-chip--ecl-orange-abricot{--_bg-color: #fff1d4;--_color: rgb(119.7, 51.3, 15.2);--_close-hover-color: #ffdfa9;--_border-outline-color: #fc8713;--_border-color: #ffbe5c}.eui-21 :host.eui-chip--filled.eui-chip--ecl-orange-abricot{--_bg-color: #fea439;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #ed6c09}.eui-21 :host.eui-chip--ecl-purple-violet{--_bg-color: #dbd4ff;--_color: rgb(55.1, 45.6, 101.65);--_close-hover-color: #cabfff;--_border-outline-color: #8b73ff;--_border-color: #b1a1ff}.eui-21 :host.eui-chip--filled.eui-chip--ecl-purple-violet{--_bg-color: #a28fff;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #7e69e8}.eui-21 :host.eui-chip--ecl-red-tomato{--_bg-color: #ffd0c7;--_color: rgb(101.65, 41.8, 29.45);--_close-hover-color: #ffbaac;--_border-outline-color: #ff684a;--_border-color: #ff9a86}.eui-21 :host.eui-chip--filled.eui-chip--ecl-red-tomato{--_bg-color: #ff866e;--_color: #000;--_icon-color: #000;--_border-color: transparent;--_close-hover-color: #e85f43}.eui-21 :host.eui-chip{align-items:center;border-radius:calc(2 * var(--eui-br-l));display:inline-flex;position:relative;font:var(--_size-m-font);min-height:calc(var(--eui-s-m) * 2);padding:var(--eui-s-3xs) var(--eui-s-s);outline:var(--eui-bw-xs) solid var(--_border-color);outline-offset:-1px}.eui-21 :host.eui-chip .eui-chip__content-container{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-21 :host.eui-chip{background-color:var(--_bg-color);color:var(--_color)}.eui-21 :host.eui-chip ::ng-deep .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-chip ::ng-deep .eui-icon-button{--_hover-color: var(--_close-hover-color);--_color: var(--_icon-color)}.eui-21 :host.eui-chip .eui-chip__close{margin-left:var(--eui-s-2xs)}.eui-21 :host.eui-chip.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 :host.eui-chip--outline{background-color:var(--eui-c-surface-container);outline-color:var(--_border-outline-color)}.eui-21 :host.eui-chip--size-s{font:var(--_size-s-font);min-height:var(--eui-s-xl);padding:var(--eui-s-4xs) var(--eui-s-xs)}.eui-21 :host.eui-chip--size-s .eui-chip__content-container{gap:var(--eui-s-3xs)}.eui-21 :host.eui-chip--size-s .eui-chip__content-container ::ng-deep svg{height:var(--eui-is-s);width:var(--eui-is-s)}.eui-21 :host.eui-chip--size-s .eui-chip__content-container ::ng-deep .eui-flag-icon{height:var(--eui-is-xs);min-width:calc(1.3333333 * var(--eui-is-xs));width:calc(1.3333333 * var(--eui-is-xs))}.eui-21 :host.eui-chip--size-s .eui-chip__content-container ::ng-deep .eui-flag-icon.eui-flag-icon--rounded{height:var(--eui-is-s);width:var(--eui-is-s)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], euiInternalId: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiInternalId", required: false }] }], tooltipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], isChipRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChipRemovable", required: false }] }], isFilled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFilled", required: false }] }], colorPalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPalette", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], euiIcons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EuiIconSvgComponent), { isSignal: true }] }], chipLabel: [{ type: i0.ViewChild, args: ['chipLabel', { isSignal: true }] }] } });

class EuiChip {
    constructor(values = {}) {
        this.isRemovable = false;
        this.isOutline = false;
        this.isRounded = false;
        this.isDisabled = false;
        this.variant = 'primary';
        this.tooltip = new EuiChipTooltip();
        Object.assign(this, values);
    }
}
class EuiChipTooltip {
    constructor(values = {}) {
        this.position = 'above';
        this.contentAlignment = 'center';
        this.delay = 0;
        Object.assign(this, values);
    }
}

const EUI_CHIP = [
    EuiChipComponent,
];

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_CHIP, EuiChip, EuiChipComponent, EuiChipTooltip };
//# sourceMappingURL=eui-components-eui-chip.mjs.map
