import * as i0 from '@angular/core';
import { HostListener, forwardRef, ContentChildren, HostBinding, ChangeDetectionStrategy, Component, inject, ElementRef, booleanAttribute, Input, ContentChild, NgModule } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { EuiIconSvgComponent } from '@eui/components/eui-icon';
import { EuiLabelComponent } from '@eui/components/eui-label';
import { EuiArrowKeyNavigableDirective, EuiTemplateDirective } from '@eui/components/directives';

/**
 * @description
 * Component that provides a navigable list implementation with keyboard interaction support.
 * Works with Angular CDK's FocusKeyManager to enable keyboard navigation between list items.
 *
 * The component automatically manages focus between nested lists and supports rich content
 * navigation. It can contain multiple EuiListItemComponents as children.
 */
class EuiListComponent {
    constructor() {
        /**
         * Binds the 'list' ARIA role to the host element for accessibility.
         * This informs screen readers that this component functions as a list.
         */
        this.role = 'list';
    }
    /**
     * CSS class binding that applies the 'eui-list' class to the host element.
     * This class applies the basic styling for the list component.
     *
     * @returns {string} The CSS class to be applied to the host element
     */
    get cssClasses() {
        return 'eui-list';
    }
    /**
     * Handles keyboard events for navigating the list.
     * Supports Enter key for selection and arrow keys for navigation.
     *
     * @param {KeyboardEvent} event - The keyboard event to handle
     */
    onKeydown(event) {
        switch (event.key) {
            case 'Enter': {
                if (this.focusKeyManager?.activeItem) {
                    this.focusKeyManager.activeItem.click();
                }
                break;
            }
            case 'ArrowRight': {
                if (this.focusKeyManager.activeItem?.euiArrowKeyNavigableDirective) {
                    this.checkRichContentFocusState();
                }
                break;
            }
            case 'ArrowLeft': {
                if (this.focusKeyManager.activeItem?.euiArrowKeyNavigableDirective) {
                    this.checkRichContentFocusState();
                }
                break;
            }
            default: {
                this.focusKeyManager.onKeydown(event);
                break;
            }
        }
    }
    /**
     * Initializes the component after content (list items) has been initialized.
     * Sets up the FocusKeyManager for keyboard navigation and configures tabindex
     * attributes based on nested list structure.
     */
    ngAfterContentInit() {
        // instantiates FocusKeyManager with the query list of items enabling wrapping
        this.focusKeyManager = new FocusKeyManager(this.items).withWrap();
        // checks whether an item contains a sub-menu and if so it sets it's ul element tabindex to -1
        this.items.forEach((item) => {
            if (item.euiListComponent.length > 0) {
                item.euiListComponent.forEach((list) => (list.tabIndex = '-1'));
            }
            else {
                this.tabIndex = '0';
            }
        });
    }
    /**
     * Manages focus state of rich content navigation within list items.
     * Handles the focus transition between list item elements and their navigable content.
     * Called when right/left arrow keys are pressed on items with navigable content.
     */
    checkRichContentFocusState() {
        // eslint-disable-next-line
        !this.focusKeyManager.activeItem.euiArrowKeyNavigableDirective.isFocused ?
            this.focusKeyManager.activeItem.euiArrowKeyNavigableDirective.elementRef.nativeElement.focus() :
            this.focusKeyManager.activeItem.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiListComponent, isStandalone: true, selector: "[euiList], eui-list", host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiListItemComponent), descendants: true }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 :host.eui-list{display:block;height:auto;position:relative;margin:0;padding:0;border:var(--eui-bw-s) solid transparent}.eui-19 :host.eui-list:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list button.eui-list-item{padding:var(--eui-s-2xs) var(--eui-s-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListComponent, decorators: [{
            type: Component,
            args: [{ selector: '[euiList], eui-list', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 :host.eui-list{display:block;height:auto;position:relative;margin:0;padding:0;border:var(--eui-bw-s) solid transparent}.eui-19 :host.eui-list:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list button.eui-list-item{padding:var(--eui-s-2xs) var(--eui-s-xs)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], tabIndex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiListItemComponent), { descendants: true }]
            }], onKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

/**
 * @description
 * Component that represents a single item within an EuiList.
 * Implements FocusableOption and Highlightable for keyboard navigation and accessibility.
 *
 * This component is designed to work with the EuiListComponent as part of a navigable list.
 * It supports various display states through the BaseStatesDirective, and can contain
 * nested list components, icons, labels, and custom templates.
 */
class EuiListItemComponent {
    constructor() {
        this.role = 'listitem';
        this.e2eAttr = 'eui-list-item';
        this.tabindex = '-1';
        this.isActive = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.elementRef = inject(ElementRef);
    }
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-list-item'),
            this.isActive ? 'eui-list-item--active' : '',
        ].join(' ').trim();
    }
    /**
     * Sets focus on the list item element.
     * Used by the FocusKeyManager to handle keyboard navigation within the list.
     */
    focus() {
        this.elementRef.nativeElement.focus();
    }
    /**
     * Programmatically triggers a click event on the list item element.
     * Typically, invoked when the user presses Enter while the item is focused.
     */
    // TODO: make it protected
    click() {
        this.elementRef.nativeElement.click();
    }
    /**
     * Applies active styling to the list item.
     * Called by the FocusKeyManager when this item becomes the active item in the list.
     * Sets the isActive flag to true, which adds the 'eui-list-item--active' CSS class.
     */
    setActiveStyles() {
        this.isActive = true;
    }
    /**
     * Removes active styling from the list item.
     * Called by the FocusKeyManager when another item becomes the active item.
     * Sets the isActive flag to false, removing the 'eui-list-item--active' CSS class.
     */
    setInactiveStyles() {
        this.isActive = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiListItemComponent, isStandalone: true, selector: "[euiListItem], eui-list-item", inputs: { e2eAttr: "e2eAttr", isActive: ["isActive", "isActive", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.data-e2e": "this.e2eAttr", "attr.tabindex": "this.tabindex" } }, queries: [{ propertyName: "euiArrowKeyNavigableDirective", first: true, predicate: i0.forwardRef(() => EuiArrowKeyNavigableDirective), descendants: true }, { propertyName: "euiListComponent", predicate: i0.forwardRef(() => EuiListComponent), descendants: true }, { propertyName: "euiIconSvgComponent", predicate: i0.forwardRef(() => EuiIconSvgComponent), descendants: true }, { propertyName: "euiLabelComponent", predicate: i0.forwardRef(() => EuiLabelComponent), descendants: true }, { propertyName: "templates", predicate: i0.forwardRef(() => EuiTemplateDirective), descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div class=\"eui-list-item__container\" [class.eui-list-item--has-submenu]=\"euiListComponent.length > 0\">\n    <div class=\"eui-list-item__content\">\n        @if (euiIconSvgComponent.length > 0) {\n            <div class=\"eui-list-item__content-icon\">\n                <ng-content select=\"eui-icon-svg, span[euiIconSvg]\"></ng-content>\n            </div>\n        }\n        @if (euiLabelComponent.length > 0) {\n            <div class=\"eui-list-item__content-text\">\n                <ng-content select=\"[eui-label], [euiLabel]\"></ng-content>\n            </div>\n        }\n        <ng-content></ng-content>\n    </div>\n\n    @if ((euiListComponent.length > 0) || (euiListComponent.length > 0)) {\n        <div class=\"eui-list-item__sub-list\">\n            <ng-content select=\"[eui-list], [euiList]\"></ng-content>\n        </div>\n    }\n</div>\n", styles: [".eui-19 :host.eui-list-item{--_color: var(--eui-c-text)}.eui-19 :host.eui-list-item--primary{--_color: var(--eui-c-s-primary)}.eui-19 :host.eui-list-item--secondary{--_color: var(--eui-c-s-secondary)}.eui-19 :host.eui-list-item--info{--_color: var(--eui-c-s-info)}.eui-19 :host.eui-list-item--success{--_color: var(--eui-c-s-success)}.eui-19 :host.eui-list-item--warning{--_color: var(--eui-c-s-warning)}.eui-19 :host.eui-list-item--danger{--_color: var(--eui-c-s-danger)}.eui-19 :host.eui-list-item--accent{--_color: var(--eui-c-s-accent)}.eui-19 :host.eui-list-item{background:none;border:var(--eui-bw-none);box-shadow:none;color:var(--_color);cursor:pointer;display:block;max-width:100%;outline:none;padding:var(--eui-s-xs) var(--eui-s-s);position:relative;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list-item .eui-list-item__container{display:flex;width:100%}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content{align-items:center;display:flex;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-icon{align-items:center;display:flex}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-icon+.eui-list-item__content-text{margin-left:var(--eui-s-xs)}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-text{display:flex;flex-direction:column;font:var(--eui-f-m-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-text .eui-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu{display:block;width:100%}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__content{align-items:center;display:flex;width:100%}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list{margin-left:var(--eui-s-m)}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list ::ng-deep .eui-list-item{padding-right:0}.eui-19 :host.eui-list-item .eui-list-item__container .eui-button{margin-left:var(--eui-s-s)}.eui-19 :host.eui-list-item .eui-icon-svg svg{fill:var(--_color);color:var(-_color)}.eui-19 :host.eui-list-item:hover{background-color:var(--eui-c-hover)}.eui-19 :host.eui-list-item:active,.eui-19 :host.eui-list-item--active{background-color:var(--eui-c-active-bg)}.eui-19 :host.eui-list-item .eui-list-item__content-toggle--expanded{transform:rotate(-180deg)}.eui-19 :host.eui-list-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListItemComponent, decorators: [{
            type: Component,
            args: [{ selector: '[euiListItem], eui-list-item', hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiAccent',
                                'euiVariant',
                            ],
                        },
                    ], template: "<div class=\"eui-list-item__container\" [class.eui-list-item--has-submenu]=\"euiListComponent.length > 0\">\n    <div class=\"eui-list-item__content\">\n        @if (euiIconSvgComponent.length > 0) {\n            <div class=\"eui-list-item__content-icon\">\n                <ng-content select=\"eui-icon-svg, span[euiIconSvg]\"></ng-content>\n            </div>\n        }\n        @if (euiLabelComponent.length > 0) {\n            <div class=\"eui-list-item__content-text\">\n                <ng-content select=\"[eui-label], [euiLabel]\"></ng-content>\n            </div>\n        }\n        <ng-content></ng-content>\n    </div>\n\n    @if ((euiListComponent.length > 0) || (euiListComponent.length > 0)) {\n        <div class=\"eui-list-item__sub-list\">\n            <ng-content select=\"[eui-list], [euiList]\"></ng-content>\n        </div>\n    }\n</div>\n", styles: [".eui-19 :host.eui-list-item{--_color: var(--eui-c-text)}.eui-19 :host.eui-list-item--primary{--_color: var(--eui-c-s-primary)}.eui-19 :host.eui-list-item--secondary{--_color: var(--eui-c-s-secondary)}.eui-19 :host.eui-list-item--info{--_color: var(--eui-c-s-info)}.eui-19 :host.eui-list-item--success{--_color: var(--eui-c-s-success)}.eui-19 :host.eui-list-item--warning{--_color: var(--eui-c-s-warning)}.eui-19 :host.eui-list-item--danger{--_color: var(--eui-c-s-danger)}.eui-19 :host.eui-list-item--accent{--_color: var(--eui-c-s-accent)}.eui-19 :host.eui-list-item{background:none;border:var(--eui-bw-none);box-shadow:none;color:var(--_color);cursor:pointer;display:block;max-width:100%;outline:none;padding:var(--eui-s-xs) var(--eui-s-s);position:relative;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-list-item .eui-list-item__container{display:flex;width:100%}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content{align-items:center;display:flex;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-icon{align-items:center;display:flex}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-icon+.eui-list-item__content-text{margin-left:var(--eui-s-xs)}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-text{display:flex;flex-direction:column;font:var(--eui-f-m-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item .eui-list-item__container .eui-list-item__content .eui-list-item__content-text .eui-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu{display:block;width:100%}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__content{align-items:center;display:flex;width:100%}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list{margin-left:var(--eui-s-m)}.eui-19 :host.eui-list-item .eui-list-item__container.eui-list-item--has-submenu .eui-list-item__sub-list ::ng-deep .eui-list-item{padding-right:0}.eui-19 :host.eui-list-item .eui-list-item__container .eui-button{margin-left:var(--eui-s-s)}.eui-19 :host.eui-list-item .eui-icon-svg svg{fill:var(--_color);color:var(-_color)}.eui-19 :host.eui-list-item:hover{background-color:var(--eui-c-hover)}.eui-19 :host.eui-list-item:active,.eui-19 :host.eui-list-item--active{background-color:var(--eui-c-active-bg)}.eui-19 :host.eui-list-item .eui-list-item__content-toggle--expanded{transform:rotate(-180deg)}.eui-19 :host.eui-list-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], euiListComponent: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiListComponent), { descendants: true }]
            }], euiIconSvgComponent: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiIconSvgComponent), { descendants: true }]
            }], euiLabelComponent: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiLabelComponent), { descendants: true }]
            }], templates: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiTemplateDirective), { descendants: true }]
            }], euiArrowKeyNavigableDirective: [{
                type: ContentChild,
                args: [forwardRef(() => EuiArrowKeyNavigableDirective)]
            }], isActive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * Angular module that provides list components for navigation and content organization.
 *
 * This module bundles the EuiListComponent and EuiListItemComponent along with their
 * required dependencies to create accessible, keyboard-navigable list interfaces.
 *
 * @deprecated Use {@link EUI_LIST} instead
 */
class EuiListModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiListModule, imports: [EuiListComponent, EuiListItemComponent], exports: [EuiListComponent, EuiListItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiListModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiListComponent, EuiListItemComponent],
                    exports: [EuiListComponent, EuiListItemComponent],
                }]
        }] });

const EUI_LIST = [
    EuiListComponent,
    EuiListItemComponent,
];

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

export { EUI_LIST, EuiListComponent, EuiListItemComponent, EuiListModule };
//# sourceMappingURL=eui-components-eui-list.mjs.map
