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

package/fesm2022/eui-components-layout.mjs

@@ -1,24 +1,2367 @@
-import { EUI_APP } from '@eui/components/layout/eui-app';
-import { EUI_TOOLBAR } from '@eui/components/layout/eui-toolbar';
-import { EUI_FOOTER } from '@eui/components/layout/eui-footer';
-import { EUI_HEADER } from '@eui/components/layout/eui-header';
-import { EUI_NOTIFICATIONS } from '@eui/components/layout/eui-notifications';
-import { EUI_NOTIFICATIONS_V2 } from '@eui/components/layout/eui-notifications-v2';
-import { EUI_SIDEBAR_TOGGLE } from '@eui/components/layout/eui-sidebar-toggle';
+import * as i0 from '@angular/core';
+import { inject, HostListener, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, forwardRef, ContentChild, EventEmitter, ContentChildren, Output, ViewChild, ChangeDetectorRef, PLATFORM_ID, Directive, NgZone } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet, KeyValuePipe, JsonPipe, AsyncPipe, isPlatformBrowser, NgClass, DatePipe } from '@angular/common';
+import { Subscription, Subject, fromEvent, takeUntil as takeUntil$1, startWith } from 'rxjs';
+import { filter, takeUntil, debounceTime } from 'rxjs/operators';
+import { EUI_CONFIG_TOKEN, EuiAppShellService, CssUtils, consumeEvent, EuiGrowlService, EuiThemeService } from '@eui/core';
+import * as i2$1 from '@eui/components/eui-dimmer';
+import { EUI_DIMMER } from '@eui/components/eui-dimmer';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import * as i1$5 from '@eui/components/eui-growl';
+import { EUI_GROWL } from '@eui/components/eui-growl';
+import * as i3$2 from '@eui/components/eui-block-document';
+import { EUI_BLOCK_DOCUMENT } from '@eui/components/eui-block-document';
+import * as i1$3 from '@eui/components/eui-user-profile';
+import { EUI_USER_PROFILE, EuiUserProfileMenuComponent } from '@eui/components/eui-user-profile';
+import * as i1 from '@eui/components/eui-icon';
+import { EUI_ICON } from '@eui/components/eui-icon';
+import * as i3 from '@eui/components/eui-badge';
+import { EUI_BADGE } from '@eui/components/eui-badge';
+import * as i3$1 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 i2 from '@eui/components/eui-icon-button';
+import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-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 i1$2 from '@eui/components/eui-menu';
+import { EUI_MENU } from '@eui/components/eui-menu';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1$4 from '@eui/components/eui-language-selector';
+import { EUI_LANGUAGE_SELECTOR } from '@eui/components/eui-language-selector';
+import { ViewportRuler, ScrollDispatcher } from '@angular/cdk/scrolling';
+import * as i1$6 from '@eui/components/shared';
+import { BaseStatesDirective } from '@eui/components/shared';
+import { ContentObserver } from '@angular/cdk/observers';
+import * as i2$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i5$1 from '@eui/components/eui-input-group';
+import { EUI_INPUT_GROUP } from '@eui/components/eui-input-group';
+import { EuiTruncatePipe } from '@eui/components/pipes';
+import * as i4$1 from '@eui/components/eui-overlay';
+import { EUI_OVERLAY } from '@eui/components/eui-overlay';
+
+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 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 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 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 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 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: i3.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 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)]
+            }] } });
+
+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 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 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$1.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$1.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive", "isFocus"] }, { kind: "directive", type: i3$1.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 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: i2.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 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: i2.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 EuiAppSidebarComponent {
+    constructor() {
+        this.string = 'eui-app-sidebar';
+        this.asService = inject(EuiAppShellService, { optional: true });
+        this.subscriptions = [];
+        this.document = inject(DOCUMENT);
+    }
+    close() {
+        if (this.asService &&
+            (this.asService.state.breakpoints.isMobile || this.asService.state.breakpoints.isTablet || this.asService.state.isSidebarHidden)) {
+            this.asService.isSidebarOpen = false;
+        }
+    }
+    ngOnInit() {
+        this.asService?.activateSidebar();
+        this.subscriptions.push(this.asService
+            ?.getState('breakpoints.isMobile')
+            .pipe(filter((s) => s === true))
+            .subscribe(() => (this.asService.isSidebarOpen = false)));
+        this.subscriptions.push(this.asService
+            ?.getState('breakpoints.isTablet')
+            .pipe(filter((s) => s === true))
+            .subscribe(() => (this.asService.isSidebarOpen = false)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+        this.asService?.setState({
+            ...this.asService.state,
+            hasSidebar: false,
+        });
+        CssUtils.removeSidebarCssVars(this.document);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppSidebarComponent, isStandalone: true, selector: "eui-app-sidebar", host: { listeners: { "body:click": "close()" }, properties: { "class": "this.string" } }, ngImport: i0, template: "<aside class=\"eui-app-sidebar-content\">\n    <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-surface-shell);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-toolbar-mega-menu-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-surface-shell);border-bottom:1px solid var(--eui-c-divider-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-surface-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-app-sidebar-body{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-divider-light);background-color:var(--eui-c-surface-shell);box-shadow:var(--eui-sh-2);display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.modal-open .eui-app-sidebar{z-index:auto}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-surface-shell);border-top:1px solid var(--eui-c-divider);height:calc(100% - var(--eui-app-sidebar-header-user-profile));overflow-y:auto;padding:var(--eui-s-s);width:100%}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-surface-light)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}.eui-app.sidebar--open.md .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer--expanded{top:var(--eui-app-sidebar-header-user-profile);position:absolute;width:100%}.eui-app.sidebar--close.md .eui-app-sidebar-drawer,.eui-app.sidebar--close.xs .eui-app-sidebar-drawer,.eui-app.sidebar--close.sm .eui-app-sidebar-drawer{position:fixed;top:100vh}@media screen and (max-width: 767px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:50%}}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-sidebar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside class=\"eui-app-sidebar-content\">\n    <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n    <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-surface-shell);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-toolbar-mega-menu-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-surface-shell);border-bottom:1px solid var(--eui-c-divider-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-surface-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-app-sidebar-body{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-divider-light);background-color:var(--eui-c-surface-shell);box-shadow:var(--eui-sh-2);display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.modal-open .eui-app-sidebar{z-index:auto}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-surface-shell);border-top:1px solid var(--eui-c-divider);height:calc(100% - var(--eui-app-sidebar-header-user-profile));overflow-y:auto;padding:var(--eui-s-s);width:100%}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-surface-light)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}.eui-app.sidebar--open.md .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer--expanded{top:var(--eui-app-sidebar-header-user-profile);position:absolute;width:100%}.eui-app.sidebar--close.md .eui-app-sidebar-drawer,.eui-app.sidebar--close.xs .eui-app-sidebar-drawer,.eui-app.sidebar--close.sm .eui-app-sidebar-drawer{position:fixed;top:100vh}@media screen and (max-width: 767px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:50%}}\n"] }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], close: [{
+                type: HostListener,
+                args: ['body:click']
+            }] } });
+
+class EuiAppSidebarBodyComponent {
+    constructor() {
+        this.class = 'eui-app-sidebar-body';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppSidebarBodyComponent, isStandalone: true, selector: "eui-app-sidebar-body", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content select=\"eui-app-sidebar-menu\"/>\n<ng-content/>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-sidebar-body', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"eui-app-sidebar-menu\"/>\n<ng-content/>\n" }]
+        }], propDecorators: { class: [{
+                type: HostBinding
+            }] } });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class EuiAppSidebarMenuComponent {
+    constructor() {
+        this.asService = inject(EuiAppShellService);
+        this.class = 'eui-app-sidebar-menu';
+        this.hasFilter = false;
+        this.hasIcons = false;
+        this.hasIconsLabels = false;
+        this.hasTooltip = true;
+        this.hasTooltipOnExpanded = false;
+        this.expandAllItems = false;
+        this.isCollapsed = false;
+        this.hasCollapsedInitials = false;
+        this.isFlat = false;
+        this.hasScrollToItem = false;
+        this.hasBoldRootLevel = false;
+        this.sidebarItemClick = new EventEmitter();
+        this.sidebarItemToggle = new EventEmitter();
+        this.subs = new Subscription();
+    }
+    ngOnInit() {
+        if (this.items) {
+            this.asService.setState({
+                ...this.asService.state,
+                sidebarLinks: this.items,
+            });
+        }
+        if (this.hasIconsLabels) {
+            this.asService.hasSidebarCollapsedVariant = this.hasIconsLabels;
+        }
+        this.subs.add(this.asService.state$.subscribe((state) => {
+            if (state?.breakpoints?.isMobile) {
+                this.items = state.combinedLinks;
+            }
+            else {
+                this.items = state.sidebarLinks;
+            }
+        }));
+        // subscribe to state changes
+        // this.subs.add(this.asService.getState<Items[]>('combinedLinks').subscribe((links) => (this.items = links)));
+    }
+    ngAfterViewInit() {
+        this.subs.add(this.asService.state$.subscribe((state) => {
+            if (state?.isSidebarFocused && this.menu) {
+                this.menu.menubar.nativeElement.focus();
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes.items) {
+            this.asService.setState({
+                ...this.asService.state,
+                sidebarLinks: this.items,
+            });
+        }
+    }
+    onMenuItemClicked(event) {
+        // Auto-close sidebar menu after click when in mobile / tablet modes
+        if (event.url &&
+            (this.asService.state.breakpoints.isMobile || this.asService.state.breakpoints.isTablet || this.asService.state.isSidebarHidden)) {
+            this.asService.isSidebarOpen = false;
+        }
+        this.sidebarItemClick.emit(event);
+    }
+    onSidebarItemToggled(event) {
+        this.sidebarItemToggle.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: EuiAppSidebarMenuComponent, isStandalone: true, selector: "eui-app-sidebar-menu", inputs: { hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasIconsLabels: ["hasIconsLabels", "hasIconsLabels", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], hasTooltipOnExpanded: ["hasTooltipOnExpanded", "hasTooltipOnExpanded", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute], items: "items" }, outputs: { sidebarItemClick: "sidebarItemClick", sidebarItemToggle: "sidebarItemToggle" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-menu\n    #menu\n    [items]=\"items\"\n    [hasFilter]=\"hasFilter\"\n    [hasIcons]=\"hasIcons\"\n    [hasIconsLabels]=\"hasIconsLabels\"\n    [hasTooltip]=\"hasTooltip\"\n    [hasTooltipOnExpanded]=\"hasTooltipOnExpanded\"\n    [expandAllItems]=\"expandAllItems\"\n    [isFlat]=\"isFlat\"\n    [hasScrollToItem]=\"hasScrollToItem\"\n    [hasCollapsedInitials]=\"hasCollapsedInitials\"\n    [hasBoldRootLevel]=\"hasBoldRootLevel\"\n    [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen\"\n    (itemClick)=\"onMenuItemClicked($event)\"\n    (expandToggle)=\"onSidebarItemToggled($event)\" />\n", dependencies: [{ kind: "component", type: i1$2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "filterValue", "isCollapsed", "hasCollapsedInitials", "hasFilter", "hasIcons", "hasIconsLabels", "hasTooltip", "hasTooltipOnExpanded", "expandAllItems", "isFlat", "hasScrollToItem", "hasBoldRootLevel"], outputs: ["isClick", "itemClick", "expandToggle"] }, { 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: EuiAppSidebarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-sidebar-menu', encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        ...EUI_MENU,
+                    ], template: "<eui-menu\n    #menu\n    [items]=\"items\"\n    [hasFilter]=\"hasFilter\"\n    [hasIcons]=\"hasIcons\"\n    [hasIconsLabels]=\"hasIconsLabels\"\n    [hasTooltip]=\"hasTooltip\"\n    [hasTooltipOnExpanded]=\"hasTooltipOnExpanded\"\n    [expandAllItems]=\"expandAllItems\"\n    [isFlat]=\"isFlat\"\n    [hasScrollToItem]=\"hasScrollToItem\"\n    [hasCollapsedInitials]=\"hasCollapsedInitials\"\n    [hasBoldRootLevel]=\"hasBoldRootLevel\"\n    [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen\"\n    (itemClick)=\"onMenuItemClicked($event)\"\n    (expandToggle)=\"onSidebarItemToggled($event)\" />\n" }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding
+            }], hasFilter: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasIcons: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasIconsLabels: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasTooltip: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasTooltipOnExpanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandAllItems: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isCollapsed: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasCollapsedInitials: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isFlat: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasScrollToItem: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasBoldRootLevel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], items: [{
+                type: Input
+            }], sidebarItemClick: [{
+                type: Output
+            }], sidebarItemToggle: [{
+                type: Output
+            }], menu: [{
+                type: ViewChild,
+                args: ['menu', { static: false }]
+            }] } });
+
+class EuiAppSidebarHeaderComponent {
+    constructor() {
+        this.class = 'eui-app-sidebar-header';
+        this.asService = inject(EuiAppShellService);
+        this.document = inject(DOCUMENT);
+    }
+    ngOnInit() {
+        this.asService.activateSidebarHeader();
+    }
+    ngOnDestroy() {
+        this.document.documentElement.style.removeProperty('--eui-app-sidebar-header-height');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppSidebarHeaderComponent, isStandalone: true, selector: "eui-app-sidebar-header", 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: EuiAppSidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eui-app-sidebar-header',
+                    template: '<ng-content/>',
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding
+            }] } });
+
+class EuiAppSidebarFooterComponent {
+    constructor() {
+        this.class = 'eui-app-sidebar-footer';
+        this.asService = inject(EuiAppShellService);
+        this.document = inject(DOCUMENT);
+    }
+    ngOnInit() {
+        this.asService.activateSidebarFooter();
+    }
+    ngOnDestroy() {
+        this.document.documentElement.style.removeProperty('--eui-app-sidebar-footer-height');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppSidebarFooterComponent, isStandalone: true, selector: "eui-app-sidebar-footer", 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: EuiAppSidebarFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eui-app-sidebar-footer',
+                    template: '<ng-content/>',
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding
+            }] } });
+
+class EuiAppSidebarHeaderUserProfileComponent {
+    constructor() {
+        this.welcomeLabel = 'Welcome';
+        this.impersonateLabel = 'acting as';
+        this.isShowUserInfos = true;
+        this.isShowAvatarInitials = false;
+        this.isOnline = true;
+        this.hasWelcomeLabel = true;
+        this.hasTabNavigation = false;
+        this.hasToggle = false;
+        this.hasProfileDrawer = false;
+        // eslint-disable-next-line
+        this.toggle = new EventEmitter();
+        this.toggleProfile = false;
+    }
+    get cssClasses() {
+        return this._getCssClasses();
+    }
+    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onProfileClick(event) {
+        this.toggleProfile = !this.toggleProfile;
+        consumeEvent(event);
+        this.toggle.emit();
+    }
+    onClick(event) {
+        if (this.hasProfileDrawer) {
+            this.onProfileClick(event);
+        }
+        consumeEvent(event);
+    }
+    _getCssClasses() {
+        return [
+            'eui-app-sidebar-header-user-profile',
+            this.hasProfileDrawer ? 'eui-app-sidebar-header-user-profile--has-drawer' : '',
+        ].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiAppSidebarHeaderUserProfileComponent, isStandalone: true, selector: "eui-app-sidebar-header-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], isOnline: ["isOnline", "isOnline", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], hasProfileDrawer: ["hasProfileDrawer", "hasProfileDrawer", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent) }], ngImport: i0, template: "<eui-user-profile\n    [hasWelcomeLabel]=\"hasWelcomeLabel\"\n    [welcomeLabel]=\"welcomeLabel\"\n    [impersonateLabel]=\"impersonateLabel\"\n    [avatarUrl]=\"avatarUrl\"\n    [hasMenu]=\"userProfileMenu.length !== 0\"\n    [isShowUserInfos]=\"isShowUserInfos\"\n    [isShowAvatarInitials]=\"isShowAvatarInitials\"\n    [hasTabNavigation]=\"hasTabNavigation\"\n    isReverse\n    [hasToggle]=\"hasToggle\"\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n\n@if (hasProfileDrawer) {\n    <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"Toggle user profile details\">\n        <eui-icon-svg [icon]=\"toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'\"></eui-icon-svg>\n    </button>\n}\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-divider);display:flex;height:var(--eui-app-sidebar-header-user-profile);padding:var(--eui-s-s) var(--eui-s-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile--has-drawer,.eui-app-sidebar-header-user-profile--has-drawer .eui-user-profile-content--no-menu{cursor:pointer}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"], dependencies: [{ kind: "component", type: i1$3.EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "statusVariant", "hasMenu", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle", "isHeaderUserProfile", "isToolbarUserProfile", "isShowUserInfos", "isMobileOnly", "euiStatusSecondary", "euiStatusSuccess", "euiStatusDanger", "reverseNameOrder"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-sidebar-header-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        ...EUI_USER_PROFILE,
+                        ...EUI_BUTTON,
+                        ...EUI_ICON,
+                    ], template: "<eui-user-profile\n    [hasWelcomeLabel]=\"hasWelcomeLabel\"\n    [welcomeLabel]=\"welcomeLabel\"\n    [impersonateLabel]=\"impersonateLabel\"\n    [avatarUrl]=\"avatarUrl\"\n    [hasMenu]=\"userProfileMenu.length !== 0\"\n    [isShowUserInfos]=\"isShowUserInfos\"\n    [isShowAvatarInitials]=\"isShowAvatarInitials\"\n    [hasTabNavigation]=\"hasTabNavigation\"\n    isReverse\n    [hasToggle]=\"hasToggle\"\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n\n@if (hasProfileDrawer) {\n    <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"Toggle user profile details\">\n        <eui-icon-svg [icon]=\"toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'\"></eui-icon-svg>\n    </button>\n}\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-divider);display:flex;height:var(--eui-app-sidebar-header-user-profile);padding:var(--eui-s-s) var(--eui-s-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile--has-drawer,.eui-app-sidebar-header-user-profile--has-drawer .eui-user-profile-content--no-menu{cursor:pointer}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], welcomeLabel: [{
+                type: Input
+            }], impersonateLabel: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], isShowUserInfos: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowAvatarInitials: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isOnline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasWelcomeLabel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasTabNavigation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasToggle: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasProfileDrawer: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], toggle: [{
+                type: Output
+            }], userProfileMenu: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EuiUserProfileMenuComponent)]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class EuiAppSidebarDrawerComponent {
+    constructor() {
+        this._isExpanded = false;
+    }
+    get isExpanded() {
+        return this._isExpanded;
+    }
+    set isExpanded(value) {
+        this._isExpanded = coerceBooleanProperty(value);
+    }
+    get cssClasses() {
+        return this._getCssClasses();
+    }
+    onSidebarDrawerContentClick(event) {
+        event.stopPropagation();
+    }
+    _getCssClasses() {
+        return ['eui-app-sidebar-drawer', this.isExpanded ? 'eui-app-sidebar-drawer--expanded' : ''].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppSidebarDrawerComponent, isStandalone: true, selector: "eui-app-sidebar-drawer", inputs: { isExpanded: "isExpanded" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<!-- HIDDEN APP DRAWER : scrolls up and revealing user info details or any other injected content -->\n<div class=\"eui-app-sidebar-drawer-content\" (click)=\"onSidebarDrawerContentClick($event)\">\n    <ng-content></ng-content>\n</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppSidebarDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-sidebar-drawer', encapsulation: ViewEncapsulation.None, template: "<!-- HIDDEN APP DRAWER : scrolls up and revealing user info details or any other injected content -->\n<div class=\"eui-app-sidebar-drawer-content\" (click)=\"onSidebarDrawerContentClick($event)\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { isExpanded: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuiSidebarToggleComponent {
+    constructor() {
+        this.e2eAttr = 'eui-sidebar-toggle';
+        this.name = 'eui-sidebar-toggle';
+        this.asService = inject(EuiAppShellService);
+    }
+    onToggleSidebar(event) {
+        // focus the first focusable element in the sidebar when opened in mobile/tablet
+        if (this.asService.state.breakpoints.isMobile || this.asService.state.breakpoints.isTablet) {
+            if (!this.asService.isSidebarOpen) {
+                this.asService.state.isSidebarFocused = true;
+            }
+            else {
+                this.asService.state.isSidebarFocused = false;
+            }
+        }
+        this.asService.sidebarToggle();
+        consumeEvent(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiSidebarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiSidebarToggleComponent, isStandalone: true, selector: "eui-sidebar-toggle", inputs: { e2eAttr: "e2eAttr", iconSvgFillColor: "iconSvgFillColor" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.name" } }, ngImport: i0, template: "<eui-icon-button\n    icon=\"eui-menu\"\n    fillColor=\"{{iconSvgFillColor}}\"\n    size=\"l\"\n    [ariaLabel]=\"(asService.state$ | async).isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'\"\n    (buttonClick)=\"onToggleSidebar($event)\" />\n", dependencies: [{ kind: "component", type: i2.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" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiSidebarToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-sidebar-toggle', encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        ...EUI_ICON_BUTTON,
+                    ], template: "<eui-icon-button\n    icon=\"eui-menu\"\n    fillColor=\"{{iconSvgFillColor}}\"\n    size=\"l\"\n    [ariaLabel]=\"(asService.state$ | async).isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'\"\n    (buttonClick)=\"onToggleSidebar($event)\" />\n" }]
+        }], propDecorators: { e2eAttr: [{
+                type: HostBinding,
+                args: ['attr.data-e2e']
+            }, {
+                type: Input
+            }], name: [{
+                type: HostBinding,
+                args: ['class']
+            }], iconSvgFillColor: [{
+                type: Input
+            }] } });
+
+class EuiAppToolbarComponent {
+    constructor() {
+        this.role = 'banner';
+        this.euiSecondary = false;
+        this.asService = inject(EuiAppShellService);
+        this.document = inject(DOCUMENT);
+    }
+    get cssClasses() {
+        return [
+            'eui-app-toolbar',
+            this.euiSecondary ? 'eui-app-toolbar--secondary eui--secondary' : 'eui-app-toolbar--primary eui--primary',
+        ].join(' ').trim();
+    }
+    ngOnInit() {
+        this.asService.activateToolbar();
+    }
+    ngOnDestroy() {
+        this.asService.setState({
+            ...this.asService.state,
+            hasToolbar: false,
+        });
+        this.document.documentElement.style.removeProperty('--eui-app-toolbar-height');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiAppToolbarComponent, isStandalone: true, selector: "eui-app-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "@if (asService.getState('hasSidebar') | async) {\n    <eui-sidebar-toggle class=\"eui-app-toolbar__sidebar-toggle\"/>\n}\n\n<ng-content/>\n\n@if ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile) {\n    <eui-language-selector isToolbarSelector/>\n}\n", styles: [".eui-app-toolbar{align-items:center;width:100%;height:var(--eui-app-toolbar-height);display:flex;position:fixed;right:0;left:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));z-index:var(--eui-zi-nav);border-bottom:1px solid var(--eui-c-divider)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-s-xs);padding-right:var(--eui-s-xs)}.eui-app-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-app-toolbar--primary .eui-icon-svg{--_color: var(--eui-c-white)}.eui-app-toolbar--secondary{background-color:var(--eui-c-surface-shell);color:var(--eui-c-text)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-s-m) + 2px)}@media screen and (max-width: 767px){.eui-app-toolbar__sidebar-toggle{padding-right:0}}\n"], dependencies: [{ kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr", "iconSvgFillColor"] }, { kind: "component", type: i1$4.EuiLanguageSelectorComponent, selector: "eui-language-selector", inputs: ["hasLanguageSelection", "isToolbarSelector", "euiPrimary", "aria-label"], outputs: ["languageSelectorClick"] }, { 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: EuiAppToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-toolbar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        EuiSidebarToggleComponent,
+                        ...EUI_LANGUAGE_SELECTOR,
+                    ], template: "@if (asService.getState('hasSidebar') | async) {\n    <eui-sidebar-toggle class=\"eui-app-toolbar__sidebar-toggle\"/>\n}\n\n<ng-content/>\n\n@if ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile) {\n    <eui-language-selector isToolbarSelector/>\n}\n", styles: [".eui-app-toolbar{align-items:center;width:100%;height:var(--eui-app-toolbar-height);display:flex;position:fixed;right:0;left:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));z-index:var(--eui-zi-nav);border-bottom:1px solid var(--eui-c-divider)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-s-xs);padding-right:var(--eui-s-xs)}.eui-app-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-app-toolbar--primary .eui-icon-svg{--_color: var(--eui-c-white)}.eui-app-toolbar--secondary{background-color:var(--eui-c-surface-shell);color:var(--eui-c-text)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-s-m) + 2px)}@media screen and (max-width: 767px){.eui-app-toolbar__sidebar-toggle{padding-right:0}}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], euiSecondary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class EuiAppComponent {
+    constructor() {
+        this.cssClasses = 'eui-app';
+        this.appSubTitle = '';
+        this.themeClass = '';
+        this.hasNoPageWrapper = false;
+        this.isSidebarOpen = true;
+        this.isShrinkHeaderActive = true;
+        this.isSidebarHidden = false;
+        this.asService = inject(EuiAppShellService);
+        this.euiGrowlService = inject(EuiGrowlService);
+        this.destroy$ = new Subject();
+        this.cdRef = inject(ChangeDetectorRef);
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
+    }
+    ngAfterContentInit() {
+        this.hasNoPageWrapper = !this.customPageWrapper;
+        this.isViewLoaded = true;
+    }
+    ngOnInit() {
+        this.isViewLoaded = false;
+        CssUtils.initCssVars(this.document, this.platformId);
+        CssUtils.setHtmlClass('eui-19', this.document);
+        if (isPlatformBrowser(this.platformId)) {
+            const browserAgent = window.navigator.userAgent.toLowerCase();
+            this.asService.setState({
+                ...this.asService.state,
+                windowHeight: window.innerHeight,
+                windowWidth: window.innerWidth,
+                hasHeader: false,
+                hasSidebar: false,
+                deviceInfo: {
+                    isChrome: browserAgent.indexOf('chrome') > -1,
+                    isIE: browserAgent.indexOf('trident') > -1,
+                    isFF: browserAgent.indexOf('firefox') > -1,
+                },
+                appBaseFontSize: this.asService.getBaseFontSize(),
+            });
+        }
+        this.asService
+            .getState('wrapperClasses')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((state) => {
+            this.cdRef.detach();
+            this.cssClasses = ['eui-app', state].join(' ');
+            this.cdRef.reattach();
+            this.cdRef.detectChanges();
+        });
+        if (isPlatformBrowser(this.platformId)) {
+            fromEvent(window, 'resize')
+                .pipe(debounceTime(50), takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.asService?.setState({
+                    ...this.asService.state,
+                    windowHeight: window.innerHeight,
+                    windowWidth: window.innerWidth,
+                });
+                CssUtils.setAppViewportCssVars(this.platformId);
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.isSidebarHidden) {
+            this.asService.setState({
+                ...this.asService.state,
+                isSidebarHidden: changes.isSidebarHidden.currentValue,
+            });
+        }
+        if (changes.isSidebarOpen) {
+            this.asService.setState({
+                ...this.asService.state,
+                isSidebarOpen: changes.isSidebarOpen.currentValue,
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiAppComponent, isStandalone: true, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: ["isSidebarOpen", "isSidebarOpen", booleanAttribute], isShrinkHeaderActive: ["isShrinkHeaderActive", "isShrinkHeaderActive", booleanAttribute], isSidebarHidden: ["isSidebarHidden", "isSidebarHidden", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\" />\n\n<ng-content select=\"eui-app-sidebar\" />\n@if (!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) {\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [hasIcons]=\"true\" />\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n}\n\n@if (isViewLoaded) {\n<div class=\"eui-app-main\">\n    <ng-content select=\"eui-app-top-message\"></ng-content>\n\n    <ng-content select=\"eui-app-header\"></ng-content>\n\n    @if (\n        (!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) || \n        (appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) && (asService.state$ | async).menuLinks.length !== 0\n        ) {\n        <eui-app-toolbar>\n            <eui-toolbar>\n                <eui-toolbar-items>\n                    <eui-toolbar-item>\n                        <ng-content select=\"eui-user-profile\"/>\n                    </eui-toolbar-item>\n                </eui-toolbar-items>                \n            </eui-toolbar>\n        </eui-app-toolbar>\n    } @else {\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    }\n\n    <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n    <div class=\"eui-app-main-content\" role=\"main\">\n        <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n        @if (hasNoPageWrapper) {\n            <router-outlet></router-outlet>\n        }\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n}\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [ariaLive]=\"euiGrowlService.ariaGrowlLive\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (growlClick)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\" />\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\" />\n", styles: [".eui-app{display:flex;overflow:hidden}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-toolbar-mega-menu-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}.eui-app-main{min-height:100vh;background:var(--eui-c-surface-page);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in-out;display:flex;flex-direction:column}eui-app-page-wrapper{display:flex;width:100%}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["hasFilter", "hasIcons", "hasIconsLabels", "hasTooltip", "hasTooltipOnExpanded", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick", "sidebarItemToggle"] }, { kind: "component", type: EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: EuiToolbarItemsComponent, selector: "eui-toolbar-items", inputs: ["euiEnd", "euiPositionRight"] }, { kind: "component", type: EuiToolbarItemComponent, selector: "eui-toolbar-item" }, { kind: "component", type: i1$5.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "ariaLive", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i2$1.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "component", type: i3$2.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }, { 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: EuiAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app', encapsulation: ViewEncapsulation.None, imports: [
+                        RouterOutlet,
+                        AsyncPipe,
+                        EuiAppSidebarComponent,
+                        EuiAppSidebarMenuComponent,
+                        EuiAppSidebarBodyComponent,
+                        EuiAppToolbarComponent,
+                        EuiToolbarComponent,
+                        EuiToolbarItemsComponent,
+                        EuiToolbarItemComponent,
+                        ...EUI_USER_PROFILE,
+                        ...EUI_GROWL,
+                        ...EUI_DIMMER,
+                        ...EUI_BLOCK_DOCUMENT,
+                    ], template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\" />\n\n<ng-content select=\"eui-app-sidebar\" />\n@if (!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) {\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [hasIcons]=\"true\" />\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n}\n\n@if (isViewLoaded) {\n<div class=\"eui-app-main\">\n    <ng-content select=\"eui-app-top-message\"></ng-content>\n\n    <ng-content select=\"eui-app-header\"></ng-content>\n\n    @if (\n        (!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile) || \n        (appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) && (asService.state$ | async).menuLinks.length !== 0\n        ) {\n        <eui-app-toolbar>\n            <eui-toolbar>\n                <eui-toolbar-items>\n                    <eui-toolbar-item>\n                        <ng-content select=\"eui-user-profile\"/>\n                    </eui-toolbar-item>\n                </eui-toolbar-items>                \n            </eui-toolbar>\n        </eui-app-toolbar>\n    } @else {\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    }\n\n    <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n    <div class=\"eui-app-main-content\" role=\"main\">\n        <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n        @if (hasNoPageWrapper) {\n            <router-outlet></router-outlet>\n        }\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n}\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [ariaLive]=\"euiGrowlService.ariaGrowlLive\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (growlClick)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\" />\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\" />\n", styles: [".eui-app{display:flex;overflow:hidden}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-toolbar-mega-menu-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}.eui-app-main{min-height:100vh;background:var(--eui-c-surface-page);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in-out;display:flex;flex-direction:column}eui-app-page-wrapper{display:flex;width:100%}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], appSubTitle: [{
+                type: Input
+            }], themeClass: [{
+                type: Input
+            }], isSidebarOpen: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShrinkHeaderActive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isSidebarHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], appSidebar: [{
+                type: ContentChild,
+                args: [forwardRef(() => EuiAppSidebarComponent)]
+            }], customPageWrapper: [{
+                type: ContentChild,
+                args: [forwardRef(() => EuiAppPageWrapperDirective)]
+            }], appToolbar: [{
+                type: ContentChild,
+                args: [forwardRef(() => EuiAppToolbarComponent)]
+            }] } });
+/* eslint-disable */
+class EuiAppPageWrapperDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppPageWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppPageWrapperDirective, isStandalone: true, selector: "eui-app-page-wrapper", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppPageWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'eui-app-page-wrapper' }]
+        }] });
+
+class EuiAppHeaderComponent {
+    constructor() {
+        this.asService = inject(EuiAppShellService);
+        this.role = 'banner';
+        this._isShrinkHeaderActive = false;
+        this.isHeaderShrinked = false;
+        this.destroy$ = new Subject();
+        this.zone = inject(NgZone);
+        this.viewportRuler = inject(ViewportRuler);
+        this.scrollDispatcher = inject(ScrollDispatcher);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+    }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    get isShrinkHeaderActive() {
+        return this._isShrinkHeaderActive;
+    }
+    set isShrinkHeaderActive(value) {
+        this._isShrinkHeaderActive = coerceBooleanProperty(value);
+    }
+    ngOnInit() {
+        this.asService.activateHeader();
+        // Scrolled is running outside angular zone (for performance reasons - less change detections).
+        // Read more: https://material.angular.io/cdk/scrolling/api#ScrollDispatcher
+        // scrolled uses DEFAULT_SCROLL_TIME which is 20ms
+        this.scrollDispatcher
+            .scrolled()
+            .pipe(filter(() => this.isShrinkHeaderActive), takeUntil(this.destroy$))
+            .subscribe(() => {
+            // read the top scroll position of the viewport
+            const topScrollPos = this.viewportRuler.getViewportScrollPosition().top;
+            CssUtils.setHeaderShrinkCssVar(topScrollPos > 0, this.document, this.platformId);
+            // change the shrinkHeader value only if it's different from the current one
+            if (topScrollPos > 0 !== this.isHeaderShrinked) {
+                // we need to run this inside angular zone to trigger change detection in CSS
+                this.zone.run(() => (this.isHeaderShrinked = topScrollPos > 0));
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+        // cleanup
+        this.asService.setState({
+            ...this.asService.state,
+            hasHeader: false,
+        });
+        this.document.documentElement.style.removeProperty('--eui-app-header-height');
+    }
+    getCssClasses() {
+        return ['eui-app-header', this.isHeaderShrinked ? 'eui-app-header--shrinked' : ''].join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiAppHeaderComponent, isStandalone: true, selector: "eui-app-header", inputs: { isShrinkHeaderActive: "isShrinkHeaderActive" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "@if ((asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar) {\n    <eui-sidebar-toggle class=\"eui-app-header__sidebar-toggle\"/>\n}\n<ng-content select=\"eui-header\"/>\n", styles: [".eui-app-header{align-items:center;display:flex;flex-direction:row;height:var(--eui-app-header-height);position:fixed;right:0;top:var(--eui-app-top-message-height);width:100%;z-index:var(--eui-zi-header);transition:visibility .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{padding-left:var(--eui-s-xs);padding-top:var(--eui-s-m)}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"], dependencies: [{ kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr", "iconSvgFillColor"] }, { 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: EuiAppHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-header', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        EuiSidebarToggleComponent,
+                    ], template: "@if ((asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar) {\n    <eui-sidebar-toggle class=\"eui-app-header__sidebar-toggle\"/>\n}\n<ng-content select=\"eui-header\"/>\n", styles: [".eui-app-header{align-items:center;display:flex;flex-direction:row;height:var(--eui-app-header-height);position:fixed;right:0;top:var(--eui-app-top-message-height);width:100%;z-index:var(--eui-zi-header);transition:visibility .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{padding-left:var(--eui-s-xs);padding-top:var(--eui-s-m)}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isShrinkHeaderActive: [{
+                type: Input
+            }] } });
+
+class EuiAppFooterComponent {
+    constructor() {
+        this.class = 'eui-app-footer';
+        this.role = 'contentinfo';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppFooterComponent, isStandalone: true, selector: "eui-app-footer", host: { properties: { "class": "this.class", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-app-footer{border-top:1px solid var(--eui-c-divider-light);margin-top:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-footer', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styles: [".eui-app-footer{border-top:1px solid var(--eui-c-divider-light);margin-top:auto}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+class EuiAppTopMessageComponent {
+    constructor() {
+        this.role = 'banner';
+        this.isCloseable = false;
+        this.hasCustomContent = false;
+        this.topMessageClose = new EventEmitter();
+        this.asService = inject(EuiAppShellService);
+        this._isVisible = true;
+        this.destroy$ = new Subject();
+        this.elRef = inject(ElementRef);
+        this.cd = inject(ChangeDetectorRef);
+        this.obs = inject(ContentObserver);
+        this.baseStatesDirective = inject(BaseStatesDirective);
+        this.document = inject(DOCUMENT);
+    }
+    get cssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('eui-app-top-message'),
+            !this.isVisible ? 'eui-app-top-message--hidden' : '',
+            this.hasCustomContent ? 'eui-app-top-message--custom' : '',
+        ].join(' ').trim();
+    }
+    set isVisible(value) {
+        this._isVisible = value;
+        this._calculateHeight();
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    ngOnInit() {
+        // Trigger for recalculate when resizing viewport (works perfect)
+        this.asService.breakpoint$.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+            this._calculateHeight();
+        });
+    }
+    ngAfterViewInit() {
+        // TODO: This will not work when there are more than one top-message
+        this.appTopMessageChanges = this.obs
+            .observe(this.appTopMessage.nativeElement)
+            .pipe(startWith(0))
+            .subscribe(() => this._calculateHeight());
+    }
+    ngOnDestroy() {
+        this.asService.setState({
+            ...this.asService.state,
+            hasTopMessage: false,
+        });
+        CssUtils.activateTopMessageCssVars(0, this.document);
+        this.appTopMessageChanges.unsubscribe();
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    onCloseClick() {
+        this.isVisible = false;
+        CssUtils.activateTopMessageCssVars(0, this.document);
+        this.topMessageClose.emit();
+    }
+    _calculateHeight() {
+        // Differ DC from AfterViewInit due to the styles the are not yet applied when retrieving the CSS var value
+        setTimeout(() => {
+            this.cd.detach();
+            const height = this.elRef.nativeElement.offsetHeight;
+            this.asService.activateTopMessage(height);
+            this.cd.reattach();
+            this.cd.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppTopMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiAppTopMessageComponent, isStandalone: true, selector: "eui-app-top-message", inputs: { isCloseable: ["isCloseable", "isCloseable", booleanAttribute], hasCustomContent: ["hasCustomContent", "hasCustomContent", booleanAttribute], isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], hostDirectives: [{ directive: i1$6.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiSuccess", "euiSuccess", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div class=\"eui-app-top-message__wrapper\" #appTopMessage>\n    <div class=\"eui-app-top-message__content\">\n        <ng-content></ng-content>\n    </div>\n    @if (isCloseable) {\n    <eui-icon-button\n        icon=\"eui-close\"\n        (buttonClick)=\"onCloseClick()\"\n        ariaLabel=\"Close top message\"\n        fillColor=\"white\"\n        euiRounded\n        class=\"eui-app-top-message__close\"/>\n    }\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger-surface);color:var(--eui-c-danger-surface-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message__close{margin-left:auto}.eui-app-top-message--primary{background-color:var(--eui-c-primary-surface);color:var(--eui-c-primary-surface-contrast)}.eui-app-top-message--primary .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-primary-surface-hover)!important}.eui-app-top-message--info{background-color:var(--eui-c-info-surface);color:var(--eui-c-info-surface-contrast)}.eui-app-top-message--info .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-info-surface-hover)!important}.eui-app-top-message--success{background-color:var(--eui-c-success-surface);color:var(--eui-c-success-surface-contrast)}.eui-app-top-message--success .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-success-surface-hover)!important}.eui-app-top-message--warning{background-color:var(--eui-c-warning-surface);color:var(--eui-c-warning-surface-contrast)}.eui-app-top-message--warning .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-warning-surface-hover)!important}.eui-app-top-message--danger{background-color:var(--eui-c-danger-surface);color:var(--eui-c-danger-surface-contrast)}.eui-app-top-message--danger .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-danger-surface-hover)!important}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"], dependencies: [{ kind: "component", type: i2.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppTopMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-top-message', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euiPrimary',
+                                'euiInfo',
+                                'euiWarning',
+                                'euiSuccess',
+                                'euiDanger',
+                                'euiVariant',
+                            ],
+                        },
+                    ], imports: [
+                        ...EUI_ICON_BUTTON,
+                    ], template: "<div class=\"eui-app-top-message__wrapper\" #appTopMessage>\n    <div class=\"eui-app-top-message__content\">\n        <ng-content></ng-content>\n    </div>\n    @if (isCloseable) {\n    <eui-icon-button\n        icon=\"eui-close\"\n        (buttonClick)=\"onCloseClick()\"\n        ariaLabel=\"Close top message\"\n        fillColor=\"white\"\n        euiRounded\n        class=\"eui-app-top-message__close\"/>\n    }\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-s-xs) var(--eui-s-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-zi-top-message);background-color:var(--eui-c-danger-surface);color:var(--eui-c-danger-surface-contrast)}.eui-app-top-message__wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.eui-app-top-message__content{display:flex;flex-direction:column;width:100%}.eui-app-top-message__close{margin-left:auto}.eui-app-top-message--primary{background-color:var(--eui-c-primary-surface);color:var(--eui-c-primary-surface-contrast)}.eui-app-top-message--primary .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-primary-surface-hover)!important}.eui-app-top-message--info{background-color:var(--eui-c-info-surface);color:var(--eui-c-info-surface-contrast)}.eui-app-top-message--info .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-info-surface-hover)!important}.eui-app-top-message--success{background-color:var(--eui-c-success-surface);color:var(--eui-c-success-surface-contrast)}.eui-app-top-message--success .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-success-surface-hover)!important}.eui-app-top-message--warning{background-color:var(--eui-c-warning-surface);color:var(--eui-c-warning-surface-contrast)}.eui-app-top-message--warning .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-warning-surface-hover)!important}.eui-app-top-message--danger{background-color:var(--eui-c-danger-surface);color:var(--eui-c-danger-surface-contrast)}.eui-app-top-message--danger .eui-app-top-message__close .eui-icon-button__button:hover{background-color:var(--eui-c-danger-surface-hover)!important}.eui-app-top-message--hidden{display:none}.eui-app-top-message--custom{padding:0}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], appTopMessage: [{
+                type: ViewChild,
+                args: ['appTopMessage']
+            }], isCloseable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasCustomContent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isVisible: [{
+                type: Input
+            }], topMessageClose: [{
+                type: Output
+            }] } });
+
+class EuiAppBreadcrumbComponent {
+    constructor() {
+        this.role = 'nav';
+        this.asService = inject(EuiAppShellService);
+    }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    ngOnInit() {
+        this.asService.activateBreadcrumb();
+    }
+    getCssClasses() {
+        return ['eui-app-breadcrumb'].join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiAppBreadcrumbComponent, isStandalone: true, selector: "eui-app-breadcrumb", host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-app-breadcrumb{align-items:center;display:flex;flex-direction:row;height:var(--eui-app-breadcrumb-height);top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));position:relative;margin:var(--eui-s-m) 0 var(--eui-s-xs) 0;width:100%}@media screen and (max-width: 767px){.eui-app-breadcrumb{visibility:hidden}}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiAppBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-breadcrumb', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styles: [".eui-app-breadcrumb{align-items:center;display:flex;flex-direction:row;height:var(--eui-app-breadcrumb-height);top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));position:relative;margin:var(--eui-s-m) 0 var(--eui-s-xs) 0;width:100%}@media screen and (max-width: 767px){.eui-app-breadcrumb{visibility:hidden}}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+class EuiFooterComponent {
+    constructor() {
+        this.euiPrimary = false;
+    }
+    get cssClasses() {
+        return [
+            'eui-footer',
+            this.euiPrimary ? 'eui-footer--primary' : '',
+        ].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: EuiFooterComponent, isStandalone: true, selector: "eui-footer", inputs: { euiPrimary: ["euiPrimary", "euiPrimary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-footer{background:var(--eui-c-surface-shell);display:flex;padding:1rem;width:100%}.eui-footer--primary{background:var(--eui-c-branding);color:var(--eui-c-white)}.eui-footer--primary a{color:var(--eui-c-white)!important;text-decoration:underline}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-footer', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styles: [".eui-footer{background:var(--eui-c-surface-shell);display:flex;padding:1rem;width:100%}.eui-footer--primary{background:var(--eui-c-branding);color:var(--eui-c-white)}.eui-footer--primary a{color:var(--eui-c-white)!important;text-decoration:underline}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], euiPrimary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class EuiHeaderRightContentComponent {
+    constructor() {
+        this.cssClass = 'eui-header-right-content';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderRightContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiHeaderRightContentComponent, isStandalone: true, selector: "eui-header-right-content", host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderRightContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eui-header-right-content',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuiHeaderComponent {
+    constructor() {
+        this.string = 'eui-header';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiHeaderComponent, isStandalone: true, selector: "eui-header", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "rightContent", first: true, predicate: EuiHeaderRightContentComponent, descendants: true }], ngImport: i0, template: "<div class=\"eui-header-logo-wrapper\">\n    <ng-content select=\"eui-header-logo\"></ng-content>\n    <ng-content select=\"eui-header-environment\"></ng-content>\n</div>\n\n<ng-content select=\"eui-header-app\" />\n\n<div class=\"eui-header-right-content-wrapper\">\n    @if (rightContent) {\n        <ng-content select=\"eui-header-right-content\"></ng-content>\n    } @else {\n        <ng-content select=\"eui-header-user-profile\"></ng-content>\n    }\n</div>\n\n<ng-content select=\"eui-language-selector\" />\n\n<ng-content select=\"eui-header-search\" />\n", styles: [".eui-t-dark .eui-header{background-image:none}.eui-header{align-items:center;background-color:var(--eui-c-surface-container);display:flex;flex-direction:row;height:var(--eui-app-header-height);padding:var(--eui-s-xs) var(--eui-s-m);transition:margin-top .2s ease-in-out;width:100%;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMzQ4LjQgMTM5Ij48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTAgMGgzNDguNHYxMzlIMHoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgc3R5bGU9Im9wYWNpdHk6LjU7Y2xpcC1wYXRoOnVybCgjYikiPjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9Ii0uNTgzIiB4Mj0iMTc3LjU5NyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0tLjYgMTM5LjVzOTkuMy02Mi40IDExNy43LTc0YzE4LjQtMTEuNSAzMi42LTI0LjcgNDIuNi03MC44IDEwLTQ2LjIgMTQuMi02Ni4xIDE0LjItNjYuMWgzLjdTMTcxLjMtNDIgMTYyLjktNC4ycy0xMSA1My0zNS4yIDcwLjNjLTIwIDE0LjItMTA0LjYgNzMuNS0xMDQuNiA3My41SC0uNnoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjYykiLz48bGluZWFyR3JhZGllbnQgaWQ9ImQiIHgxPSIxMTIuOTQ3IiB4Mj0iMjM0Ljg4NyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xMTIuOSAxMzkuNXM1OS40LTU2LjcgNzYuNy03My41YzE4LjQtMTcuMyAyNC43LTM5LjkgMzAuNS03MC44IDUuMy0yOS40IDExLjYtNjYuNiAxMS42LTY2LjZoMy4ycy01LjggMzUuMi0xMSA2Ni42Yy01LjMgMzEtOC40IDUzLTI0LjcgNzAuOC0xNC43IDE1LjctNjguMyA3Mi45LTY4LjMgNzIuOXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjZCkiLz48bGluZWFyR3JhZGllbnQgaWQ9ImUiIHgxPSIxNDAuMjc3IiB4Mj0iMjUwLjEyNyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNDAuMyAxMzkuNXM1MC41LTU0LjEgNjcuMy03My41YzE1LjgtMTcuOCAyMC41LTMyIDI3LjktNzAuOCA2LjgtMzguOCAxMS02Ni42IDExLTY2LjZoMy43cy01LjggMzUuMi0xMSA2Ni42LTYuOCA1Mi0yMi42IDcwLjhjLTE3LjkgMjItNTkuOSA3My41LTU5LjkgNzMuNXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjZSkiLz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIHgxPSIxNjguNjU3IiB4Mj0iMjY0Ljg0NyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNjguNyAxMzkuNXM0OC45LTYxLjkgNTcuOC03My41YzguNC0xMS41IDE4LjQtMjYuOCAyNS4yLTcwLjggNi4zLTQ0LjEgOS41LTY2LjYgOS41LTY2LjZoMy43cy01LjggMzkuOS04LjkgNjYuNmMtMy4yIDI2LjgtNC43IDQ3LjItMjAuNSA3MC44LTE1LjIgMjMuMS01MSA3My41LTUxIDczLjV6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2YpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMTk1Ljk4NyIgeDI9IjI3OS4wMzciIHkxPSItMTQwOS40MTgiIHkyPSItMTQwOS40MTgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAtMTM3NS40MTgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojZTBlNWY1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjVmNWY1Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMTk2IDEzOS41czQxLjUtNjEuOSA0Ny44LTczLjVjNi4zLTExLjUgMTcuMy0yNS43IDIzLjEtNzAuOHM4LjQtNjYuNiA4LjQtNjYuNmgzLjdzLTQuMiAzNy4zLTcuNCA2Ni42LTcuNCA0OS4zLTE5LjQgNzAuOGMtMTIuMSAyMS41LTQyLjEgNzMuNS00Mi4xIDczLjV6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2cpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJoIiB4MT0iMjIzLjg0NyIgeDI9IjI5Mi42OTciIHkxPSItMTQwOS40MTgiIHkyPSItMTQwOS40MTgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAtMTM3NS40MTgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojZTBlNWY1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjVmNWY1Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMjIzLjggMTM5LjVzMzAtNTQuNiAzOC45LTczLjVjMTAuNS0yMC41IDE1LjItMzguMyAxOS41LTcwLjggMy43LTMyIDcuNC02Ni42IDcuNC02Ni42aDMuMnMtMy43IDMyLTYuOCA2Ni42Yy0zLjEgMzQuMS00LjcgNDYuMi0xNS44IDcwLjgtMTAgMjItMzMuNiA3My41LTMzLjYgNzMuNXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjaCkiLz48bGluZWFyR3JhZGllbnQgaWQ9ImkiIHgxPSIyNTEuNzA3IiB4Mj0iMzA2Ljg4NyIgeTE9Ii0xNDA5Ljk0MyIgeTI9Ii0xNDA5Ljk0MyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0yNTEuNyAxMzkuNXMxOC40LTQzIDMwLjUtNzMuNWMxMi4xLTI5LjkgMTMuMS01Mi41IDE0LjctNzAuOCAxLjEtNy45IDYuOC02Ni4xIDYuOC02Ni4xaDMuMnMtMi42IDM0LjYtNS44IDY2LjZjLTIuNiAzMS41LTQuMiA0NS4xLTEyLjYgNzAuOFMyNjMuMyAxNDAgMjYzLjMgMTQweiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6dXJsKCNpKSIvPjxsaW5lYXJHcmFkaWVudCBpZD0iaiIgeDE9IjI4MC4wODciIHgyPSIzMjIuMTM3IiB5MT0iLTE0MDkuNDE4IiB5Mj0iLTE0MDkuNDE4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgLTEzNzUuNDE4KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I2UwZTVmNSIvPjxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I2Y1ZjVmNSIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0iTTI4MC4xIDEzOS41czEzLjctNDMuNiAyMS41LTczLjVjNy45LTI5LjkgMTEtNTcuMiAxMi4xLTcwLjhzNS4zLTY2LjYgNS4zLTY2LjZoMy4ycy0yLjEgMjkuOS00LjcgNjYuNmMtMi4xIDI5LjktNC4yIDUzLjUtOC40IDcwLjgtNC4yIDE5LjQtMTcuMyA3My41LTE3LjMgNzMuNXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjaikiLz48bGluZWFyR3JhZGllbnQgaWQ9ImsiIHgxPSIzMDcuOTQ3IiB4Mj0iMzM2LjMxNyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0zMDcuOSAxMzkuNXM2LjMtMzUuNyAxMi42LTczLjVjNC43LTI4LjMgNy45LTY2LjYgNy45LTcwLjhzNC43LTY2LjYgNC43LTY2LjZoMy4ycy0yLjEgMzkuOS0zLjcgNjYuNkMzMzEgMjMgMzI5LjQgNTAuMyAzMjcuOSA2NmMtMy43IDM1LjItOC40IDczLjUtOC40IDczLjV6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2spIi8+PGxpbmVhckdyYWRpZW50IGlkPSJsIiB4MT0iMzM3LjM3NyIgeDI9IjM0OC40MTciIHkxPSItMTQwOS40MTgiIHkyPSItMTQwOS40MTgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAtMTM3NS40MTgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojZTBlNWY1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjVmNWY1Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMzM3LjQgMTM5LjVzMi4xLTU2LjEgMi42LTczLjVjLjUtMTcuMyA1LjItMTM3LjUgNS4yLTEzNy41aDMuMnYyMTAuOWgtMTF6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2wpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJtIiB4MT0iMjcuNzk3IiB4Mj0iMTkxLjc4NyIgeTE9Ii0xNDA4Ljg5MiIgeTI9Ii0xNDA4Ljg5MiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNzUtNC44Yy0xMSA1MC45LTI5LjQgNjIuNC00MSA3MC44UzI3LjggMTM4LjkgMjcuOCAxMzguOWgyMS42YzMuMS0yLjYgNzUuNy01Ny43IDk1LjctNzMuNSAyMi42LTE3LjMgMjcuOS00NC42IDMzLjEtNzAuOEMxODQtMzEuNiAxOTEuOS03MiAxOTEuOS03MmgtMy4yYy0uMS41LTEwLjYgNTQtMTMuNyA2Ny4yIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI20pIi8+PGxpbmVhckdyYWRpZW50IGlkPSJuIiB4MT0iNTYuNzA3IiB4Mj0iMjA1Ljk3NyIgeTE9Ii0xNDA5LjE1NSIgeTI9Ii0xNDA5LjE1NSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xOTAuMi00LjhjLTguNCA0Mi0yMS42IDU4LjgtMzcuMyA3MC44LTE2LjMgMTIuMS05Ni4yIDcyLjktOTYuMiA3Mi45aDIwYzMuMi0yLjYgNjguOC01OC4yIDg2LjItNzIuOSAyMC0xNy4zIDI1LjItNDEuNSAzMC41LTcwLjggNS4zLTI5LjQgMTIuNi02Ni42IDEyLjYtNjYuNmgtMy4yYzAtLjEtNy45IDQyLjQtMTIuNiA2Ni42IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI24pIi8+PGxpbmVhckdyYWRpZW50IGlkPSJvIiB4MT0iODQuMDM3IiB4Mj0iMjIwLjY4NyIgeTE9Ii0xNDA5LjY3OCIgeTI9Ii0xNDA5LjY3OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0yMDUuNC00LjhDMTk3IDM4LjcgMTkwLjIgNDcuNiAxNjkuNyA2NmMtMTIuNiAxMS41LTgyLjUgNzAuOC04NS43IDczLjVoMTguNHM1OC45LTU1LjEgNzYuNy03Mi45YzIzLjEtMjMuMSAyNC43LTQ1LjEgMjkuNC03MC44czEyLjEtNjYuNiAxMi4xLTY2LjZoLTMuMmMuMS0uNy04LjMgNDguNy0xMiA2NiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6dXJsKCNvKSIvPjwvZz48L3N2Zz4=);background-position:100% 100%;background-repeat:no-repeat;background-size:auto 100%}.eui-header-logo-wrapper{position:relative}.eui-header-right-content-wrapper{align-items:center;display:flex;margin-left:auto}.eui-header-right-content{padding-right:var(--eui-s-m)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-header-logo-wrapper\">\n    <ng-content select=\"eui-header-logo\"></ng-content>\n    <ng-content select=\"eui-header-environment\"></ng-content>\n</div>\n\n<ng-content select=\"eui-header-app\" />\n\n<div class=\"eui-header-right-content-wrapper\">\n    @if (rightContent) {\n        <ng-content select=\"eui-header-right-content\"></ng-content>\n    } @else {\n        <ng-content select=\"eui-header-user-profile\"></ng-content>\n    }\n</div>\n\n<ng-content select=\"eui-language-selector\" />\n\n<ng-content select=\"eui-header-search\" />\n", styles: [".eui-t-dark .eui-header{background-image:none}.eui-header{align-items:center;background-color:var(--eui-c-surface-container);display:flex;flex-direction:row;height:var(--eui-app-header-height);padding:var(--eui-s-xs) var(--eui-s-m);transition:margin-top .2s ease-in-out;width:100%;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2aWV3Qm94PSIwIDAgMzQ4LjQgMTM5Ij48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTAgMGgzNDguNHYxMzlIMHoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgc3R5bGU9Im9wYWNpdHk6LjU7Y2xpcC1wYXRoOnVybCgjYikiPjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9Ii0uNTgzIiB4Mj0iMTc3LjU5NyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0tLjYgMTM5LjVzOTkuMy02Mi40IDExNy43LTc0YzE4LjQtMTEuNSAzMi42LTI0LjcgNDIuNi03MC44IDEwLTQ2LjIgMTQuMi02Ni4xIDE0LjItNjYuMWgzLjdTMTcxLjMtNDIgMTYyLjktNC4ycy0xMSA1My0zNS4yIDcwLjNjLTIwIDE0LjItMTA0LjYgNzMuNS0xMDQuNiA3My41SC0uNnoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjYykiLz48bGluZWFyR3JhZGllbnQgaWQ9ImQiIHgxPSIxMTIuOTQ3IiB4Mj0iMjM0Ljg4NyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xMTIuOSAxMzkuNXM1OS40LTU2LjcgNzYuNy03My41YzE4LjQtMTcuMyAyNC43LTM5LjkgMzAuNS03MC44IDUuMy0yOS40IDExLjYtNjYuNiAxMS42LTY2LjZoMy4ycy01LjggMzUuMi0xMSA2Ni42Yy01LjMgMzEtOC40IDUzLTI0LjcgNzAuOC0xNC43IDE1LjctNjguMyA3Mi45LTY4LjMgNzIuOXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjZCkiLz48bGluZWFyR3JhZGllbnQgaWQ9ImUiIHgxPSIxNDAuMjc3IiB4Mj0iMjUwLjEyNyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNDAuMyAxMzkuNXM1MC41LTU0LjEgNjcuMy03My41YzE1LjgtMTcuOCAyMC41LTMyIDI3LjktNzAuOCA2LjgtMzguOCAxMS02Ni42IDExLTY2LjZoMy43cy01LjggMzUuMi0xMSA2Ni42LTYuOCA1Mi0yMi42IDcwLjhjLTE3LjkgMjItNTkuOSA3My41LTU5LjkgNzMuNXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjZSkiLz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIHgxPSIxNjguNjU3IiB4Mj0iMjY0Ljg0NyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNjguNyAxMzkuNXM0OC45LTYxLjkgNTcuOC03My41YzguNC0xMS41IDE4LjQtMjYuOCAyNS4yLTcwLjggNi4zLTQ0LjEgOS41LTY2LjYgOS41LTY2LjZoMy43cy01LjggMzkuOS04LjkgNjYuNmMtMy4yIDI2LjgtNC43IDQ3LjItMjAuNSA3MC44LTE1LjIgMjMuMS01MSA3My41LTUxIDczLjV6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2YpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMTk1Ljk4NyIgeDI9IjI3OS4wMzciIHkxPSItMTQwOS40MTgiIHkyPSItMTQwOS40MTgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAtMTM3NS40MTgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojZTBlNWY1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjVmNWY1Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMTk2IDEzOS41czQxLjUtNjEuOSA0Ny44LTczLjVjNi4zLTExLjUgMTcuMy0yNS43IDIzLjEtNzAuOHM4LjQtNjYuNiA4LjQtNjYuNmgzLjdzLTQuMiAzNy4zLTcuNCA2Ni42LTcuNCA0OS4zLTE5LjQgNzAuOGMtMTIuMSAyMS41LTQyLjEgNzMuNS00Mi4xIDczLjV6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2cpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJoIiB4MT0iMjIzLjg0NyIgeDI9IjI5Mi42OTciIHkxPSItMTQwOS40MTgiIHkyPSItMTQwOS40MTgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAtMTM3NS40MTgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojZTBlNWY1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjVmNWY1Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMjIzLjggMTM5LjVzMzAtNTQuNiAzOC45LTczLjVjMTAuNS0yMC41IDE1LjItMzguMyAxOS41LTcwLjggMy43LTMyIDcuNC02Ni42IDcuNC02Ni42aDMuMnMtMy43IDMyLTYuOCA2Ni42Yy0zLjEgMzQuMS00LjcgNDYuMi0xNS44IDcwLjgtMTAgMjItMzMuNiA3My41LTMzLjYgNzMuNXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjaCkiLz48bGluZWFyR3JhZGllbnQgaWQ9ImkiIHgxPSIyNTEuNzA3IiB4Mj0iMzA2Ljg4NyIgeTE9Ii0xNDA5Ljk0MyIgeTI9Ii0xNDA5Ljk0MyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0yNTEuNyAxMzkuNXMxOC40LTQzIDMwLjUtNzMuNWMxMi4xLTI5LjkgMTMuMS01Mi41IDE0LjctNzAuOCAxLjEtNy45IDYuOC02Ni4xIDYuOC02Ni4xaDMuMnMtMi42IDM0LjYtNS44IDY2LjZjLTIuNiAzMS41LTQuMiA0NS4xLTEyLjYgNzAuOFMyNjMuMyAxNDAgMjYzLjMgMTQweiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6dXJsKCNpKSIvPjxsaW5lYXJHcmFkaWVudCBpZD0iaiIgeDE9IjI4MC4wODciIHgyPSIzMjIuMTM3IiB5MT0iLTE0MDkuNDE4IiB5Mj0iLTE0MDkuNDE4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgLTEzNzUuNDE4KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I2UwZTVmNSIvPjxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I2Y1ZjVmNSIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0iTTI4MC4xIDEzOS41czEzLjctNDMuNiAyMS41LTczLjVjNy45LTI5LjkgMTEtNTcuMiAxMi4xLTcwLjhzNS4zLTY2LjYgNS4zLTY2LjZoMy4ycy0yLjEgMjkuOS00LjcgNjYuNmMtMi4xIDI5LjktNC4yIDUzLjUtOC40IDcwLjgtNC4yIDE5LjQtMTcuMyA3My41LTE3LjMgNzMuNXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjaikiLz48bGluZWFyR3JhZGllbnQgaWQ9ImsiIHgxPSIzMDcuOTQ3IiB4Mj0iMzM2LjMxNyIgeTE9Ii0xNDA5LjQxOCIgeTI9Ii0xNDA5LjQxOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0zMDcuOSAxMzkuNXM2LjMtMzUuNyAxMi42LTczLjVjNC43LTI4LjMgNy45LTY2LjYgNy45LTcwLjhzNC43LTY2LjYgNC43LTY2LjZoMy4ycy0yLjEgMzkuOS0zLjcgNjYuNkMzMzEgMjMgMzI5LjQgNTAuMyAzMjcuOSA2NmMtMy43IDM1LjItOC40IDczLjUtOC40IDczLjV6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2spIi8+PGxpbmVhckdyYWRpZW50IGlkPSJsIiB4MT0iMzM3LjM3NyIgeDI9IjM0OC40MTciIHkxPSItMTQwOS40MTgiIHkyPSItMTQwOS40MTgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAtMTM3NS40MTgpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojZTBlNWY1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjVmNWY1Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMzM3LjQgMTM5LjVzMi4xLTU2LjEgMi42LTczLjVjLjUtMTcuMyA1LjItMTM3LjUgNS4yLTEzNy41aDMuMnYyMTAuOWgtMTF6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2wpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJtIiB4MT0iMjcuNzk3IiB4Mj0iMTkxLjc4NyIgeTE9Ii0xNDA4Ljg5MiIgeTI9Ii0xNDA4Ljg5MiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNzUtNC44Yy0xMSA1MC45LTI5LjQgNjIuNC00MSA3MC44UzI3LjggMTM4LjkgMjcuOCAxMzguOWgyMS42YzMuMS0yLjYgNzUuNy01Ny43IDk1LjctNzMuNSAyMi42LTE3LjMgMjcuOS00NC42IDMzLjEtNzAuOEMxODQtMzEuNiAxOTEuOS03MiAxOTEuOS03MmgtMy4yYy0uMS41LTEwLjYgNTQtMTMuNyA2Ny4yIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI20pIi8+PGxpbmVhckdyYWRpZW50IGlkPSJuIiB4MT0iNTYuNzA3IiB4Mj0iMjA1Ljk3NyIgeTE9Ii0xNDA5LjE1NSIgeTI9Ii0xNDA5LjE1NSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xOTAuMi00LjhjLTguNCA0Mi0yMS42IDU4LjgtMzcuMyA3MC44LTE2LjMgMTIuMS05Ni4yIDcyLjktOTYuMiA3Mi45aDIwYzMuMi0yLjYgNjguOC01OC4yIDg2LjItNzIuOSAyMC0xNy4zIDI1LjItNDEuNSAzMC41LTcwLjggNS4zLTI5LjQgMTIuNi02Ni42IDEyLjYtNjYuNmgtMy4yYzAtLjEtNy45IDQyLjQtMTIuNiA2Ni42IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI24pIi8+PGxpbmVhckdyYWRpZW50IGlkPSJvIiB4MT0iODQuMDM3IiB4Mj0iMjIwLjY4NyIgeTE9Ii0xNDA5LjY3OCIgeTI9Ii0xNDA5LjY3OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIC0xMzc1LjQxOCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNlMGU1ZjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNmNWY1ZjUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0yMDUuNC00LjhDMTk3IDM4LjcgMTkwLjIgNDcuNiAxNjkuNyA2NmMtMTIuNiAxMS41LTgyLjUgNzAuOC04NS43IDczLjVoMTguNHM1OC45LTU1LjEgNzYuNy03Mi45YzIzLjEtMjMuMSAyNC43LTQ1LjEgMjkuNC03MC44czEyLjEtNjYuNiAxMi4xLTY2LjZoLTMuMmMuMS0uNy04LjMgNDguNy0xMiA2NiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6dXJsKCNvKSIvPjwvZz48L3N2Zz4=);background-position:100% 100%;background-repeat:no-repeat;background-size:auto 100%}.eui-header-logo-wrapper{position:relative}.eui-header-right-content-wrapper{align-items:center;display:flex;margin-left:auto}.eui-header-right-content{padding-right:var(--eui-s-m)}\n"] }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], rightContent: [{
+                type: ContentChild,
+                args: [EuiHeaderRightContentComponent]
+            }] } });
+
+class EuiHeaderAppNameComponent {
+    constructor() {
+        this.string = 'eui-header-app-name';
+        this.asService = inject(EuiAppShellService);
+        this.elRef = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.asService?.setState({
+            ...this.asService.state,
+            appName: this.elRef.nativeElement.textContent,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiHeaderAppNameComponent, isStandalone: true, selector: "eui-header-app-name", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppNameComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eui-header-app-name',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuiHeaderAppSubtitleComponent {
+    constructor() {
+        this.string = 'eui-header-app-subtitle';
+        this.asService = inject(EuiAppShellService);
+        this.elRef = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.asService?.setState({
+            ...this.asService.state,
+            appSubTitle: this.elRef.nativeElement.innerHTML,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiHeaderAppSubtitleComponent, isStandalone: true, selector: "eui-header-app-subtitle", host: { properties: { "class": "this.string" } }, 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: EuiHeaderAppSubtitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eui-header-app-subtitle',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuiHeaderAppNameLogoComponent {
+    constructor() {
+        this.cssClass = 'eui-header-app-name-logo';
+        this.homeUrl = '..';
+        this.config = inject(EUI_CONFIG_TOKEN, { optional: true });
+    }
+    ngOnInit() {
+        this.assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets';
+    }
+    get svgUrl() {
+        return `${this.assetsBaseUrl}/${this.logoFilename}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppNameLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiHeaderAppNameLogoComponent, isStandalone: true, selector: "eui-header-app-name-logo", inputs: { homeUrl: "homeUrl", logoFilename: "logoFilename" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<img class="title-logo-svg" [src]="svgUrl" alt="Application title logo" />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppNameLogoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eui-header-app-name-logo',
+                    template: '<img class="title-logo-svg" [src]="svgUrl" alt="Application title logo" />',
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], homeUrl: [{
+                type: Input
+            }], logoFilename: [{
+                type: Input
+            }] } });
+
+class EuiHeaderAppComponent {
+    constructor() {
+        this.cssClass = 'eui-header-app';
+        this.appName = '';
+        this.appShortName = '';
+        this.appSubTitle = '';
+        this.asService = inject(EuiAppShellService);
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        if (this.asService) {
+            this.subscriptions.push(this.asService.getState('appName').subscribe((s) => (this.appName = s)));
+            this.subscriptions.push(this.asService.getState('appShortName').subscribe((s) => (this.appShortName = s)));
+            this.subscriptions.push(this.asService.getState('appSubTitle').subscribe((s) => (this.appSubTitle = s)));
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    ngOnChanges(changes) {
+        if (changes.appName) {
+            this.asService?.setState({
+                ...this.asService.state,
+                appName: changes.appName.currentValue,
+            });
+        }
+        if (changes.appShortName) {
+            let shortName = changes.appShortName.currentValue;
+            shortName = shortName === '' ? this.appName : shortName;
+            this.asService?.setState({
+                ...this.asService.state,
+                appShortName: shortName,
+            });
+        }
+        if (changes.appSubTitle) {
+            this.asService?.setState({
+                ...this.asService.state,
+                appSubTitle: changes.appSubTitle.currentValue,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiHeaderAppComponent, isStandalone: true, selector: "eui-header-app", inputs: { appName: "appName", appShortName: "appShortName", appSubTitle: "appSubTitle" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "customAppName", first: true, predicate: i0.forwardRef(() => EuiHeaderAppNameComponent), descendants: true }, { propertyName: "customAppSubtitle", first: true, predicate: i0.forwardRef(() => EuiHeaderAppSubtitleComponent), descendants: true }, { propertyName: "customAppNameLogo", first: true, predicate: i0.forwardRef(() => EuiHeaderAppNameLogoComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (customAppName) {\n    <div class=\"eui-header-app__title full\">\n        <ng-content select=\"eui-header-app-name\"></ng-content>\n    </div>\n} @else {\n    @if (appName) {\n        <div class=\"eui-header-app__title full\">\n            {{ appName }}\n        </div>\n    }\n}\n\n@if (customAppSubtitle) {\n    <div class=\"eui-header-app__sub-title\">\n        <ng-content select=\"eui-header-app-subtitle\"></ng-content>\n    </div>\n} @else {\n    @if (appSubTitle) {\n        <div class=\"eui-header-app__sub-title\">{{ appSubTitle }}</div>\n    }\n}\n\n<div class=\"eui-header-app__title short\">\n    {{ appShortName }}\n</div>\n\n@if (customAppNameLogo) {\n    <div class=\"eui-header-app-__title-logo\">\n        <ng-content select=\"eui-header-app-name-logo\"></ng-content>\n    </div>\n}\n", styles: [".eui-header-app{align-self:flex-end;display:flex;flex-direction:column;height:var(--eui-s-6xl);justify-content:flex-end;min-height:var(--eui-s-6xl);margin-left:calc(-1 * var(--eui-s-m))}.eui-header-app__title{align-items:center;color:var(--eui-c-text);display:flex;font-size:var(--eui-f-size-2xl)}.eui-header-app__title.short{display:none}.eui-header-app__sub-title{align-items:center;color:var(--eui-c-text-light);display:flex;font:var(--eui-f-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-header-app', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "@if (customAppName) {\n    <div class=\"eui-header-app__title full\">\n        <ng-content select=\"eui-header-app-name\"></ng-content>\n    </div>\n} @else {\n    @if (appName) {\n        <div class=\"eui-header-app__title full\">\n            {{ appName }}\n        </div>\n    }\n}\n\n@if (customAppSubtitle) {\n    <div class=\"eui-header-app__sub-title\">\n        <ng-content select=\"eui-header-app-subtitle\"></ng-content>\n    </div>\n} @else {\n    @if (appSubTitle) {\n        <div class=\"eui-header-app__sub-title\">{{ appSubTitle }}</div>\n    }\n}\n\n<div class=\"eui-header-app__title short\">\n    {{ appShortName }}\n</div>\n\n@if (customAppNameLogo) {\n    <div class=\"eui-header-app-__title-logo\">\n        <ng-content select=\"eui-header-app-name-logo\"></ng-content>\n    </div>\n}\n", styles: [".eui-header-app{align-self:flex-end;display:flex;flex-direction:column;height:var(--eui-s-6xl);justify-content:flex-end;min-height:var(--eui-s-6xl);margin-left:calc(-1 * var(--eui-s-m))}.eui-header-app__title{align-items:center;color:var(--eui-c-text);display:flex;font-size:var(--eui-f-size-2xl)}.eui-header-app__title.short{display:none}.eui-header-app__sub-title{align-items:center;color:var(--eui-c-text-light);display:flex;font:var(--eui-f-l)}\n"] }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], appName: [{
+                type: Input
+            }], appShortName: [{
+                type: Input
+            }], appSubTitle: [{
+                type: Input
+            }], customAppName: [{
+                type: ContentChild,
+                args: [forwardRef(() => EuiHeaderAppNameComponent)]
+            }], customAppSubtitle: [{
+                type: ContentChild,
+                args: [forwardRef(() => EuiHeaderAppSubtitleComponent)]
+            }], customAppNameLogo: [{
+                type: ContentChild,
+                args: [forwardRef(() => EuiHeaderAppNameLogoComponent)]
+            }] } });
+
+class EuiHeaderEnvironmentComponent {
+    constructor() {
+        this.cssClass = 'eui-header-environment';
+        this.asService = inject(EuiAppShellService);
+        this.elRef = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.asService?.setState({
+            ...this.asService.state,
+            hasHeaderEnvironment: true,
+            environmentValue: this.elRef.nativeElement.innerHTML,
+        });
+    }
+    ngOnDestroy() {
+        this.asService?.setState({
+            ...this.asService.state,
+            hasHeaderEnvironment: false,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderEnvironmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiHeaderEnvironmentComponent, isStandalone: true, selector: "eui-header-environment", host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-header-environment{background-color:var(--eui-c-danger);color:var(--eui-c-white);font:var(--eui-f-xl);opacity:var(--eui-o-50);position:absolute;text-align:center;top:var(--eui-s-l);transform:rotate(-10deg);width:90%}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderEnvironmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-header-environment', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styles: [".eui-header-environment{background-color:var(--eui-c-danger);color:var(--eui-c-white);font:var(--eui-f-xl);opacity:var(--eui-o-50);position:absolute;text-align:center;top:var(--eui-s-l);transform:rotate(-10deg);width:90%}\n"] }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuiHeaderLogoComponent {
+    constructor() {
+        this.cssClass = 'eui-header-logo';
+        this.homeUrl = '..';
+        this.asService = inject(EuiAppShellService);
+        this.euiThemeService = inject(EuiThemeService);
+        this.config = inject(EUI_CONFIG_TOKEN, { optional: true });
+    }
+    ngOnInit() {
+        this.asService?.setState({
+            ...this.asService.state,
+            hasHeaderLogo: true,
+        });
+        this.asService?.getState('activeLanguage').subscribe((activeLanguage) => {
+            this.logo = 'logo-ec--' + activeLanguage;
+        });
+        this.assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets';
+    }
+    get svgUrl() {
+        return `${this.assetsBaseUrl}/ecl/ec/logo/positive/${this.logo}.svg`;
+    }
+    get svgUrlDark() {
+        return `${this.assetsBaseUrl}/ecl/ec/logo/negative/${this.logo}.svg`;
+    }
+    ngOnDestroy() {
+        this.asService?.setState({
+            ...this.asService.state,
+            hasHeaderLogo: false,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiHeaderLogoComponent, isStandalone: true, selector: "eui-header-logo", inputs: { homeUrl: "homeUrl" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "@if ((euiThemeService.state$ | async).theme.isDark) {\n    <img class=\"eui-header-logo__image\" [src]=\"svgUrlDark\" [routerLink]=\"homeUrl\" alt=\"{{ 'eui.header.LOGO' | translate }}\" />\n\n} @else {\n    <img class=\"eui-header-logo__image\" [src]=\"svgUrl\" [routerLink]=\"homeUrl\" alt=\"{{ 'eui.header.LOGO' | translate }}\" />\n}\n", styles: [".eui-header-logo{display:flex}.eui-header-logo__image{background-size:cover;cursor:pointer;height:64px;width:260px}@media screen and (max-width: 767px){.eui-header-logo .logo{display:none}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-header-logo', encapsulation: ViewEncapsulation.None, imports: [
+                        RouterLink,
+                        AsyncPipe,
+                        TranslateModule,
+                    ], template: "@if ((euiThemeService.state$ | async).theme.isDark) {\n    <img class=\"eui-header-logo__image\" [src]=\"svgUrlDark\" [routerLink]=\"homeUrl\" alt=\"{{ 'eui.header.LOGO' | translate }}\" />\n\n} @else {\n    <img class=\"eui-header-logo__image\" [src]=\"svgUrl\" [routerLink]=\"homeUrl\" alt=\"{{ 'eui.header.LOGO' | translate }}\" />\n}\n", styles: [".eui-header-logo{display:flex}.eui-header-logo__image{background-size:cover;cursor:pointer;height:64px;width:260px}@media screen and (max-width: 767px){.eui-header-logo .logo{display:none}}\n"] }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], homeUrl: [{
+                type: Input
+            }] } });
+
+class EuiHeaderUserProfileComponent {
+    constructor() {
+        this.cssClass = 'eui-header-user-profile';
+        this.isShowUserInfos = true;
+        this.hasWelcomeLabel = true;
+        this.isShowAvatarInitials = false;
+        this.hasTabNavigation = false;
+        this.welcomeLabel = 'Welcome';
+        this.impersonateLabel = 'acting as';
+        this.hasMenu = false;
+    }
+    /**
+     * @description
+     * Closes the user profile dropdown menu if it is open.
+     *
+     * Ensure calling this after the ngAfterViewInit lifecycle hook to ensure the userProfile component is initialized.
+     */
+    closeUserProfileDropdown() {
+        this.userProfile.closeDropdown();
+    }
+    ngAfterContentInit() {
+        this.hasMenu = this.hasMenuContent.length !== 0;
+    }
+    ngAfterViewInit() {
+        // Pass the reference to the userProfile component to each menu component
+        if (this.userProfile && this.hasMenuContent) {
+            this.hasMenuContent.forEach(menu => {
+                // Ensure the menu has a reference to the userProfile component
+                menu.parent = this.userProfile;
+                /**
+                 * Subscribe to the parent component to handle any necessary logic While the ngAfterViewInit of
+                 * EuiUserProfileComponent has been called before the parent injection did not exist.
+                 *
+                 * Thus, we need to manually subscribe to the parent component after the view has been initialized,
+                 * and we manually set the parent property before subscribing.
+                 */
+                menu.subscribeToParent();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: EuiHeaderUserProfileComponent, isStandalone: true, selector: "eui-header-user-profile", inputs: { isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "userProfile", first: true, predicate: ["userProfile"], descendants: true }], ngImport: i0, template: "<eui-user-profile\n    [hasWelcomeLabel]=\"hasWelcomeLabel\"\n    [welcomeLabel]=\"welcomeLabel\"\n    [impersonateLabel]=\"impersonateLabel\"\n    [avatarUrl]=\"avatarUrl\"\n    [isShowUserInfos]=\"isShowUserInfos\"\n    [isShowAvatarInitials]=\"isShowAvatarInitials\"\n    [hasTabNavigation]=\"hasTabNavigation\"\n    [subInfos]=\"subInfos\"\n    [hasMenu]=\"hasMenu\"\n    isHeaderUserProfile\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n", styles: [".eui-header-user-profile{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "component", type: i1$3.EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "statusVariant", "hasMenu", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle", "isHeaderUserProfile", "isToolbarUserProfile", "isShowUserInfos", "isMobileOnly", "euiStatusSecondary", "euiStatusSuccess", "euiStatusDanger", "reverseNameOrder"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderUserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-header-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        ...EUI_USER_PROFILE,
+                    ], template: "<eui-user-profile\n    [hasWelcomeLabel]=\"hasWelcomeLabel\"\n    [welcomeLabel]=\"welcomeLabel\"\n    [impersonateLabel]=\"impersonateLabel\"\n    [avatarUrl]=\"avatarUrl\"\n    [isShowUserInfos]=\"isShowUserInfos\"\n    [isShowAvatarInitials]=\"isShowAvatarInitials\"\n    [hasTabNavigation]=\"hasTabNavigation\"\n    [subInfos]=\"subInfos\"\n    [hasMenu]=\"hasMenu\"\n    isHeaderUserProfile\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n", styles: [".eui-header-user-profile{display:flex;margin-left:auto}\n"] }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hasMenuContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EuiUserProfileMenuComponent), { descendants: true }]
+            }], userProfile: [{
+                type: ViewChild,
+                args: ['userProfile']
+            }], isShowUserInfos: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasWelcomeLabel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowAvatarInitials: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasTabNavigation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], welcomeLabel: [{
+                type: Input
+            }], impersonateLabel: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], subInfos: [{
+                type: Input
+            }] } });
+
+class EuiHeaderSearchComponent {
+    constructor() {
+        this.cssClass = 'eui-header-search';
+        this.placeholder = 'Welcome';
+        this.searchLabel = 'acting as';
+        this.searchClick = new EventEmitter();
+    }
+    onSearch() {
+        this.searchClick.emit(this.inputValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiHeaderSearchComponent, isStandalone: true, selector: "eui-header-search", inputs: { placeholder: "placeholder", searchLabel: "searchLabel" }, outputs: { searchClick: "searchClick" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<div euiInputGroup>\n    <div euiInputGroupAddOn>\n        <input euiInputText [(ngModel)]=\"inputValue\" type=\"search\" placeholder=\"Search\" aria-label=\"Search website\"/>\n\n        <button euiButton euiSecondary (click)=\"onSearch()\">\n            <eui-icon-svg icon=\"eui-search\" size=\"s\"></eui-icon-svg>\n            <span euiLabel>Search</span>\n        </button>\n    </div>\n</div>\n", styles: [".eui-header-search{display:flex}.eui-header-search .eui-input-group{margin-bottom:0!important}\n"], dependencies: [{ 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: "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: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i5$1.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr"] }, { kind: "component", type: i5$1.EuiInputGroupAddOnComponent, selector: "div[euiInputGroupAddOn], eui-input-group-addon", inputs: ["e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiHeaderSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-header-search', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        FormsModule,
+                        ...EUI_ICON,
+                        ...EUI_BUTTON,
+                        ...EUI_INPUT_TEXT,
+                        ...EUI_INPUT_GROUP,
+                    ], template: "<div euiInputGroup>\n    <div euiInputGroupAddOn>\n        <input euiInputText [(ngModel)]=\"inputValue\" type=\"search\" placeholder=\"Search\" aria-label=\"Search website\"/>\n\n        <button euiButton euiSecondary (click)=\"onSearch()\">\n            <eui-icon-svg icon=\"eui-search\" size=\"s\"></eui-icon-svg>\n            <span euiLabel>Search</span>\n        </button>\n    </div>\n</div>\n", styles: [".eui-header-search{display:flex}.eui-header-search .eui-input-group{margin-bottom:0!important}\n"] }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], placeholder: [{
+                type: Input
+            }], searchLabel: [{
+                type: Input
+            }], searchClick: [{
+                type: Output
+            }] } });
+
+class EuiNotificationItemComponent {
+    constructor() {
+        this.string = 'eui-notification-item';
+        this.itemClick = new EventEmitter();
+        this.itemMarkAsRead = new EventEmitter();
+        this.markAsReadLabel = null;
+        this.dateFormat = 'dd/MM/YYYY';
+        this.tooltipSize = 'auto';
+        this.isShowMarkAsRead = true;
+    }
+    onItemClick() {
+        this.itemClick.emit(this.item);
+    }
+    onItemMarkAsRead(event) {
+        if (this.item.metadata) {
+            this.item.metadata.read = true;
+        }
+        this.itemMarkAsRead.emit(this.item);
+        consumeEvent(event);
+    }
+    get iconColor() {
+        return this.item.metadata?.read ? 'secondary-light' : 'secondary';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiNotificationItemComponent, isStandalone: true, selector: "eui-notification-item", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute] }, outputs: { itemClick: "itemClick", itemMarkAsRead: "itemMarkAsRead" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div\n    class=\"eui-notification-item-content\"\n    (click)=\"onItemClick()\"\n    [ngClass]=\"{ 'eui-u-c-bg-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-f-s\">\n        @if (item.metadata?.date) {\n            <div class=\"eui-notification-item-content-top__date\">\n                <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                    <eui-icon-svg icon=\"notifications:sharp\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n                    @if (item.metadata?.new) {\n                    <span class=\"eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle\"></span>\n                    }\n                </span>\n                <span>{{ item.metadata?.date | date: dateFormat }}</span>\n            </div>\n        }\n        @if (item.metadata?.important) {\n            <div class=\"eui-u-f-m-bold\">\n                <eui-icon-svg icon=\"alert:sharp\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n            </div>\n        }\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        @if (item.metadata?.url) {\n            <a class=\"eui-u-text-link\" href=\"{{ item.metadata.url }}\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                    <div\n                        class=\"eui-notification-item-content-middle__sub-label\"\n                        [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\">\n                    </div>\n                }\n            </a>\n        }\n\n        @if (item.metadata?.urlExternal) {\n            <a class=\"eui-u-text-link-external\"\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_blank' : item.metadata.urlExternalTarget\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                    <div\n                        class=\"eui-notification-item-content-middle__sub-label\"\n                        [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\">\n                    </div>\n                }\n            </a>\n        }\n\n        @if (!item.metadata?.url && !item.metadata?.urlExternal) {\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-f-m-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            @if (item.subLabel) {\n                <div\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\">\n                </div>\n            }\n        }\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        @if (isShowMarkAsRead && item.metadata && !item.metadata.read) {\n            <a\n                href=\"javascript:void(0)\"\n                class=\"eui-u-text-link\"\n                (click)=\"onItemMarkAsRead($event)\">\n                {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n            </a>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: EuiTruncatePipe, name: "euiTruncate" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-notification-item', imports: [
+                        NgClass,
+                        DatePipe,
+                        EuiTruncatePipe,
+                        TranslateModule,
+                        ...EUI_ICON,
+                    ], template: "<div\n    class=\"eui-notification-item-content\"\n    (click)=\"onItemClick()\"\n    [ngClass]=\"{ 'eui-u-c-bg-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-f-s\">\n        @if (item.metadata?.date) {\n            <div class=\"eui-notification-item-content-top__date\">\n                <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                    <eui-icon-svg icon=\"notifications:sharp\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n                    @if (item.metadata?.new) {\n                    <span class=\"eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle\"></span>\n                    }\n                </span>\n                <span>{{ item.metadata?.date | date: dateFormat }}</span>\n            </div>\n        }\n        @if (item.metadata?.important) {\n            <div class=\"eui-u-f-m-bold\">\n                <eui-icon-svg icon=\"alert:sharp\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n            </div>\n        }\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        @if (item.metadata?.url) {\n            <a class=\"eui-u-text-link\" href=\"{{ item.metadata.url }}\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                    <div\n                        class=\"eui-notification-item-content-middle__sub-label\"\n                        [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\">\n                    </div>\n                }\n            </a>\n        }\n\n        @if (item.metadata?.urlExternal) {\n            <a class=\"eui-u-text-link-external\"\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_blank' : item.metadata.urlExternalTarget\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                    <div\n                        class=\"eui-notification-item-content-middle__sub-label\"\n                        [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\">\n                    </div>\n                }\n            </a>\n        }\n\n        @if (!item.metadata?.url && !item.metadata?.urlExternal) {\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-f-m-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            @if (item.subLabel) {\n                <div\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\">\n                </div>\n            }\n        }\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        @if (isShowMarkAsRead && item.metadata && !item.metadata.read) {\n            <a\n                href=\"javascript:void(0)\"\n                class=\"eui-u-text-link\"\n                (click)=\"onItemMarkAsRead($event)\">\n                {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n            </a>\n        }\n    </div>\n</div>\n" }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], itemClick: [{
+                type: Output
+            }], itemMarkAsRead: [{
+                type: Output
+            }], markAsReadLabel: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], isShowMarkAsRead: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class EuiNotificationsComponent {
+    constructor() {
+        this.refreshClick = new EventEmitter();
+        this.notificationsClick = new EventEmitter();
+        this.viewAllClick = new EventEmitter();
+        this.settingsClick = new EventEmitter();
+        this.markAllAsReadClick = new EventEmitter();
+        this.noNotificationFoundClick = new EventEmitter();
+        this.itemClick = new EventEmitter();
+        this.itemMarkAsReadClick = new EventEmitter();
+        this.isOverlayActive = false;
+        this.currentDayNotifications = [];
+        this.oldestNotifications = [];
+        this.unreadNotifications = [];
+        this.today = new Date();
+        this.string = 'eui-notifications';
+        this.count = null;
+        this.items = [];
+        this.unreadLabel = null;
+        this.totalLabel = null;
+        this.markAsReadLabel = null;
+        this.markAsUnReadLabel = null;
+        this.markAllAsReadLabel = null;
+        this.settingsLabel = null;
+        this.refreshLabel = null;
+        this.viewAllNotificationsLabel = null;
+        this.headerTitleLabel = null;
+        this.noNotificationFoundLabel = null;
+        this.nbUnreadCount = null;
+        this.dateFormat = 'dd/MM/YYYY';
+        this.noNotificationFoundLink = false;
+        this.isShowMarkAsRead = true;
+        this.isShowViewAllAction = true;
+        this.isHidePanelOnViewAllAction = true;
+        this.customUnreadCount = false;
+        this.isShowMarkAllAsReadButton = true;
+        this.isShowSettingsButton = true;
+        this.isShowRefreshButton = true;
+    }
+    onClicked(event) {
+        this.notificationsClick.emit();
+        consumeEvent(event);
+        this.isOverlayActive = !this.isOverlayActive;
+    }
+    ngOnChanges(changes) {
+        if (changes.customUnreadCount) {
+            const customUnreadCount = changes.customUnreadCount.currentValue;
+            if (!customUnreadCount) {
+                this.nbUnreadCount = this._getUnreadCount();
+            }
+        }
+    }
+    ngOnInit() {
+        if (!this.customUnreadCount) {
+            this.nbUnreadCount = this._getUnreadCount();
+        }
+    }
+    onRefresh(event) {
+        this.refreshClick.emit();
+        consumeEvent(event);
+    }
+    onItemClick(link) {
+        this.itemClick.emit(link);
+        consumeEvent(event);
+    }
+    onViewAllClick(event) {
+        this.viewAllClick.emit();
+        if (!this.isHidePanelOnViewAllAction) {
+            consumeEvent(event);
+        }
+    }
+    onNoNotificationFoundClick() {
+        this.noNotificationFoundClick.emit();
+    }
+    onItemMarkAsRead(link) {
+        this.itemMarkAsReadClick.emit(link);
+    }
+    onMarkAllAsRead(e) {
+        this.markAllAsReadClick.emit(e);
+        consumeEvent(e);
+    }
+    onSettings(e) {
+        this.settingsClick.emit(e);
+        consumeEvent(e);
+    }
+    trackByFn(index, item) {
+        return item.id;
+    }
+    updateActiveState(isActive) {
+        this.isOverlayActive = isActive;
+    }
+    getAriaLabel() {
+        if (this.count) {
+            return this.count > 1
+                ? ` You have ${this.count} notifications`
+                : `You have ${this.count} notification`;
+        }
+        return 'Open notifications panel';
+    }
+    _getUnreadCount() {
+        const unreadNotifications = this.items.filter((link) => {
+            if (link.metadata) {
+                return link.metadata.read === false;
+            }
+            return false;
+        });
+        return unreadNotifications.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiNotificationsComponent, isStandalone: true, selector: "eui-notifications", inputs: { count: "count", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], customUnreadCount: ["customUnreadCount", "customUnreadCount", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-button\n    class=\"eui-notifications__trigger\"\n    icon=\"eui-notifications-o\"\n    (click)=\"onClicked($event)\"\n    [ariaLabel]=\"getAriaLabel()\">\n    @if (count) {\n        <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n    }\n</eui-icon-button>\n\n@if (isOverlayActive) {\n    <eui-overlay hasClosedOnClickOutside isActive class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\n        <eui-overlay-header>\n            <div class=\"eui-notifications__header-title\">\n                <div class=\"eui-notifications__header-title-label\">\n                    {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n                    @if (items) {\n                        <span\n                            class=\"eui-u-cursor-help eui-u-ml-s\"\n                            attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n                            title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n                        </span>\n                    }\n                    <eui-badge>{{ items.length }}</eui-badge>\n                </div>\n            </div>\n    \n            @if (items) {\n                <div class=\"eui-notifications__header-actions\">\n                    @if (isShowMarkAllAsReadButton) {\n                        <button\n                            euiButton\n                            euiPrimary\n                            euiRounded\n                            euiIconButton\n                            euiBasicButton\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n                            title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n                            (click)=\"onMarkAllAsRead($event)\">\n                            <eui-icon-svg icon=\"eui-checkmark-done\" fillColor=\"secondary\"></eui-icon-svg>\n                        </button>\n                    }\n                    @if (isShowSettingsButton) {\n                        <button\n                            euiButton\n                            euiPrimary\n                            euiRounded\n                            euiIconButton\n                            euiBasicButton\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n                            title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n                            (click)=\"onSettings($event)\">\n                            <eui-icon-svg icon=\"eui-settings-o\" fillColor=\"secondary\"></eui-icon-svg>\n                        </button>\n                    }\n                    @if (isShowRefreshButton) {\n                        <button\n                            euiButton\n                            euiPrimary\n                            euiRounded\n                            euiIconButton\n                            euiBasicButton\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n                            title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n                            (click)=\"onRefresh($event)\">\n                            <eui-icon-svg icon=\"eui-refresh\" fillColor=\"secondary\"></eui-icon-svg>\n                        </button>\n                    }\n                </div>\n            }\n        </eui-overlay-header>\n    \n        <eui-overlay-body>\n            @if (items) {\n                <ul class=\"eui-notifications-items\">\n                    @for (item of items; let i = $index; track $index) {\n                        <eui-notification-item\n                            [item]=\"item\"\n                            [dateFormat]=\"dateFormat\"\n                            [markAsReadLabel]=\"markAsReadLabel\"\n                            [isShowMarkAsRead]=\"isShowMarkAsRead\"\n                            (itemClick)=\"onItemClick($event)\"\n                            (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n                        </eui-notification-item>\n                    }\n                </ul>\n            }\n        </eui-overlay-body>\n    \n        @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n            <eui-overlay-footer>\n                @if (items?.length > 0 && isShowViewAllAction) {\n                    <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n                        <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n                    </a>\n                }\n                @if (items?.length === 0) {\n                    @if (!noNotificationFoundLink) {\n                        <div class=\"ux-notification__item-content\">\n                            {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n                        </div>\n                    }\n                    @if (noNotificationFoundLink) {\n                        <div class=\"ux-notification__item-content\">\n                            <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n                                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n                            </a>\n                        </div>\n                    }\n                }\n            </eui-overlay-footer>\n        }\n    </eui-overlay>\n}\n\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-surface-shell);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-divider-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-surface-light);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-6xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-secondary-surface-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-3xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-3xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { 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.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i4$1.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i4$1.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i4$1.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i4$1.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { 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: "pipe", type: i2$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-notifications', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        TranslateModule,
+                        EuiNotificationItemComponent,
+                        ...EUI_ICON,
+                        ...EUI_ICON_BUTTON,
+                        ...EUI_BADGE,
+                        ...EUI_OVERLAY,
+                        ...EUI_BUTTON,
+                    ], template: "<eui-icon-button\n    class=\"eui-notifications__trigger\"\n    icon=\"eui-notifications-o\"\n    (click)=\"onClicked($event)\"\n    [ariaLabel]=\"getAriaLabel()\">\n    @if (count) {\n        <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n    }\n</eui-icon-button>\n\n@if (isOverlayActive) {\n    <eui-overlay hasClosedOnClickOutside isActive class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\n        <eui-overlay-header>\n            <div class=\"eui-notifications__header-title\">\n                <div class=\"eui-notifications__header-title-label\">\n                    {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n                    @if (items) {\n                        <span\n                            class=\"eui-u-cursor-help eui-u-ml-s\"\n                            attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n                            title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n                        </span>\n                    }\n                    <eui-badge>{{ items.length }}</eui-badge>\n                </div>\n            </div>\n    \n            @if (items) {\n                <div class=\"eui-notifications__header-actions\">\n                    @if (isShowMarkAllAsReadButton) {\n                        <button\n                            euiButton\n                            euiPrimary\n                            euiRounded\n                            euiIconButton\n                            euiBasicButton\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n                            title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n                            (click)=\"onMarkAllAsRead($event)\">\n                            <eui-icon-svg icon=\"eui-checkmark-done\" fillColor=\"secondary\"></eui-icon-svg>\n                        </button>\n                    }\n                    @if (isShowSettingsButton) {\n                        <button\n                            euiButton\n                            euiPrimary\n                            euiRounded\n                            euiIconButton\n                            euiBasicButton\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n                            title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n                            (click)=\"onSettings($event)\">\n                            <eui-icon-svg icon=\"eui-settings-o\" fillColor=\"secondary\"></eui-icon-svg>\n                        </button>\n                    }\n                    @if (isShowRefreshButton) {\n                        <button\n                            euiButton\n                            euiPrimary\n                            euiRounded\n                            euiIconButton\n                            euiBasicButton\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n                            title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n                            (click)=\"onRefresh($event)\">\n                            <eui-icon-svg icon=\"eui-refresh\" fillColor=\"secondary\"></eui-icon-svg>\n                        </button>\n                    }\n                </div>\n            }\n        </eui-overlay-header>\n    \n        <eui-overlay-body>\n            @if (items) {\n                <ul class=\"eui-notifications-items\">\n                    @for (item of items; let i = $index; track $index) {\n                        <eui-notification-item\n                            [item]=\"item\"\n                            [dateFormat]=\"dateFormat\"\n                            [markAsReadLabel]=\"markAsReadLabel\"\n                            [isShowMarkAsRead]=\"isShowMarkAsRead\"\n                            (itemClick)=\"onItemClick($event)\"\n                            (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n                        </eui-notification-item>\n                    }\n                </ul>\n            }\n        </eui-overlay-body>\n    \n        @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n            <eui-overlay-footer>\n                @if (items?.length > 0 && isShowViewAllAction) {\n                    <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n                        <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n                    </a>\n                }\n                @if (items?.length === 0) {\n                    @if (!noNotificationFoundLink) {\n                        <div class=\"ux-notification__item-content\">\n                            {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n                        </div>\n                    }\n                    @if (noNotificationFoundLink) {\n                        <div class=\"ux-notification__item-content\">\n                            <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n                                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n                            </a>\n                        </div>\n                    }\n                }\n            </eui-overlay-footer>\n        }\n    </eui-overlay>\n}\n\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-surface-shell);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-divider-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-surface-light);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-6xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-secondary-surface-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-3xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-3xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
+        }], propDecorators: { refreshClick: [{
+                type: Output
+            }], notificationsClick: [{
+                type: Output
+            }], viewAllClick: [{
+                type: Output
+            }], settingsClick: [{
+                type: Output
+            }], markAllAsReadClick: [{
+                type: Output
+            }], noNotificationFoundClick: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], itemMarkAsReadClick: [{
+                type: Output
+            }], string: [{
+                type: HostBinding,
+                args: ['class']
+            }], count: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], unreadLabel: [{
+                type: Input
+            }], totalLabel: [{
+                type: Input
+            }], markAsReadLabel: [{
+                type: Input
+            }], markAsUnReadLabel: [{
+                type: Input
+            }], markAllAsReadLabel: [{
+                type: Input
+            }], settingsLabel: [{
+                type: Input
+            }], refreshLabel: [{
+                type: Input
+            }], viewAllNotificationsLabel: [{
+                type: Input
+            }], headerTitleLabel: [{
+                type: Input
+            }], noNotificationFoundLabel: [{
+                type: Input
+            }], nbUnreadCount: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], noNotificationFoundLink: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowMarkAsRead: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowViewAllAction: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isHidePanelOnViewAllAction: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], customUnreadCount: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowMarkAllAsReadButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowSettingsButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowRefreshButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class EuiNotificationItemV2Component {
+    constructor() {
+        this.string = 'eui-notification-item';
+        this.itemClick = new EventEmitter();
+        this.itemMarkAsRead = new EventEmitter();
+        this.markAsReadLabel = null;
+        this.dateFormat = 'dd/MM/YYYY';
+        this.tooltipSize = 'auto';
+        this.isShowMarkAsRead = true;
+    }
+    get iconColor() {
+        return this.item.metadata?.read ? 'secondary-light' : 'secondary';
+    }
+    onItemClick() {
+        this.itemClick.emit(this.item);
+    }
+    onItemMarkAsRead(event) {
+        if (this.item.metadata) {
+            this.item.metadata.read = true;
+        }
+        this.itemMarkAsRead.emit(this.item);
+        consumeEvent(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationItemV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiNotificationItemV2Component, isStandalone: true, selector: "eui-notification-item-v2", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute] }, outputs: { itemClick: "itemClick", itemMarkAsRead: "itemMarkAsRead" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div\n    class=\"eui-notification-item-content\"\n    (click)=\"onItemClick()\"\n    [ngClass]=\"{ 'eui-u-c-bg-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-f-s\">\n        @if (item.metadata?.date) {\n        <div class=\"eui-notification-item-content-top__date\">\n            <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                <eui-icon-svg icon=\"notifications:sharp\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n                @if (item.metadata?.new) {\n                    <span class=\"eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle\"></span>\n                }\n            </span>\n            <span>{{ item.metadata?.date | date: dateFormat }}</span>\n        </div>\n        }\n        @if (item.metadata?.important) {\n        <div class=\"eui-u-f-m-bold\">\n            <eui-icon-svg icon=\"alert:sharp\" fillColor=\"danger-100\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </div>\n        }\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        @if (item.metadata?.url) {\n            <a class=\"eui-u-text-link\" href=\"{{ item.metadata.url }}\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                <div\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n                }\n            </a>\n        }\n\n        @if (item.metadata?.urlExternal) {\n            <a class=\"eui-u-text-link-external\"\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_blank' : item.metadata.urlExternalTarget\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                <div\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n                }\n            </a>\n        }\n\n        @if (!item.metadata?.url && !item.metadata?.urlExternal) {\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-f-m-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            @if (item.subLabel) {\n            <div\n                class=\"eui-notification-item-content-middle__sub-label\"\n                [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            }\n        }\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        @if (isShowMarkAsRead && item.metadata && !item.metadata.read) {\n        <a\n            class=\"eui-u-text-link\"\n            href=\"javascript:void(0)\"\n            (click)=\"onItemMarkAsRead($event)\" tabIndex=\"0\">\n            {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n        </a>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: EuiTruncatePipe, name: "euiTruncate" }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationItemV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-notification-item-v2', imports: [
+                        NgClass,
+                        DatePipe,
+                        EuiTruncatePipe,
+                        TranslateModule,
+                        ...EUI_ICON,
+                    ], template: "<div\n    class=\"eui-notification-item-content\"\n    (click)=\"onItemClick()\"\n    [ngClass]=\"{ 'eui-u-c-bg-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-f-s\">\n        @if (item.metadata?.date) {\n        <div class=\"eui-notification-item-content-top__date\">\n            <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                <eui-icon-svg icon=\"notifications:sharp\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n                @if (item.metadata?.new) {\n                    <span class=\"eui-notification-item-content-top__date-dot eui-u-c-danger-light eui-u-f-s eui-icon eui-icon-circle\"></span>\n                }\n            </span>\n            <span>{{ item.metadata?.date | date: dateFormat }}</span>\n        </div>\n        }\n        @if (item.metadata?.important) {\n        <div class=\"eui-u-f-m-bold\">\n            <eui-icon-svg icon=\"alert:sharp\" fillColor=\"danger-100\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </div>\n        }\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        @if (item.metadata?.url) {\n            <a class=\"eui-u-text-link\" href=\"{{ item.metadata.url }}\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                <div\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n                }\n            </a>\n        }\n\n        @if (item.metadata?.urlExternal) {\n            <a class=\"eui-u-text-link-external\"\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_blank' : item.metadata.urlExternalTarget\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-f-m-semi-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                @if (item.subLabel) {\n                <div\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n                }\n            </a>\n        }\n\n        @if (!item.metadata?.url && !item.metadata?.urlExternal) {\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-f-m-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            @if (item.subLabel) {\n            <div\n                class=\"eui-notification-item-content-middle__sub-label\"\n                [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            }\n        }\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        @if (isShowMarkAsRead && item.metadata && !item.metadata.read) {\n        <a\n            class=\"eui-u-text-link\"\n            href=\"javascript:void(0)\"\n            (click)=\"onItemMarkAsRead($event)\" tabIndex=\"0\">\n            {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n        </a>\n        }\n    </div>\n</div>\n" }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], itemClick: [{
+                type: Output
+            }], itemMarkAsRead: [{
+                type: Output
+            }], markAsReadLabel: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], isShowMarkAsRead: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class EuiNotificationsV2Component {
+    constructor() {
+        this.refreshClick = new EventEmitter();
+        this.notificationsClick = new EventEmitter();
+        this.viewAllClick = new EventEmitter();
+        // @Output() settingsClick: EventEmitter<any> = new EventEmitter<any>();
+        this.markAllAsReadClick = new EventEmitter();
+        this.noNotificationFoundClick = new EventEmitter();
+        this.itemClick = new EventEmitter();
+        this.itemMarkAsReadClick = new EventEmitter();
+        this.isOverlayActive = false;
+        this.currentDayNotifications = [];
+        this.oldestNotifications = [];
+        this.unreadNotifications = [];
+        this.today = new Date();
+        this.string = 'eui-notifications-v2';
+        this.count = null;
+        this.unreadCount = null;
+        this.unreadSinceLastCheckCount = null;
+        this.items = [];
+        this.unreadLabel = null;
+        this.totalLabel = null;
+        this.markAsReadLabel = null;
+        this.markAsUnReadLabel = null;
+        this.markAllAsReadLabel = null;
+        this.settingsLabel = null;
+        this.refreshLabel = null;
+        this.viewAllNotificationsLabel = null;
+        this.headerTitleLabel = null;
+        this.headerHideLabel = null;
+        this.headerUnreadSinceLastCheckCountLabel = null;
+        this.headerUnreadCountLabel = null;
+        this.noNotificationFoundLabel = null;
+        this.dateFormat = 'dd/MM/YYYY';
+        this.noNotificationFoundLink = false;
+        this.isShowMarkAsRead = true;
+        this.isShowViewAllAction = true;
+        this.isHidePanelOnViewAllAction = true;
+        this.isShowMarkAllAsReadButton = true;
+        this.isShowSettingsButton = true;
+        this.isShowRefreshButton = true;
+    }
+    get isShowUnreadSinceLastCheckCount() {
+        return this.unreadSinceLastCheckCount && this.unreadSinceLastCheckCount > 0;
+    }
+    onHide() {
+        this.isOverlayActive = false;
+    }
+    onClicked(event) {
+        this.notificationsClick.emit();
+        consumeEvent(event);
+        this.isOverlayActive = !this.isOverlayActive;
+    }
+    onRefresh(event) {
+        this.refreshClick.emit();
+        consumeEvent(event);
+    }
+    onItemClick(link) {
+        this.itemClick.emit(link);
+        consumeEvent(event);
+    }
+    onViewAllClick(event) {
+        this.viewAllClick.emit();
+        if (!this.isHidePanelOnViewAllAction) {
+            consumeEvent(event);
+        }
+    }
+    onNoNotificationFoundClick() {
+        this.noNotificationFoundClick.emit();
+    }
+    onItemMarkAsRead(link) {
+        this.itemMarkAsReadClick.emit(link);
+    }
+    onMarkAllAsRead(e) {
+        this.markAllAsReadClick.emit(e);
+        consumeEvent(e);
+    }
+    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    trackByFn(index, item) {
+        return item.id;
+    }
+    updateActiveState(isActive) {
+        this.isOverlayActive = isActive;
+    }
+    getAriaLabel() {
+        if (this.count) {
+            return this.count > 1
+                ? ` You have ${this.count} notifications`
+                : `You have ${this.count} notification`;
+        }
+        return 'Open notifications panel';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: EuiNotificationsV2Component, isStandalone: true, selector: "eui-notifications-v2", inputs: { count: "count", unreadCount: "unreadCount", unreadSinceLastCheckCount: "unreadSinceLastCheckCount", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", headerHideLabel: "headerHideLabel", headerUnreadSinceLastCheckCountLabel: "headerUnreadSinceLastCheckCountLabel", headerUnreadCountLabel: "headerUnreadCountLabel", noNotificationFoundLabel: "noNotificationFoundLabel", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-icon-button\n    class=\"eui-notifications-v2__trigger\"\n    icon=\"eui-notifications-o\"\n    fillColor=\"white\"\n    (click)=\"onClicked($event)\"\n    [ariaLabel]=\"getAriaLabel()\">\n    @if (isShowUnreadSinceLastCheckCount) {\n        <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n    }\n</eui-icon-button>\n\n@if (isOverlayActive){\n    <eui-overlay isActive hasClosedOnClickOutside class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\n        <eui-overlay-header>\n            <div class=\"eui-notifications-v2__header\">\n                <div class=\"eui-notifications-v2__header-title\">\n                    <div class=\"eui-notifications-v2__header-title-label\">\n                        {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n                    </div>\n    \n                    <div class=\"eui-notifications-v2__header-title-actions\">\n                        <span class=\"hide\">\n                            <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n                                {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n                            </a>\n                            <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\n                        </span>\n                    </div>\n                </div>\n    \n                <div class=\"eui-notifications-v2__header-subinfos-bar\">\n                    <strong>{{ unreadSinceLastCheckCount }}</strong>\n                    <span class=\"eui-u-ml-xs\">{{\n                        headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n                    }}</span>\n    \n                    <span class=\"eui-u-ml-xs\">|</span>\n    \n                    <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n                    <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n                </div>\n    \n                <div class=\"eui-notifications-v2__header-subactions-bar\">\n                    @if (items.length > 0) {\n                    <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n                        {{ 'notif.MARK-ALL-READ' | translate }}\n                    </a>\n                    }\n                    <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n                        <span class=\"eui-u-flex\">\n                            <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"secondary\"></eui-icon-svg>\n                            {{ 'notif.SV-REFRESH' | translate }}\n                        </span>\n                    </a>\n                </div>\n            </div>\n        </eui-overlay-header>\n    \n        <eui-overlay-body>\n            @if (items) {\n            <ul class=\"eui-notifications-items\">\n                @for (item of items; track trackByFn($index, item)) {\n                <eui-notification-item-v2\n                    [item]=\"item\"\n                    [dateFormat]=\"dateFormat\"\n                    [markAsReadLabel]=\"markAsReadLabel\"\n                    [isShowMarkAsRead]=\"isShowMarkAsRead\"\n                    (itemClick)=\"onItemClick($event)\"\n                    (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n                </eui-notification-item-v2>\n                }\n            </ul>\n            }\n        </eui-overlay-body>\n    \n        <eui-overlay-footer>\n            @if (items?.length > 0) {\n                <strong\n                    ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n                        viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n                    }}</a></strong\n                >\n            }\n            @if (items?.length === 0) {\n                @if (!noNotificationFoundLink) {\n                <div class=\"ux-notification__item-content\">\n                    {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n                </div>\n                }\n                @if (noNotificationFoundLink) {\n                <div class=\"ux-notification__item-content\">\n                    <strong\n                        ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n                            noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                        }}</a></strong\n                    >\n                </div>\n                }\n            }\n        </eui-overlay-footer>\n    </eui-overlay>\n}\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-surface-container)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-divider-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-semi-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-divider-lightt);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-divider-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-surface-light);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-6xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-secondary-surface-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-3xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-3xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { 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.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i4$1.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i4$1.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i4$1.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i4$1.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiNotificationsV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-notifications-v2', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
+                        TranslateModule,
+                        EuiNotificationItemV2Component,
+                        ...EUI_ICON,
+                        ...EUI_ICON_BUTTON,
+                        ...EUI_BADGE,
+                        ...EUI_OVERLAY,
+                        ...EUI_BUTTON,
+                    ], template: "<eui-icon-button\n    class=\"eui-notifications-v2__trigger\"\n    icon=\"eui-notifications-o\"\n    fillColor=\"white\"\n    (click)=\"onClicked($event)\"\n    [ariaLabel]=\"getAriaLabel()\">\n    @if (isShowUnreadSinceLastCheckCount) {\n        <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n    }\n</eui-icon-button>\n\n@if (isOverlayActive){\n    <eui-overlay isActive hasClosedOnClickOutside class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\n        <eui-overlay-header>\n            <div class=\"eui-notifications-v2__header\">\n                <div class=\"eui-notifications-v2__header-title\">\n                    <div class=\"eui-notifications-v2__header-title-label\">\n                        {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n                    </div>\n    \n                    <div class=\"eui-notifications-v2__header-title-actions\">\n                        <span class=\"hide\">\n                            <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n                                {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n                            </a>\n                            <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\n                        </span>\n                    </div>\n                </div>\n    \n                <div class=\"eui-notifications-v2__header-subinfos-bar\">\n                    <strong>{{ unreadSinceLastCheckCount }}</strong>\n                    <span class=\"eui-u-ml-xs\">{{\n                        headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n                    }}</span>\n    \n                    <span class=\"eui-u-ml-xs\">|</span>\n    \n                    <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n                    <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n                </div>\n    \n                <div class=\"eui-notifications-v2__header-subactions-bar\">\n                    @if (items.length > 0) {\n                    <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n                        {{ 'notif.MARK-ALL-READ' | translate }}\n                    </a>\n                    }\n                    <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n                        <span class=\"eui-u-flex\">\n                            <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"secondary\"></eui-icon-svg>\n                            {{ 'notif.SV-REFRESH' | translate }}\n                        </span>\n                    </a>\n                </div>\n            </div>\n        </eui-overlay-header>\n    \n        <eui-overlay-body>\n            @if (items) {\n            <ul class=\"eui-notifications-items\">\n                @for (item of items; track trackByFn($index, item)) {\n                <eui-notification-item-v2\n                    [item]=\"item\"\n                    [dateFormat]=\"dateFormat\"\n                    [markAsReadLabel]=\"markAsReadLabel\"\n                    [isShowMarkAsRead]=\"isShowMarkAsRead\"\n                    (itemClick)=\"onItemClick($event)\"\n                    (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n                </eui-notification-item-v2>\n                }\n            </ul>\n            }\n        </eui-overlay-body>\n    \n        <eui-overlay-footer>\n            @if (items?.length > 0) {\n                <strong\n                    ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n                        viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n                    }}</a></strong\n                >\n            }\n            @if (items?.length === 0) {\n                @if (!noNotificationFoundLink) {\n                <div class=\"ux-notification__item-content\">\n                    {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n                </div>\n                }\n                @if (noNotificationFoundLink) {\n                <div class=\"ux-notification__item-content\">\n                    <strong\n                        ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n                            noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                        }}</a></strong\n                    >\n                </div>\n                }\n            }\n        </eui-overlay-footer>\n    </eui-overlay>\n}\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-surface-container)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-divider-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-semi-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-divider-lightt);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-divider-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-surface-light);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-6xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-secondary-surface-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-3xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-3xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
+        }], propDecorators: { refreshClick: [{
+                type: Output
+            }], notificationsClick: [{
+                type: Output
+            }], viewAllClick: [{
+                type: Output
+            }], markAllAsReadClick: [{
+                type: Output
+            }], noNotificationFoundClick: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], itemMarkAsReadClick: [{
+                type: Output
+            }], string: [{
+                type: HostBinding,
+                args: ['class']
+            }], count: [{
+                type: Input
+            }], unreadCount: [{
+                type: Input
+            }], unreadSinceLastCheckCount: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], unreadLabel: [{
+                type: Input
+            }], totalLabel: [{
+                type: Input
+            }], markAsReadLabel: [{
+                type: Input
+            }], markAsUnReadLabel: [{
+                type: Input
+            }], markAllAsReadLabel: [{
+                type: Input
+            }], settingsLabel: [{
+                type: Input
+            }], refreshLabel: [{
+                type: Input
+            }], viewAllNotificationsLabel: [{
+                type: Input
+            }], headerTitleLabel: [{
+                type: Input
+            }], headerHideLabel: [{
+                type: Input
+            }], headerUnreadSinceLastCheckCountLabel: [{
+                type: Input
+            }], headerUnreadCountLabel: [{
+                type: Input
+            }], noNotificationFoundLabel: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], noNotificationFoundLink: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowMarkAsRead: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowViewAllAction: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isHidePanelOnViewAllAction: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowMarkAllAsReadButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowSettingsButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isShowRefreshButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
 
 const EUI_LAYOUT = [
-    ...EUI_APP,
-    ...EUI_TOOLBAR,
-    ...EUI_FOOTER,
-    ...EUI_HEADER,
-    ...EUI_SIDEBAR_TOGGLE,
-    ...EUI_NOTIFICATIONS,
-    ...EUI_NOTIFICATIONS_V2,
+    EuiAppComponent,
+    EuiAppBreadcrumbComponent,
+    EuiAppFooterComponent,
+    EuiAppHeaderComponent,
+    EuiAppPageWrapperDirective,
+    EuiAppSidebarBodyComponent,
+    EuiAppSidebarComponent,
+    EuiAppSidebarDrawerComponent,
+    EuiAppSidebarFooterComponent,
+    EuiAppSidebarHeaderComponent,
+    EuiAppSidebarHeaderUserProfileComponent,
+    EuiAppSidebarMenuComponent,
+    EuiAppToolbarComponent,
+    EuiAppTopMessageComponent,
+    EuiFooterComponent,
+    EuiHeaderAppComponent,
+    EuiHeaderAppNameComponent,
+    EuiHeaderAppNameLogoComponent,
+    EuiHeaderAppSubtitleComponent,
+    EuiHeaderComponent,
+    EuiHeaderEnvironmentComponent,
+    EuiHeaderLogoComponent,
+    EuiHeaderRightContentComponent,
+    EuiHeaderSearchComponent,
+    EuiHeaderUserProfileComponent,
+    EuiNotificationItemComponent,
+    EuiNotificationsComponent,
+    EuiNotificationItemV2Component,
+    EuiNotificationsV2Component,
+    EuiSidebarToggleComponent,
+    EuiToolbarAppComponent,
+    EuiToolbarCenterComponent,
+    EuiToolbarComponent,
+    EuiToolbarEnvironmentComponent,
+    EuiToolbarItemComponent,
+    EuiToolbarItemsComponent,
+    EuiToolbarLogoComponent,
+    EuiToolbarMegaMenuComponent,
+    EuiToolbarNavbarComponent,
+    EuiToolbarNavbarItemComponent,
+    EuiToolbarSearchComponent,
+    EuiToolbarSelectorComponent,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_LAYOUT };
+export { EUI_LAYOUT, EuiAppBreadcrumbComponent, EuiAppComponent, EuiAppFooterComponent, EuiAppHeaderComponent, EuiAppPageWrapperDirective, EuiAppSidebarBodyComponent, EuiAppSidebarComponent, EuiAppSidebarDrawerComponent, EuiAppSidebarFooterComponent, EuiAppSidebarHeaderComponent, EuiAppSidebarHeaderUserProfileComponent, EuiAppSidebarMenuComponent, EuiAppToolbarComponent, EuiAppTopMessageComponent, EuiFooterComponent, EuiHeaderAppComponent, EuiHeaderAppNameComponent, EuiHeaderAppNameLogoComponent, EuiHeaderAppSubtitleComponent, EuiHeaderComponent, EuiHeaderEnvironmentComponent, EuiHeaderLogoComponent, EuiHeaderRightContentComponent, EuiHeaderSearchComponent, EuiHeaderUserProfileComponent, EuiNotificationItemComponent, EuiNotificationItemV2Component, EuiNotificationsComponent, EuiNotificationsV2Component, EuiSidebarToggleComponent, EuiToolbarAppComponent, EuiToolbarCenterComponent, EuiToolbarComponent, EuiToolbarEnvironmentComponent, EuiToolbarItemComponent, EuiToolbarItemsComponent, EuiToolbarLogoComponent, EuiToolbarMegaMenuComponent, EuiToolbarNavbarComponent, EuiToolbarNavbarItemComponent, EuiToolbarSearchComponent, EuiToolbarSelectorComponent };
 //# sourceMappingURL=eui-components-layout.mjs.map