import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, forwardRef, ContentChildren, Output, HostBinding, ChangeDetectionStrategy, Component, booleanAttribute, HostListener, Input, NgModule } 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';

class EuiNavbarComponent {
    constructor() {
        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: "19.2.17", ngImport: i0, type: EuiNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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            <span class=\"eui-label\">{{ baseItemSelected.label }}</span>\n            <eui-icon-svg icon=\"chevron-down:sharp\" 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-19 :host.eui-navbar{display:flex;align-items:center;width:100%;padding:0 var(--eui-s-s);height:var(--eui-s-5xl)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: i2.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "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", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", 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            <span class=\"eui-label\">{{ baseItemSelected.label }}</span>\n            <eui-icon-svg icon=\"chevron-down:sharp\" 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-19 :host.eui-navbar{display:flex;align-items:center;width:100%;padding:0 var(--eui-s-s);height:var(--eui-s-5xl)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], itemClick: [{
                type: Output
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiNavbarItemComponent)]
            }] } });

class EuiNavbarItemComponent {
    get cssClasses() {
        return [
            'eui-navbar-item',
            this.isActive ? 'eui-navbar-item--active' : '',
        ].join(' ').trim();
    }
    constructor() {
        this.tabindex = 0;
        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: "19.2.17", ngImport: i0, type: EuiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", 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-19 :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-bold);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.eui-19 :host.eui-navbar-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-navbar-item:hover{background-color:var(--eui-c-s-secondary-surface-light-hover)}.eui-19 :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: "19.2.17", ngImport: i0, type: EuiNavbarItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-navbar-item', template: '{{ label }}', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 :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-bold);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.eui-19 :host.eui-navbar-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-navbar-item:hover{background-color:var(--eui-c-s-secondary-surface-light-hover)}.eui-19 :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']]
            }] } });

/**
 * Angular module that provides list components for navbar
 *
 * @deprecated Use {@link EUI_NAVBAR} instead
 */
class EuiNavbarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiNavbarModule, imports: [EuiNavbarComponent, EuiNavbarItemComponent], exports: [EuiNavbarComponent, EuiNavbarItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiNavbarModule, imports: [EuiNavbarComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiNavbarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiNavbarComponent, EuiNavbarItemComponent],
                    exports: [EuiNavbarComponent, EuiNavbarItemComponent],
                }]
        }] });

const EUI_NAVBAR = [
    EuiNavbarComponent,
    EuiNavbarItemComponent,
];

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

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