import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, forwardRef, ContentChildren, Output, HostBinding, ChangeDetectionStrategy, Component, booleanAttribute, HostListener, Input } from '@angular/core';
import { EuiAppShellService } from '@eui/core';
import * as i2 from '@eui/components/eui-dropdown';
import { EUI_DROPDOWN } from '@eui/components/eui-dropdown';
import * as i4 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i3 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import { AsyncPipe } from '@angular/common';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * A horizontal navigation bar component that displays a collection of selectable items.
 * Automatically adapts to a dropdown view when the available width is insufficient to display all items inline.
 * Supports primary and secondary visual variants through the BaseStatesDirective.
 * Manages the active state of child navbar items and emits selection events.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-navbar (itemClick)="onNavItemClick($event)">
 *   <eui-navbar-item id="home" label="Home" [isActive]="true"></eui-navbar-item>
 *   <eui-navbar-item id="about" label="About"></eui-navbar-item>
 *   <eui-navbar-item id="contact" label="Contact"></eui-navbar-item>
 * </eui-navbar>
 * ```
 *
 * ```typescript
 * onNavItemClick(itemId: string) {
 *   console.log('Selected:', itemId);
 * }
 * ```
 *
 * ### Accessibility
 * - Navbar items are keyboard navigable with Tab key
 * - Enter and Space keys activate items
 * - Active item is visually distinguished and announced to screen readers
 *
 * ### Notes
 * - Automatically switches to dropdown when width is constrained
 * - Only one item can be active at a time
 * - Supports primary and secondary visual variants
 */
class EuiNavbarComponent {
    constructor() {
        /**
         * Emitted when a navbar item is selected by user interaction.
         * Payload contains the id of the selected navbar item.
         * Triggered by click or keyboard activation (Enter/Space) on any child EuiNavbarItemComponent.
         */
        this.itemClick = new EventEmitter();
        this.isDropdownView = false;
        this.asService = inject(EuiAppShellService);
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.elementRef = inject(ElementRef);
    }
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-navbar'),
        ]
            .join(' ')
            .trim();
    }
    ngAfterContentInit() {
        this.baseItemSelected = this.items.filter((i) => i.isActive)[0];
    }
    ngAfterViewInit() {
        const parentWidth = this.elementRef.nativeElement.parentWidth;
        const width = this.elementRef.nativeElement.clientWidth;
        if (width > parentWidth) {
            setTimeout(() => {
                this.isDropdownView = true;
            }, 1);
        }
    }
    itemSelected(id) {
        this.items.forEach((item) => {
            if (item.id === id) {
                item.isActive = true;
            }
            else {
                item.isActive = false;
            }
        });
        this.itemClick.emit(id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiNavbarComponent, isStandalone: true, selector: "eui-navbar", outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiNavbarItemComponent) }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary"] }], ngImport: i0, template: "@if ( (asService.breakpoints$ | async).isLtLargeTablet || isDropdownView ) {\n    <eui-dropdown isLabelUpdatedFromSelectedItem>\n        <button euiButton euiSecondary euiSizeS [attr.aria-label]=\"'Button trigger'\">\n            {{ baseItemSelected.label }\n            <eui-icon-svg icon=\"eui-chevron-down\" size=\"s\"></eui-icon-svg>\n        </button>\n        <eui-dropdown-content>\n            @for (item of items; track item) {\n            <button euiDropdownItem (click)=\"itemSelected(item.id)\" ariaLabel=\"{{ item.label }}\">\n                {{ item.label }}\n            </button>\n            }\n        </eui-dropdown-content>\n    </eui-dropdown>\n} @else {\n    <ng-content />\n}\n", styles: [".eui-21 :host.eui-navbar{display:flex;align-items:center;width:100%;padding:0 var(--eui-s-s);height:var(--eui-s-9xl)}\n"], dependencies: [{ kind: "component", type: i2.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "euiDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "component", type: i2.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive", "isFocus"] }, { kind: "directive", type: i2.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiNavbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-navbar', changeDetection: ChangeDetectionStrategy.Default, imports: [
                        AsyncPipe,
                        ...EUI_DROPDOWN,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                            ],
                        },
                    ], template: "@if ( (asService.breakpoints$ | async).isLtLargeTablet || isDropdownView ) {\n    <eui-dropdown isLabelUpdatedFromSelectedItem>\n        <button euiButton euiSecondary euiSizeS [attr.aria-label]=\"'Button trigger'\">\n            {{ baseItemSelected.label }\n            <eui-icon-svg icon=\"eui-chevron-down\" size=\"s\"></eui-icon-svg>\n        </button>\n        <eui-dropdown-content>\n            @for (item of items; track item) {\n            <button euiDropdownItem (click)=\"itemSelected(item.id)\" ariaLabel=\"{{ item.label }}\">\n                {{ item.label }}\n            </button>\n            }\n        </eui-dropdown-content>\n    </eui-dropdown>\n} @else {\n    <ng-content />\n}\n", styles: [".eui-21 :host.eui-navbar{display:flex;align-items:center;width:100%;padding:0 var(--eui-s-s);height:var(--eui-s-9xl)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], itemClick: [{
                type: Output
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiNavbarItemComponent)]
            }] } });

/**
 * A selectable navigation item that must be used as a child of EuiNavbarComponent.
 * Displays a text label and manages its own active state through visual styling.
 * Supports keyboard navigation with Enter and Space keys.
 * Automatically communicates selection events to the parent navbar component.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-navbar>
 *   <eui-navbar-item id="dashboard" label="Dashboard" [isActive]="true"></eui-navbar-item>
 *   <eui-navbar-item id="reports" label="Reports"></eui-navbar-item>
 * </eui-navbar>
 * ```
 *
 * ### Accessibility
 * - Focusable with `tabindex="0"`
 * - Activatable with Enter or Space keys
 * - Active state is visually indicated
 *
 * ### Notes
 * - Must be direct child of `eui-navbar`
 * - Requires unique `id` for selection tracking
 * - Label is required for display
 */
