@eui/components 21.0.0-alpha.18 → 21.0.0-alpha.19

package/fesm2022/eui-components-layout-eui-toolbar.mjs

@@ -1,621 +0,0 @@
-import * as i0 from '@angular/core';
-import { Input, HostBinding, ViewEncapsulation, Component, booleanAttribute, inject, HostListener, ChangeDetectionStrategy, EventEmitter, ElementRef, forwardRef, ContentChildren, Output, ContentChild } from '@angular/core';
-import { Router, RouterLink, RouterLinkActive } from '@angular/router';
-import { EUI_CONFIG_TOKEN, EuiAppShellService } from '@eui/core';
-import { DOCUMENT, NgTemplateOutlet, KeyValuePipe, JsonPipe, AsyncPipe } from '@angular/common';
-import * as i1 from '@eui/components/eui-icon';
-import { EUI_ICON } from '@eui/components/eui-icon';
-import * as i2 from '@eui/components/eui-badge';
-import { EUI_BADGE } from '@eui/components/eui-badge';
-import { Subscription } from 'rxjs';
-import * as i3 from '@eui/components/eui-dropdown';
-import { EUI_DROPDOWN } from '@eui/components/eui-dropdown';
-import * as i1$1 from '@eui/components/eui-button';
-import { EUI_BUTTON } from '@eui/components/eui-button';
-import * as i4 from '@eui/components/eui-autocomplete';
-import { EUI_AUTOCOMPLETE } from '@eui/components/eui-autocomplete';
-import { EuiTemplateDirective } from '@eui/components/directives';
-import * as i5 from '@eui/components/eui-icon-input';
-import { EUI_ICON_INPUT } from '@eui/components/eui-icon-input';
-import * as i6 from '@eui/components/eui-input-text';
-import { EUI_INPUT_TEXT } from '@eui/components/eui-input-text';
-import * as i7 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i3$1 from '@eui/components/eui-icon-button';
-import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
-import { EUI_USER_PROFILE } from '@eui/components/eui-user-profile';
-
-class EuiToolbarAppComponent {
-    constructor() {
-        this.class = 'eui-toolbar-app';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiToolbarAppComponent, isStandalone: true, selector: "eui-toolbar-app", inputs: { appName: "appName", appSubTitle: "appSubTitle" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if (appSubTitle) {\n    <div class=\"eui-toolbar-app__name\">\n        {{ appName }}\n    </div>\n    <div class=\"eui-toolbar-app__subTitle\">\n        {{ appSubTitle }}\n    </div>\n} @else {\n    {{ appName }}\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarAppComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar-app', encapsulation: ViewEncapsulation.None, template: "@if (appSubTitle) {\n    <div class=\"eui-toolbar-app__name\">\n        {{ appName }}\n    </div>\n    <div class=\"eui-toolbar-app__subTitle\">\n        {{ appSubTitle }}\n    </div>\n} @else {\n    {{ appName }}\n}\n" }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }], appName: [{
-                type: Input
-            }], appSubTitle: [{
-                type: Input
-            }] } });
-
-class EuiToolbarCenterComponent {
-    constructor() {
-        this.string = 'eui-toolbar__center';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiToolbarCenterComponent, isStandalone: true, selector: "eui-toolbar-center", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarCenterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'eui-toolbar-center',
-                    template: '<ng-content />',
-                }]
-        }], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuiToolbarEnvironmentComponent {
-    constructor() {
-        this.class = 'eui-toolbar-environment';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarEnvironmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiToolbarEnvironmentComponent, isStandalone: true, selector: "eui-toolbar-environment", host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarEnvironmentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'eui-toolbar-environment',
-                    template: '<ng-content />',
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }] } });
-
-class EuiToolbarItemComponent {
-    constructor() {
-        this.string = 'eui-toolbar-item';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiToolbarItemComponent, isStandalone: true, selector: "eui-toolbar-item", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'eui-toolbar-item',
-                    template: '<ng-content />',
-                }]
-        }], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuiToolbarItemsComponent {
-    constructor() {
-        this.euiEnd = false;
-        this.euiPositionRight = false;
-    }
-    get cssClasses() {
-        const rootClass = 'eui-toolbar-items';
-        return [
-            rootClass,
-            this.euiEnd ? `${rootClass}--position-right` : '',
-            this.euiPositionRight ? `${rootClass}--position-right` : '',
-        ].join(' ').trim();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: EuiToolbarItemsComponent, isStandalone: true, selector: "eui-toolbar-items", inputs: { euiEnd: ["euiEnd", "euiEnd", booleanAttribute], euiPositionRight: ["euiPositionRight", "euiPositionRight", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarItemsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'eui-toolbar-items',
-                    template: '<ng-content />',
-                }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], euiEnd: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], euiPositionRight: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
-class EuiToolbarLogoComponent {
-    constructor() {
-        this.class = 'eui-toolbar-logo';
-        this.homeUrl = '..';
-        this.logoHeight = '36px';
-        this.logoWidth = '53px';
-        this.router = inject(Router);
-        this.config = inject(EUI_CONFIG_TOKEN, { optional: true });
-    }
-    onClick() {
-        this.router.navigate([this.homeUrl]);
-    }
-    ngOnInit() {
-        let assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;
-        if (!assetsBaseUrl) {
-            assetsBaseUrl = 'assets';
-        }
-        if (!this.logoUrl) {
-            this.logoUrlGenerated = `${assetsBaseUrl}/images/ec-europa/logos/europa-flag-small.png`;
-        }
-        else {
-            this.logoUrlGenerated = this.logoUrl;
-        }
-        this.logoStyle = `width:${this.logoWidth}; height:${this.logoHeight};`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiToolbarLogoComponent, isStandalone: true, selector: "eui-toolbar-logo", inputs: { homeUrl: "homeUrl", logoUrl: "logoUrl", logoHeight: "logoHeight", logoWidth: "logoWidth" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "this.class" } }, ngImport: i0, template: "<img [src]=\"logoUrlGenerated\" class=\"eui-toolbar-logo__image\" alt=\"application logo\" [style]=\"logoStyle\"/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarLogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar-logo', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<img [src]=\"logoUrlGenerated\" class=\"eui-toolbar-logo__image\" alt=\"application logo\" [style]=\"logoStyle\"/>\n" }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }], homeUrl: [{
-                type: Input
-            }], logoUrl: [{
-                type: Input
-            }], logoHeight: [{
-                type: Input
-            }], logoWidth: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class EuiToolbarMegaMenuComponent {
-    constructor() {
-        this.string = 'eui-toolbar-mega-menu';
-        this.role = 'nav';
-        this.activeMenu = null;
-        this.asService = inject(EuiAppShellService);
-        this.document = inject(DOCUMENT);
-        this.subs = new Subscription();
-    }
-    ngOnInit() {
-        // console.log(this.items);
-        this.asService.activateToolbarMegaMenu();
-        this.megaMenuItems = this.filterMegaMenuItems(this.items);
-        // console.log(this.megaMenuItems);
-        // console.log(this.groupByColIdPerParent(this.megaMenuItems));
-        this.megaMenuItemsGrouped = this.groupByColIdPerParent(this.megaMenuItems);
-        // subscribe to state changes
-        this.subs.add(this.asService.getState('menuLinks').subscribe((links) => (this.items = links)));
-    }
-    ngOnChanges(changes) {
-        if (changes.items) {
-            this.asService.setState({
-                ...this.asService.state,
-                menuLinks: changes.items.currentValue,
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.asService.setState({
-            ...this.asService.state,
-            hasToolbarMegaMenu: false,
-        });
-        this.document.documentElement.style.removeProperty('--eui-app-toolbar-mega-menu-height');
-    }
-    closeMenu() {
-        this.activeMenu = null;
-    }
-    openMenu(menuIndex) {
-        this.activeMenu = menuIndex;
-    }
-    groupByColIdPerParent(items) {
-        const result = {};
-        items.forEach((parent, index) => {
-            const group = {};
-            parent['children']?.forEach((child) => {
-                const colId = child['megaMenuColIndex'] ?? 'eui-no-col-label';
-                const colLabel = child['megaMenuColLabel'] ?? 'eui-no-label';
-                if (!group[colId]) {
-                    group[colId] = {};
-                }
-                if (!group[colId][colLabel]) {
-                    group[colId][colLabel] = [];
-                }
-                group[colId][colLabel].push(child);
-            });
-            result[index] = group;
-        });
-        return result;
-    }
-    filterMegaMenuItems(items) {
-        return items
-            // .filter((item) => item['isMegaMenu'])
-            .map((item) => {
-            const newItem = { ...item };
-            if (newItem['children']) {
-                newItem['children'] = this.filterMegaMenuItems(newItem['children']);
-            }
-            return newItem;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiToolbarMegaMenuComponent, isStandalone: true, selector: "eui-toolbar-mega-menu", inputs: { items: "items" }, host: { properties: { "class": "this.string", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<nav (mouseleave)=\"closeMenu()\">\n    <ul>\n        @for(megaMenuItem of megaMenuItems; track $index; let i = $index) {\n            <li>\n                @if (megaMenuItem['children'] && megaMenuItem['children'].length > 0) {\n                    <a href=\"javascript: void(0)\"\n                        [class.active]=\"activeMenu === i\"\n                        [class.mega-menu-item--disabled]=\"megaMenuItem['disabled']\"\n                        [attr.aria-disabled]=\"megaMenuItem['disabled']\"\n                        (click)=\"openMenu(i)\"\n                        (focus)=\"openMenu(i)\">\n                        @if (megaMenuItem['iconSvgName']) {\n                        <eui-icon-svg\n                            icon=\"{{ megaMenuItem['iconSvgName'] }}\"\n                            fillColor=\"{{ megaMenuItem['iconTypeClass'] || null }}\"\n                            class=\"mega-menu-item-icon\" />\n                        }\n                        {{ megaMenuItem['label'] }}\n                        <eui-icon-svg icon=\"eui-chevron-down:eui\" size=\"xs\" class=\"eui-u-ml-s\" />\n                    </a>\n                } @else {\n                    <a [routerLink]=\"!megaMenuItem['disabled'] ? megaMenuItem['url'] : null\"\n                        [class.active]=\"activeMenu === i\"\n                        [class.mega-menu-item--disabled]=\"megaMenuItem['disabled']\"\n                        [attr.aria-disabled]=\"megaMenuItem['disabled']\"\n                        (click)=\"openMenu(i)\"\n                        (focus)=\"openMenu(i)\">\n                        {{ megaMenuItem['label'] }}\n                    </a>\n                }\n                \n                @if (activeMenu === i && megaMenuItem['children'] && megaMenuItem['children'].length > 0 && !megaMenuItem['disabled']) {\n                    <div class=\"mega-menu__container\">\n                        @for (col of megaMenuItemsGrouped[i] | keyvalue; track $index) {\n                            <div class=\"mega-menu__container-col\">\n                                <ul class=\"mega-menu-items\">\n                                    @for (label of col.value | keyvalue; track $index) {\n\n                                        <div class=\"mega-menu-item\">\n                                            @if (label.key !== 'eui-no-label') {\n                                                <div class=\"mega-menu-item__category\">{{ label.key }}</div>\n                                            }\n                                            \n                                            @for (item of label.value; track $index) {\n                                                <li class=\"mega-menu-item__link\">\n                                                    @if (item['url']) {\n                                                    <a [routerLink]=\"!item['disabled'] ? item['url'] : null\"\n                                                        [class.mega-menu-item--disabled]=\"item['disabled']\"\n                                                        [attr.aria-disabled]=\"item['disabled']\">\n                                                        <ng-template [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                                                    </a>\n\n                                                    } @else if (item['urlExternal']) {\n                                                        <a  [href]=\"!item['disabled'] ? item['urlExternal'] : null\"\n                                                            [target]=\"item['urlExternalTarget'] ? item['urlExternalTarget'] :'_blank'\"\n                                                            [class.mega-menu-item--disabled]=\"item['disabled']\"\n                                                            [attr.aria-disabled]=\"item['disabled']\">\n                                                            <ng-template [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                                                        </a>\n                                                    }\n                                                </li>\n                                            }\n                                        </div>\n                                    }\n                                </ul>\n                            </div>\n                        }\n                    </div>\n                }\n            </li>\n        }\n    </ul>\n</nav>\n\n<!-- PROJECTED CONTENT -->\n<ng-template #itemContent let-item>\n    <div class=\"mega-menu-item__link-start-block\">\n        @if (item['iconSvgName']) {\n        <eui-icon-svg class=\"mega-menu-item__link-icon\" icon=\"{{ item['iconSvgName'] }}\"\n            fillColor=\"{{ item['iconTypeClass'] || null }}\" />\n        } @else if (item['hasMarker']) {\n        <!-- MARKER -->\n        <eui-icon-svg fillColor=\"{{ item['markerTypeClass'] || null }}\" icon=\"ellipse:sharp\" size=\"2xs\"\n            [aria-label]=\"item['markerTypeClass'] + ' ' + 'marker'\" />\n        }\n    </div>\n\n    <div class=\"mega-menu-item__link-content-block\">\n        <div class=\"mega-menu-item__link-label-container\">\n            <span class=\"mega-menu-item__link-label\">{{ item['label'] }}</span>\n        </div>\n    </div>\n\n    <div class=\"mega-menu-item__link-end-block\">\n        @if (item['tagLabel']) {\n        <eui-badge euiOutline euiVariant=\"{{ item['tagTypeClass'] }}\">{{ item['tagLabel'] }}</eui-badge>\n        }\n    </div>\n</ng-template>\n", styles: [".eui-toolbar-mega-menu{width:100%;position:fixed;left:0;background-color:var(--eui-c-branding);padding:0;margin:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));height:var(--eui-app-toolbar-mega-menu-height)}.eui-toolbar-mega-menu nav{height:100%;margin:0;padding:0;width:100%}.eui-toolbar-mega-menu nav ul{display:flex;height:100%;list-style:none;margin:0;padding:0;position:relative}.eui-toolbar-mega-menu nav ul>li{align-items:center;display:flex}.eui-toolbar-mega-menu nav ul>li a{align-items:center;color:var(--eui-c-branding-contrast);display:flex;height:100%;padding:0 var(--eui-s-l);text-decoration:none}.eui-toolbar-mega-menu nav ul>li a:hover,.eui-toolbar-mega-menu nav ul>li a.active{background-color:var(--eui-c-branding-contrast);color:var(--eui-c-branding)}.eui-toolbar-mega-menu nav ul>li a .mega-menu-item-icon{margin-right:var(--eui-s-xs)}.eui-toolbar-mega-menu nav ul>li a .mega-menu-item-icon:hover .eui-icon-svg>svg,.eui-toolbar-mega-menu nav ul>li a .mega-menu-item-icon.active .eui-icon-svg>svg{fill:var(--eui-c-branding)}.eui-toolbar-mega-menu nav ul>li .mega-menu__container{position:absolute;top:var(--eui-app-toolbar-mega-menu-height);background-color:var(--eui-c-surface-shell);box-shadow:var(--eui-sh-8);gap:var(--eui-s-m);max-height:85vh;overflow:auto;display:flex}.eui-toolbar-mega-menu nav ul>li .mega-menu__container-col{border-right:var(--eui-bw-xs) solid var(--eui-c-divider-light);width:300px}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items{border:var(--eui-bw-xs) solid transparent;display:flex;display:list-item;flex-direction:column;overflow:auto;position:relative;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item{display:flex;flex-direction:column;position:relative;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item:hover,.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item.active{background-color:var(--eui-c-surface-shell);color:var(--eui-c-text)}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__category{color:var(--eui-c-text);cursor:default;font:var(--eui-f-l-bold);padding:var(--eui-s-xl) var(--eui-s-m) var(--eui-s-xs) var(--eui-s-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__category:empty{display:none}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link{align-items:center;display:flex;outline:var(--eui-bw-xs) solid transparent;outline-offset:-1px;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link a{color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);outline:var(--eui-bw-xs) solid transparent;outline-offset:-1px;padding:var(--eui-s-xs) var(--eui-s-m);text-decoration:none;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link a:hover{background-color:var(--eui-c-primary-surface-light);text-decoration:underline}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link a:focus-visible{outline:var(--eui-bw-xs) solid var(--eui-c-focus-visible)}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-start-block{align-items:center;display:flex}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-start-block:empty{display:none}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-content-block .mega-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-content-block .mega-menu-item__link-label-container .mega-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs);text-decoration:none}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-end-block:empty{display:none}.eui-toolbar-mega-menu .mega-menu-item--disabled{cursor:default;opacity:var(--eui-o-50);pointer-events:none}\n"], dependencies: [{ kind: "component", type: i1.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: i2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarMegaMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar-mega-menu', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [...EUI_ICON, ...EUI_BADGE, RouterLink, RouterLinkActive, JsonPipe, KeyValuePipe, NgTemplateOutlet], template: "<nav (mouseleave)=\"closeMenu()\">\n    <ul>\n        @for(megaMenuItem of megaMenuItems; track $index; let i = $index) {\n            <li>\n                @if (megaMenuItem['children'] && megaMenuItem['children'].length > 0) {\n                    <a href=\"javascript: void(0)\"\n                        [class.active]=\"activeMenu === i\"\n                        [class.mega-menu-item--disabled]=\"megaMenuItem['disabled']\"\n                        [attr.aria-disabled]=\"megaMenuItem['disabled']\"\n                        (click)=\"openMenu(i)\"\n                        (focus)=\"openMenu(i)\">\n                        @if (megaMenuItem['iconSvgName']) {\n                        <eui-icon-svg\n                            icon=\"{{ megaMenuItem['iconSvgName'] }}\"\n                            fillColor=\"{{ megaMenuItem['iconTypeClass'] || null }}\"\n                            class=\"mega-menu-item-icon\" />\n                        }\n                        {{ megaMenuItem['label'] }}\n                        <eui-icon-svg icon=\"eui-chevron-down:eui\" size=\"xs\" class=\"eui-u-ml-s\" />\n                    </a>\n                } @else {\n                    <a [routerLink]=\"!megaMenuItem['disabled'] ? megaMenuItem['url'] : null\"\n                        [class.active]=\"activeMenu === i\"\n                        [class.mega-menu-item--disabled]=\"megaMenuItem['disabled']\"\n                        [attr.aria-disabled]=\"megaMenuItem['disabled']\"\n                        (click)=\"openMenu(i)\"\n                        (focus)=\"openMenu(i)\">\n                        {{ megaMenuItem['label'] }}\n                    </a>\n                }\n                \n                @if (activeMenu === i && megaMenuItem['children'] && megaMenuItem['children'].length > 0 && !megaMenuItem['disabled']) {\n                    <div class=\"mega-menu__container\">\n                        @for (col of megaMenuItemsGrouped[i] | keyvalue; track $index) {\n                            <div class=\"mega-menu__container-col\">\n                                <ul class=\"mega-menu-items\">\n                                    @for (label of col.value | keyvalue; track $index) {\n\n                                        <div class=\"mega-menu-item\">\n                                            @if (label.key !== 'eui-no-label') {\n                                                <div class=\"mega-menu-item__category\">{{ label.key }}</div>\n                                            }\n                                            \n                                            @for (item of label.value; track $index) {\n                                                <li class=\"mega-menu-item__link\">\n                                                    @if (item['url']) {\n                                                    <a [routerLink]=\"!item['disabled'] ? item['url'] : null\"\n                                                        [class.mega-menu-item--disabled]=\"item['disabled']\"\n                                                        [attr.aria-disabled]=\"item['disabled']\">\n                                                        <ng-template [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                                                    </a>\n\n                                                    } @else if (item['urlExternal']) {\n                                                        <a  [href]=\"!item['disabled'] ? item['urlExternal'] : null\"\n                                                            [target]=\"item['urlExternalTarget'] ? item['urlExternalTarget'] :'_blank'\"\n                                                            [class.mega-menu-item--disabled]=\"item['disabled']\"\n                                                            [attr.aria-disabled]=\"item['disabled']\">\n                                                            <ng-template [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                                                        </a>\n                                                    }\n                                                </li>\n                                            }\n                                        </div>\n                                    }\n                                </ul>\n                            </div>\n                        }\n                    </div>\n                }\n            </li>\n        }\n    </ul>\n</nav>\n\n<!-- PROJECTED CONTENT -->\n<ng-template #itemContent let-item>\n    <div class=\"mega-menu-item__link-start-block\">\n        @if (item['iconSvgName']) {\n        <eui-icon-svg class=\"mega-menu-item__link-icon\" icon=\"{{ item['iconSvgName'] }}\"\n            fillColor=\"{{ item['iconTypeClass'] || null }}\" />\n        } @else if (item['hasMarker']) {\n        <!-- MARKER -->\n        <eui-icon-svg fillColor=\"{{ item['markerTypeClass'] || null }}\" icon=\"ellipse:sharp\" size=\"2xs\"\n            [aria-label]=\"item['markerTypeClass'] + ' ' + 'marker'\" />\n        }\n    </div>\n\n    <div class=\"mega-menu-item__link-content-block\">\n        <div class=\"mega-menu-item__link-label-container\">\n            <span class=\"mega-menu-item__link-label\">{{ item['label'] }}</span>\n        </div>\n    </div>\n\n    <div class=\"mega-menu-item__link-end-block\">\n        @if (item['tagLabel']) {\n        <eui-badge euiOutline euiVariant=\"{{ item['tagTypeClass'] }}\">{{ item['tagLabel'] }}</eui-badge>\n        }\n    </div>\n</ng-template>\n", styles: [".eui-toolbar-mega-menu{width:100%;position:fixed;left:0;background-color:var(--eui-c-branding);padding:0;margin:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));height:var(--eui-app-toolbar-mega-menu-height)}.eui-toolbar-mega-menu nav{height:100%;margin:0;padding:0;width:100%}.eui-toolbar-mega-menu nav ul{display:flex;height:100%;list-style:none;margin:0;padding:0;position:relative}.eui-toolbar-mega-menu nav ul>li{align-items:center;display:flex}.eui-toolbar-mega-menu nav ul>li a{align-items:center;color:var(--eui-c-branding-contrast);display:flex;height:100%;padding:0 var(--eui-s-l);text-decoration:none}.eui-toolbar-mega-menu nav ul>li a:hover,.eui-toolbar-mega-menu nav ul>li a.active{background-color:var(--eui-c-branding-contrast);color:var(--eui-c-branding)}.eui-toolbar-mega-menu nav ul>li a .mega-menu-item-icon{margin-right:var(--eui-s-xs)}.eui-toolbar-mega-menu nav ul>li a .mega-menu-item-icon:hover .eui-icon-svg>svg,.eui-toolbar-mega-menu nav ul>li a .mega-menu-item-icon.active .eui-icon-svg>svg{fill:var(--eui-c-branding)}.eui-toolbar-mega-menu nav ul>li .mega-menu__container{position:absolute;top:var(--eui-app-toolbar-mega-menu-height);background-color:var(--eui-c-surface-shell);box-shadow:var(--eui-sh-8);gap:var(--eui-s-m);max-height:85vh;overflow:auto;display:flex}.eui-toolbar-mega-menu nav ul>li .mega-menu__container-col{border-right:var(--eui-bw-xs) solid var(--eui-c-divider-light);width:300px}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items{border:var(--eui-bw-xs) solid transparent;display:flex;display:list-item;flex-direction:column;overflow:auto;position:relative;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item{display:flex;flex-direction:column;position:relative;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item:hover,.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item.active{background-color:var(--eui-c-surface-shell);color:var(--eui-c-text)}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__category{color:var(--eui-c-text);cursor:default;font:var(--eui-f-l-bold);padding:var(--eui-s-xl) var(--eui-s-m) var(--eui-s-xs) var(--eui-s-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__category:empty{display:none}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link{align-items:center;display:flex;outline:var(--eui-bw-xs) solid transparent;outline-offset:-1px;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link a{color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);outline:var(--eui-bw-xs) solid transparent;outline-offset:-1px;padding:var(--eui-s-xs) var(--eui-s-m);text-decoration:none;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link a:hover{background-color:var(--eui-c-primary-surface-light);text-decoration:underline}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link a:focus-visible{outline:var(--eui-bw-xs) solid var(--eui-c-focus-visible)}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-start-block{align-items:center;display:flex}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-start-block:empty{display:none}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-content-block .mega-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-content-block .mega-menu-item__link-label-container .mega-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs);text-decoration:none}.eui-toolbar-mega-menu nav ul>li .mega-menu__container ul.mega-menu-items .mega-menu-item__link-end-block:empty{display:none}.eui-toolbar-mega-menu .mega-menu-item--disabled{cursor:default;opacity:var(--eui-o-50);pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], items: [{
-                type: Input
-            }] } });
-
-class EuiToolbarNavbarComponent {
-    constructor() {
-        this.class = 'eui-toolbar-navbar';
-        this.itemClick = new EventEmitter();
-        this.asService = inject(EuiAppShellService);
-        this.isDropdownView = false;
-        this.elementRef = inject(ElementRef);
-    }
-    ngAfterContentInit() {
-        this.baseItemSelected = this.items.filter((i) => i.isActive)[0];
-    }
-    ngAfterViewInit() {
-        // if (!this.asService?.state?.hasHeader) {
-        const parentWidth = this.elementRef.nativeElement.closest('eui-toolbar').clientWidth;
-        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.0.0-next.3", ngImport: i0, type: EuiToolbarNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiToolbarNavbarComponent, isStandalone: true, selector: "eui-toolbar-navbar", outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiToolbarNavbarItemComponent) }], 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-toolbar-navbar{display:flex;align-items:center;width:100%;padding:0 var(--eui-s-s);height:var(--eui-s-7xl)}.eui-toolbar-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-toolbar-navbar-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-toolbar-navbar-item:hover{background-color:var(--eui-c-branding-dark)}.eui-toolbar-navbar-item--active{border-bottom:3px solid var(--eui-c-white);color:var(--eui-c-white)}.eui--secondary .eui-toolbar-navbar-item:hover{background-color:var(--eui-c-surface-container-1)}.eui--secondary .eui-toolbar-navbar-item--active{border-bottom:3px solid var(--eui-c-active);color:var(--eui-c-active)}\n"], dependencies: [{ kind: "component", type: i1.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: i1$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.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: i3.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive", "isFocus"] }, { kind: "directive", type: i3.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarNavbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar-navbar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
-                        AsyncPipe,
-                        ...EUI_ICON,
-                        ...EUI_BUTTON,
-                        ...EUI_DROPDOWN,
-                    ], 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-toolbar-navbar{display:flex;align-items:center;width:100%;padding:0 var(--eui-s-s);height:var(--eui-s-7xl)}.eui-toolbar-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-toolbar-navbar-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-toolbar-navbar-item:hover{background-color:var(--eui-c-branding-dark)}.eui-toolbar-navbar-item--active{border-bottom:3px solid var(--eui-c-white);color:var(--eui-c-white)}.eui--secondary .eui-toolbar-navbar-item:hover{background-color:var(--eui-c-surface-container-1)}.eui--secondary .eui-toolbar-navbar-item--active{border-bottom:3px solid var(--eui-c-active);color:var(--eui-c-active)}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }], itemClick: [{
-                type: Output
-            }], items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EuiToolbarNavbarItemComponent)]
-            }] } });
-
-class EuiToolbarNavbarItemComponent {
-    get cssClasses() {
-        return [
-            'eui-toolbar-navbar-item',
-            this.isActive ? 'eui-toolbar-navbar-item--active' : '',
-        ].join(' ').trim();
-    }
-    constructor() {
-        this.tabindex = 0;
-        this.isActive = false;
-        const navBarComponent = inject(EuiToolbarNavbarComponent, { 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.0.0-next.3", ngImport: i0, type: EuiToolbarNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: EuiToolbarNavbarItemComponent, isStandalone: true, selector: "eui-toolbar-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, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarNavbarItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'eui-toolbar-navbar-item',
-                    template: '{{ label }}',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], 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']]
-            }] } });
-
-class EuiToolbarSearchComponent {
-    constructor() {
-        this.isInputFocus = false;
-        this.searchInput = '';
-        this.panelWidth = '25vw';
-        this.searchResults = [];
-        this.isAutocomplete = false;
-        this.isInputText = false;
-        this.hasSearchButton = false;
-        this.hasExpandAnimation = true;
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        this.search = new EventEmitter();
-        this.selectionChange = new EventEmitter();
-        this.searchClick = new EventEmitter();
-        this.inputFocus = new EventEmitter();
-        this.inputBlur = new EventEmitter();
-        this.asService = inject(EuiAppShellService);
-    }
-    get cssClasses() {
-        return [
-            'eui-toolbar-search',
-            this.isInputFocus ? 'eui-toolbar-search--focus' : '',
-            !this.hasExpandAnimation ? 'eui-toolbar-search--no-animation' : '',
-        ]
-            .join(' ')
-            .trim();
-    }
-    ngAfterContentInit() {
-        if (this.isAutocomplete) {
-            this.isInputText = false;
-        }
-        if (this.isInputText) {
-            this.isAutocomplete = false;
-        }
-        if (!this.isInputText && !this.isAutocomplete) {
-            this.isAutocomplete = true;
-        }
-    }
-    ngAfterViewInit() {
-        this.templates.forEach((item) => {
-            if (item.getType() === 'resultItemTemplate') {
-                this.resultItemTemplate = item.template;
-            }
-        });
-    }
-    onSelectionChange(items) {
-        this.selectionChange.emit(items);
-    }
-    onInputFocus() {
-        this.inputFocus.emit();
-        this.isInputFocus = true;
-    }
-    onInputBlur() {
-        if (!this.hasSearchButton || (this.hasSearchButton && this.searchInput === '')) {
-            this.inputBlur.emit();
-            this.isInputFocus = false;
-        }
-    }
-    onSearch(e) {
-        this.searchTerm = e;
-        this.search.emit(e);
-    }
-    onSearchInput(e) {
-        if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-            this.searchTerm = this.searchInput;
-            this.search.emit(this.searchInput);
-        }
-    }
-    onSearchClick(isIconOnly) {
-        if (isIconOnly) {
-            this.searchClick.emit(null);
-        }
-        else {
-            this.isInputFocus = false;
-            if (this.searchInput) {
-                this.searchClick.emit(this.searchInput);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiToolbarSearchComponent, isStandalone: true, selector: "eui-toolbar-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n    <eui-icon-button icon=\"eui-search-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n    <eui-icon-input euiIconPositionEnd>\n        @if (isAutocomplete) {\n            <eui-autocomplete [autocompleteData]=\"searchResults\"\n                placeholder=\"{{placeholderLabel}}\"\n                panelWidth=\"{{panelWidth}}\"\n                (inputBlur)=\"onInputBlur()\"\n                (inputFocus)=\"onInputFocus()\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (inputChange)=\"onSearch($event)\">\n                @if (templates.length !== 0) {\n                    <ng-template let-option euiTemplate=\"dropdownOption\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"resultItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n                    </ng-template>\n                }\n            </eui-autocomplete>\n        } @else {\n            @if (isInputText) {\n                <input euiInputText class=\"eui-toolbar-search-bar__input\" [(ngModel)]=\"searchInput\"\n                    placeholder=\"{{ placeholderLabel }}\"\n                    (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" (keydown)=\"onSearchInput($event)\" />\n            }\n        }\n\n        @if (hasSearchButton) {\n            <button class=\"eui-toolbar-search__input-button\"\n                euiButton\n                euiIconButton\n                euiSizeS\n                [euiSecondary]=\"isInputFocus\"\n                [euiPrimary]=\"!isInputFocus\"\n                (click)=\"onSearchClick(false)\"\n                aria-label=\"search button\">\n                <eui-icon-svg icon=\"eui-search\" size=\"s\"></eui-icon-svg>\n            </button>\n        } @else {\n            <eui-icon-svg icon=\"eui-search\" size=\"s\" />\n        }\n    </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-input-text{background-color:var(--eui-c-surface-container);color:var(--eui-c-black);width:300px}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button{border-color:var(--eui-c-primary-surface)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button:hover svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button svg{color:var(--eui-c-secondary-surface-medium);fill:var(--eui-c-secondary-surface-medium)}.eui-19 :host.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button{position:absolute;right:2px;top:2px;color:var(--eui-c-secondary-surface-medium);background-color:var(--eui-c-primary)}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg{z-index:1}.eui-19 :host.eui-toolbar--no-animation ::ng-deep .eui-input-text{transition:none}.eui-19 :host.eui-toolbar-search--focus.eui-toolbar-search--no-animation ::ng-deep .eui-input-text{width:200px}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-surface-container);border-color:var(--eui-c-secondary-border-light);color:var(--eui-c-neugral-bg-light-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button{background-color:var(--eui-c-surface-container-1);color:var(--eui-c-text);border-color:var(--eui-c-secondary-border-light)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:hover,.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:focus{background-color:var(--eui-c-surface-container-3);color:var(--eui-c-text)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg svg{fill:var(--eui-c-text);color:var(--eui-c-text)}\n"], dependencies: [{ kind: "component", type: i1$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.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: i3$1.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["inputId", "autocompleteData", "visibleOptions", "matching", "placeholder", "autocompleteDataSelected", "chipsSortOrder", "itemsSortOrder", "chipsPosition", "groupBy", "toggleLinkMoreLabel", "toggleLinkLessLabel", "classList", "panelWidth", "dragAndDropSourceName", "dragAndDropConnectedTo", "isFreeValueAllowed", "isReadonly", "isLoading", "hasChips", "isAsync", "isChipsSorted", "isItemsSorted", "isChipsRemovable", "isDuplicateValueAllowed", "isAddOnBlur", "isForceSelection", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsDragAndDrop"], outputs: ["panelClose", "panelOpen", "inputFocus", "inputBlur", "clear", "selectionChange", "itemAdd", "itemRemove", "inputChange", "chipDragStart", "chipDragRelease", "chipDrop"] }, { kind: "component", type: i5.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "directive", type: EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarSearchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ...EUI_BUTTON,
-                        ...EUI_ICON,
-                        ...EUI_ICON_BUTTON,
-                        ...EUI_AUTOCOMPLETE,
-                        ...EUI_ICON_INPUT,
-                        ...EUI_INPUT_TEXT,
-                        EuiTemplateDirective,
-                        NgTemplateOutlet,
-                        FormsModule,
-                        AsyncPipe,
-                    ], template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n    <eui-icon-button icon=\"eui-search-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n    <eui-icon-input euiIconPositionEnd>\n        @if (isAutocomplete) {\n            <eui-autocomplete [autocompleteData]=\"searchResults\"\n                placeholder=\"{{placeholderLabel}}\"\n                panelWidth=\"{{panelWidth}}\"\n                (inputBlur)=\"onInputBlur()\"\n                (inputFocus)=\"onInputFocus()\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (inputChange)=\"onSearch($event)\">\n                @if (templates.length !== 0) {\n                    <ng-template let-option euiTemplate=\"dropdownOption\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"resultItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n                    </ng-template>\n                }\n            </eui-autocomplete>\n        } @else {\n            @if (isInputText) {\n                <input euiInputText class=\"eui-toolbar-search-bar__input\" [(ngModel)]=\"searchInput\"\n                    placeholder=\"{{ placeholderLabel }}\"\n                    (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" (keydown)=\"onSearchInput($event)\" />\n            }\n        }\n\n        @if (hasSearchButton) {\n            <button class=\"eui-toolbar-search__input-button\"\n                euiButton\n                euiIconButton\n                euiSizeS\n                [euiSecondary]=\"isInputFocus\"\n                [euiPrimary]=\"!isInputFocus\"\n                (click)=\"onSearchClick(false)\"\n                aria-label=\"search button\">\n                <eui-icon-svg icon=\"eui-search\" size=\"s\"></eui-icon-svg>\n            </button>\n        } @else {\n            <eui-icon-svg icon=\"eui-search\" size=\"s\" />\n        }\n    </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-input-text{background-color:var(--eui-c-surface-container);color:var(--eui-c-black);width:300px}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button{border-color:var(--eui-c-primary-surface)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button:hover svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button svg{color:var(--eui-c-secondary-surface-medium);fill:var(--eui-c-secondary-surface-medium)}.eui-19 :host.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button{position:absolute;right:2px;top:2px;color:var(--eui-c-secondary-surface-medium);background-color:var(--eui-c-primary)}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg{z-index:1}.eui-19 :host.eui-toolbar--no-animation ::ng-deep .eui-input-text{transition:none}.eui-19 :host.eui-toolbar-search--focus.eui-toolbar-search--no-animation ::ng-deep .eui-input-text{width:200px}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-surface-container);border-color:var(--eui-c-secondary-border-light);color:var(--eui-c-neugral-bg-light-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button{background-color:var(--eui-c-surface-container-1);color:var(--eui-c-text);border-color:var(--eui-c-secondary-border-light)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:hover,.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:focus{background-color:var(--eui-c-surface-container-3);color:var(--eui-c-text)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg svg{fill:var(--eui-c-text);color:var(--eui-c-text)}\n"] }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], placeholderLabel: [{
-                type: Input
-            }], panelWidth: [{
-                type: Input
-            }], searchResults: [{
-                type: Input
-            }], isAutocomplete: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isInputText: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hasSearchButton: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hasExpandAnimation: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], search: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], searchClick: [{
-                type: Output
-            }], inputFocus: [{
-                type: Output
-            }], inputBlur: [{
-                type: Output
-            }], templates: [{
-                type: ContentChildren,
-                args: [EuiTemplateDirective]
-            }] } });
-
-class EuiToolbarSelectorComponent {
-    constructor() {
-        this.class = 'eui-toolbar-selector';
-        this.euiDisabled = false;
-        this.selectorClick = new EventEmitter();
-        this.asService = inject(EuiAppShellService);
-    }
-    onClick() {
-        this.selectorClick.emit(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiToolbarSelectorComponent, isStandalone: true, selector: "eui-toolbar-selector", inputs: { label: "label", iconSvgName: "iconSvgName", euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute] }, outputs: { selectorClick: "selectorClick" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n    <eui-icon-button [icon]=\"iconSvgName\" fillColor=\"neutral-bg\" (buttonClick)=\"onClick()\"/>\n} @else {\n    <button euiButton euiButtonOutline [euiDisabled]=\"euiDisabled\" (click)=\"onClick()\" class=\"eui-toolbar-selector__button\">\n        {{ label }}\n        <eui-icon-svg [icon]=\"iconSvgName\" fillColor=\"neutral-bg\" size=\"s\" class=\"eui-u-ml-m\"></eui-icon-svg>\n    </button>\n}\n", styles: [".eui-toolbar-selector__button{background-color:var(--eui-c-branding-dark)!important;border-color:var(--eui-c-branding-light)!important;border-radius:var(--eui-br-xl)!important;color:var(--eui-c-surface-container-2)!important}.eui-toolbar-selector__button:hover{border-color:var(--eui-c-white)!important;color:var(--eui-c-white)!important}.eui-toolbar-selector__button:hover .eui-icon-svg svg{fill:var(--eui-c-white)!important;color:var(--eui-c-white)!important}\n"], dependencies: [{ kind: "component", type: i1$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.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: i3$1.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        AsyncPipe,
-                        ...EUI_BUTTON,
-                        ...EUI_ICON,
-                        ...EUI_ICON_BUTTON,
-                    ], template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n    <eui-icon-button [icon]=\"iconSvgName\" fillColor=\"neutral-bg\" (buttonClick)=\"onClick()\"/>\n} @else {\n    <button euiButton euiButtonOutline [euiDisabled]=\"euiDisabled\" (click)=\"onClick()\" class=\"eui-toolbar-selector__button\">\n        {{ label }}\n        <eui-icon-svg [icon]=\"iconSvgName\" fillColor=\"neutral-bg\" size=\"s\" class=\"eui-u-ml-m\"></eui-icon-svg>\n    </button>\n}\n", styles: [".eui-toolbar-selector__button{background-color:var(--eui-c-branding-dark)!important;border-color:var(--eui-c-branding-light)!important;border-radius:var(--eui-br-xl)!important;color:var(--eui-c-surface-container-2)!important}.eui-toolbar-selector__button:hover{border-color:var(--eui-c-white)!important;color:var(--eui-c-white)!important}.eui-toolbar-selector__button:hover .eui-icon-svg svg{fill:var(--eui-c-white)!important;color:var(--eui-c-white)!important}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }], label: [{
-                type: Input
-            }], iconSvgName: [{
-                type: Input
-            }], euiDisabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectorClick: [{
-                type: Output
-            }] } });
-
-class EuiToolbarComponent {
-    constructor() {
-        this.euiSecondary = false;
-        this.euiPrimary = true;
-        this.asService = inject(EuiAppShellService);
-        this.elRef = inject(ElementRef);
-    }
-    get cssClasses() {
-        return [
-            'eui-toolbar',
-            this.euiSecondary ? 'eui-toolbar--secondary eui--secondary' : '',
-            this.euiPrimary ? 'eui-toolbar--primary eui--primary' : '',
-        ].join(' ').trim();
-    }
-    ngOnInit() {
-        if (this.euiSecondary) {
-            this.euiPrimary = false;
-        }
-    }
-    ngAfterViewInit() {
-        const appToolbar = this.elRef.nativeElement.closest('eui-app-toolbar');
-        setTimeout(() => {
-            if (appToolbar && appToolbar.classList.contains('eui--secondary')) {
-                this.euiSecondary = true;
-                this.euiPrimary = false;
-            }
-        }, 1);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiToolbarComponent, isStandalone: true, selector: "eui-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute], euiPrimary: ["euiPrimary", "euiPrimary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMegaMenu", first: true, predicate: i0.forwardRef(() => EuiToolbarMegaMenuComponent), descendants: true }], ngImport: i0, template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n    <div class=\"eui-toolbar__left\">\n        @if ( ( asService.state$ | async).hasHeaderLogo ) {\n            <eui-toolbar-logo></eui-toolbar-logo>\n        }\n        @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n            <eui-toolbar-environment>\n                {{ (asService.state$ | async).environmentValue }}\n            </eui-toolbar-environment>\n        }\n        @if ( (asService.state$ | async).appName ) {\n            <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n        }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n\n} @else {\n    @if ( (asService.state$ | async).hasHeader ) {\n\n        @if ( hasMegaMenu ) {\n            <ng-container *ngTemplateOutlet=\"toolbarMegaMenu\" />\n        } @else {\n            <ng-container *ngTemplateOutlet=\"toolbarNavbar\" />\n            <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n        }\n        <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n    } @else {\n\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-logo\"></ng-content>\n            <ng-content select=\"eui-toolbar-app\"></ng-content>\n            <ng-content select=\"eui-toolbar-environment\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"toolbarNavbar\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n\n        <div class=\"eui-toolbar__right\">\n            <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n        </div>\n    }\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n}\n\n<ng-template #toolbarCenter>\n    <ng-content select=\"eui-toolbar-center\" />\n</ng-template>\n\n<ng-template #toolbarItems>\n    <ng-content select=\"eui-toolbar-items\" />\n</ng-template>\n\n<ng-template #toolbarNavbar>\n    <ng-content select=\"eui-toolbar-navbar\" />\n</ng-template>\n\n<ng-template #toolbarMegaMenu>\n    @if (hasMegaMenu) {\n        <ng-content select=\"eui-toolbar-mega-menu\"></ng-content>\n    }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-content select=\"eui-language-selector\" />\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-danger);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-4xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-surface-shell);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg{--_color: var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light)!important;color:var(--eui-c-branding-light-contrast)!important}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar{flex-wrap:initial;padding:0 var(--eui-s-xs) 0 var(--eui-s-m)}.eui-toolbar-logo{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-toolbar-environment{display:none}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: ["homeUrl", "logoUrl", "logoHeight", "logoWidth"] }, { kind: "component", type: EuiToolbarEnvironmentComponent, selector: "eui-toolbar-environment" }, { kind: "component", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: ["appName", "appSubTitle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-toolbar', encapsulation: ViewEncapsulation.None, imports: [
-                        AsyncPipe,
-                        NgTemplateOutlet,
-                        EuiToolbarLogoComponent,
-                        EuiToolbarEnvironmentComponent,
-                        EuiToolbarAppComponent,
-                        EuiToolbarItemsComponent,
-                        EuiToolbarItemComponent,
-                        ...EUI_USER_PROFILE,
-                    ], template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n    <div class=\"eui-toolbar__left\">\n        @if ( ( asService.state$ | async).hasHeaderLogo ) {\n            <eui-toolbar-logo></eui-toolbar-logo>\n        }\n        @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n            <eui-toolbar-environment>\n                {{ (asService.state$ | async).environmentValue }}\n            </eui-toolbar-environment>\n        }\n        @if ( (asService.state$ | async).appName ) {\n            <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n        }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n\n} @else {\n    @if ( (asService.state$ | async).hasHeader ) {\n\n        @if ( hasMegaMenu ) {\n            <ng-container *ngTemplateOutlet=\"toolbarMegaMenu\" />\n        } @else {\n            <ng-container *ngTemplateOutlet=\"toolbarNavbar\" />\n            <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n        }\n        <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n    } @else {\n\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-logo\"></ng-content>\n            <ng-content select=\"eui-toolbar-app\"></ng-content>\n            <ng-content select=\"eui-toolbar-environment\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"toolbarNavbar\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n\n        <div class=\"eui-toolbar__right\">\n            <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n        </div>\n    }\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n}\n\n<ng-template #toolbarCenter>\n    <ng-content select=\"eui-toolbar-center\" />\n</ng-template>\n\n<ng-template #toolbarItems>\n    <ng-content select=\"eui-toolbar-items\" />\n</ng-template>\n\n<ng-template #toolbarNavbar>\n    <ng-content select=\"eui-toolbar-navbar\" />\n</ng-template>\n\n<ng-template #toolbarMegaMenu>\n    @if (hasMegaMenu) {\n        <ng-content select=\"eui-toolbar-mega-menu\"></ng-content>\n    }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-content select=\"eui-language-selector\" />\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-danger);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-4xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-surface-shell);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg{--_color: var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light)!important;color:var(--eui-c-branding-light-contrast)!important}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar{flex-wrap:initial;padding:0 var(--eui-s-xs) 0 var(--eui-s-m)}.eui-toolbar-logo{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-toolbar-environment{display:none}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"] }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], euiSecondary: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], euiPrimary: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hasMegaMenu: [{
-                type: ContentChild,
-                args: [forwardRef(() => EuiToolbarMegaMenuComponent)]
-            }] } });
-
-const EUI_TOOLBAR = [
-    EuiToolbarComponent,
-    EuiToolbarAppComponent,
-    EuiToolbarEnvironmentComponent,
-    EuiToolbarItemsComponent,
-    EuiToolbarItemComponent,
-    EuiToolbarCenterComponent,
-    EuiToolbarLogoComponent,
-    EuiToolbarSelectorComponent,
-    EuiToolbarNavbarComponent,
-    EuiToolbarNavbarItemComponent,
-    EuiToolbarSearchComponent,
-    EuiToolbarMegaMenuComponent,
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { EUI_TOOLBAR, EuiToolbarAppComponent, EuiToolbarCenterComponent, EuiToolbarComponent, EuiToolbarEnvironmentComponent, EuiToolbarItemComponent, EuiToolbarItemsComponent, EuiToolbarLogoComponent, EuiToolbarMegaMenuComponent, EuiToolbarNavbarComponent, EuiToolbarNavbarItemComponent, EuiToolbarSearchComponent, EuiToolbarSelectorComponent };
-//# sourceMappingURL=eui-components-layout-eui-toolbar.mjs.map