import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';

/**
 * @description
 * Directive for appending content to chip list, used internally by eui-autocomplete component.
 * Enables positioning of chips above, below, or inside the text input field.
 * Used exclusively within eui-autocomplete for flexible chip placement.
 */
/* eslint-disable */
class EuiChipListAppendContentDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipListAppendContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: EuiChipListAppendContentDirective, isStandalone: true, selector: "eui-chip-list-append-content", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipListAppendContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'eui-chip-list-append-content'
                }]
        }] });
/**
 * @description
 * Directive for wrapping non-chip content within eui-chip-list.
 * Excludes wrapped content from the list ARIA structure for proper accessibility.
 * Used to include additional elements alongside chips without affecting semantic list structure.
 */
class EuiChipListAdditionalContentDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipListAdditionalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: EuiChipListAdditionalContentDirective, isStandalone: true, selector: "eui-chip-list-additional-content", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipListAdditionalContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'eui-chip-list-additional-content'
                }]
        }] });
/* eslint-enable */
/**
 * @description
 * Container component for displaying multiple interactive chip elements as a cohesive group.
 * Provides semantic list structure with ARIA attributes for accessibility.
 * Automatically manages layout and spacing for chip collections.
 * Supports additional content via directives for flexible composition.
 * Typically used for displaying tags, filters, selected items, or multi-value selections.
 *
 * @usageNotes
 * ```html
 * <eui-chip-list>
 *     <eui-chip><span euiLabel>Label</span></eui-chip>
 * </eui-chip-list>
 * ```
 *
 * @usageNotes
 * With icon
 * ```html
 * <eui-chip-list>
 *     <eui-chip><span [class]="eui-user"></span><span euiLabel>Label</span></eui-chip>
 * </eui-chip-list>
 * ```
 *
 * @usageNotes
 * Max visible chips
 * ```html
 * <eui-chip-list>
 *     \@for (chip of chips; let i = $index; track chip.id) {
 *         \@if (isMaxVisibleChipsOpened || i <= maxVisibleChipsCount) {
 *             <eui-chip [data]="{ id: chip.id }" [euiVariant]="chip.variant"><span euiLabel>{{ chip.label }}</span></eui-chip>
 *         }
 *     }
 *     <eui-chip-list-additional-content>
 *         \@if (maxVisibleChipsCount && chips && chips.length > maxVisibleChipsCount) {
 *             <button
 *                 euiButton
 *                 euiBasicButton
 *                 euiSecondary
 *                 euiSizeS
 *                 type="button"
 *                 class="eui-chip-list__expand-button"
 *                 [aria-label]="isMaxVisibleChipsOpened ? 'Collapse tags' : 'Expand tags'"
 *                 (click)="toggleTags()">
 *                 \@if (isMaxVisibleChipsOpened) {
 *                     <eui-icon-svg icon="eui-chevron-left"/>
 *                 } \@else {
 *                     <eui-icon-svg icon="eui-chevron-right"/>
 *                 }
 *            </button>
 *         }
 *     </eui-chip-list-additional-content>
 * </eui-chip-list>
 * ```
 *
 * Typescript logic
 * ```ts
 * public chips = [
 *     { id: 1, label: 'Chip label', variant: 'primary' },
 * ];
 *
 * public maxVisibleChipsCount = 2;
 * public isMaxVisibleChipsOpened = false;
 *
 * public toggleTags(): void {
 *     this.isMaxVisibleChipsOpened = !this.isMaxVisibleChipsOpened;
 * }
 * ```
 */
class EuiChipListComponent {
    constructor() {
        /**
         * ARIA label for the chip list container for screen reader accessibility.
         * Provides semantic description of the chip list purpose.
         * @default 'eUI Chip list'
         */
        this.ariaLabel = 'eUI Chip list';
    }
    get cssClasses() {
        return 'eui-chip-list';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiChipListComponent, isStandalone: true, selector: "eui-chip-list", inputs: { ariaLabel: "ariaLabel" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div [attr.role]=\"'list'\" [attr.aria-label]=\"ariaLabel\" class=\"eui-chip-list__chip-container\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"eui-chip-list-additional-content\"></ng-content>\n\n<ng-content select=\"eui-chip-list-append-content\"></ng-content>\n\n", styles: [".eui-21 :host.eui-chip-list{display:flex;gap:var(--eui-s-xs)}.eui-21 :host.eui-chip-list.eui-chip-list--empty{gap:0}.eui-21 :host.eui-chip-list .eui-chip-list__chip-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--eui-s-xs)}.eui-21 :host.eui-chip-list .eui-chip-list__chip-container:empty{display:none}.eui-21 :host.eui-chip-list .eui-chip-list__chip-container ::ng-deep .eui-chip-list-label{display:flex}.eui-21 :host.eui-chip-list eui-chip-list-additional-content:empty,.eui-21 :host.eui-chip-list eui-chip-list-append-content:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-chip-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [attr.role]=\"'list'\" [attr.aria-label]=\"ariaLabel\" class=\"eui-chip-list__chip-container\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"eui-chip-list-additional-content\"></ng-content>\n\n<ng-content select=\"eui-chip-list-append-content\"></ng-content>\n\n", styles: [".eui-21 :host.eui-chip-list{display:flex;gap:var(--eui-s-xs)}.eui-21 :host.eui-chip-list.eui-chip-list--empty{gap:0}.eui-21 :host.eui-chip-list .eui-chip-list__chip-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--eui-s-xs)}.eui-21 :host.eui-chip-list .eui-chip-list__chip-container:empty{display:none}.eui-21 :host.eui-chip-list .eui-chip-list__chip-container ::ng-deep .eui-chip-list-label{display:flex}.eui-21 :host.eui-chip-list eui-chip-list-additional-content:empty,.eui-21 :host.eui-chip-list eui-chip-list-append-content:empty{display:none}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], ariaLabel: [{
                type: Input
            }] } });

const EUI_CHIP_LIST = [
    EuiChipListComponent,
    EuiChipListAppendContentDirective,
    EuiChipListAdditionalContentDirective,
];

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

export { EUI_CHIP_LIST, EuiChipListAdditionalContentDirective, EuiChipListAppendContentDirective, EuiChipListComponent };
//# sourceMappingURL=eui-components-eui-chip-list.mjs.map