class EuiNavbarItemComponent {
    get cssClasses() {
        return [
            'eui-navbar-item',
            this.isActive ? 'eui-navbar-item--active' : '',
        ].join(' ').trim();
    }
    constructor() {
        this.tabindex = 0;
        /**
         * Determines whether this navbar item is currently selected.
         * When true, applies the 'eui-navbar-item--active' CSS class for visual distinction.
         * Defaults to false. Managed by the parent EuiNavbarComponent during selection.
         */
        this.isActive = false;
        const navBarComponent = inject(EuiNavbarComponent, { host: true, optional: true });
        this.navBarComponentParent = navBarComponent;
    }
    onClick() {
        this._click();
    }
    onKeydown(event) {
        switch (event.code) {
            case 'Enter':
            case 'Space':
                event.preventDefault();
                event.stopPropagation();
                this._click();
                break;
        }
    }
    _click() {
        this.navBarComponentParent.itemSelected(this.id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: EuiNavbarItemComponent, isStandalone: true, selector: "eui-navbar-item", inputs: { id: "id", label: "label", isActive: ["isActive", "isActive", booleanAttribute] }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabindex" } }, ngImport: i0, template: '{{ label }}', isInline: true, styles: [".eui-21 :host.eui-navbar-item{display:flex;align-items:center;height:100%;padding:var(--eui-s-m) var(--eui-s-s);border-bottom:2px solid transparent;font:var(--eui-f-m-semi-bold);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.eui-21 :host.eui-navbar-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-navbar-item:hover{background-color:var(--eui-c-secondary-surface-light-hover)}.eui-21 :host.eui-navbar-item--active{border-bottom:3px solid var(--eui-c-active);color:var(--eui-c-active)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiNavbarItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-navbar-item', template: '{{ label }}', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host.eui-navbar-item{display:flex;align-items:center;height:100%;padding:var(--eui-s-m) var(--eui-s-s);border-bottom:2px solid transparent;font:var(--eui-f-m-semi-bold);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.eui-21 :host.eui-navbar-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-navbar-item:hover{background-color:var(--eui-c-secondary-surface-light-hover)}.eui-21 :host.eui-navbar-item--active{border-bottom:3px solid var(--eui-c-active);color:var(--eui-c-active)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], id: [{
                type: Input
            }], label: [{
                type: Input
            }], isActive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], onClick: [{
                type: HostListener,
                args: ['click']
            }], onKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

const EUI_NAVBAR = [
    EuiNavbarComponent,
    EuiNavbarItemComponent,
];

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

export { EUI_NAVBAR, EuiNavbarComponent, EuiNavbarItemComponent };
//# sourceMappingURL=eui-components-eui-navbar.mjs.map
