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

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

@@ -1,841 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, Input, EventEmitter, booleanAttribute, HostListener, forwardRef, ContentChildren, Output, ViewChild, ElementRef, ChangeDetectorRef, ContentChild, Directive } from '@angular/core';
-import { EuiAppShellService, CssUtils, consumeEvent, EuiGrowlService } from '@eui/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ViewportRuler, ScrollDispatcher } from '@angular/cdk/scrolling';
-import { Subject, Subscription, takeUntil as takeUntil$1, startWith, fromEvent } from 'rxjs';
-import { filter, takeUntil, debounceTime } from 'rxjs/operators';
-import { DOCUMENT, AsyncPipe, isPlatformBrowser } from '@angular/common';
-import * as i1 from '@eui/components/layout/eui-sidebar-toggle';
-import { EUI_SIDEBAR_TOGGLE } from '@eui/components/layout/eui-sidebar-toggle';
-import * as i1$1 from '@eui/components/eui-user-profile';
-import { EuiUserProfileMenuComponent, EUI_USER_PROFILE } from '@eui/components/eui-user-profile';
-import * as i2 from '@eui/components/eui-button';
-import { EUI_BUTTON } from '@eui/components/eui-button';
-import * as i3 from '@eui/components/eui-icon';
-import { EUI_ICON } from '@eui/components/eui-icon';
-import * as i1$2 from '@eui/components/eui-menu';
-import { EUI_MENU } from '@eui/components/eui-menu';
-import * as i2$1 from '@eui/components/eui-language-selector';
-import { EUI_LANGUAGE_SELECTOR } from '@eui/components/eui-language-selector';
-import * as i1$3 from '@eui/components/shared';
-import { BaseStatesDirective } from '@eui/components/shared';
-import { ContentObserver } from '@angular/cdk/observers';
-import * as i2$2 from '@eui/components/eui-icon-button';
-import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
-import * as i7 from '@eui/components/eui-dimmer';
-import { EUI_DIMMER } from '@eui/components/eui-dimmer';
-import { RouterOutlet } from '@angular/router';
-import * as i6 from '@eui/components/eui-growl';
-import { EUI_GROWL } from '@eui/components/eui-growl';
-import * as i8 from '@eui/components/eui-block-document';
-import { EUI_BLOCK_DOCUMENT } from '@eui/components/eui-block-document';
-import * as i5 from '@eui/components/layout/eui-toolbar';
-import { EUI_TOOLBAR } from '@eui/components/layout/eui-toolbar';
-
-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']
-            }] } });
-
-const EUI_APP_BREADCRUMB = [
-    EuiAppBreadcrumbComponent,
-];
-
-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']
-            }] } });
-
-const EUI_APP_FOOTER = [
-    EuiAppFooterComponent,
-];
-
-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: i1.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,
-                        ...EUI_SIDEBAR_TOGGLE,
-                    ], 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
-            }] } });
-
-const EUI_APP_HEADER = [
-    EuiAppHeaderComponent,
-];
-
-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
-            }] } });
-
-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 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$1.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: i2.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.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 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
-            }] } });
-
-// 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 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']
-            }] } });
-
-const EUI_APP_SIDEBAR = [
-    EuiAppSidebarComponent,
-    EuiAppSidebarHeaderComponent,
-    EuiAppSidebarBodyComponent,
-    EuiAppSidebarFooterComponent,
-    EuiAppSidebarMenuComponent,
-    EuiAppSidebarHeaderUserProfileComponent,
-    EuiAppSidebarDrawerComponent,
-];
-
-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: i1.EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr", "iconSvgFillColor"] }, { kind: "component", type: i2$1.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,
-                        ...EUI_SIDEBAR_TOGGLE,
-                        ...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 }]
-            }] } });
-
-const EUI_APP_TOOLBAR = [
-    EuiAppToolbarComponent,
-];
-
-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$3.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$2.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
-            }] } });
-
-const EUI_APP_TOP_MESSAGE = [
-    EuiAppTopMessageComponent,
-];
-
-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: EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { 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: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: i5.EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: i5.EuiToolbarItemsComponent, selector: "eui-toolbar-items", inputs: ["euiEnd", "euiPositionRight"] }, { kind: "component", type: i5.EuiToolbarItemComponent, selector: "eui-toolbar-item" }, { kind: "component", type: i6.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "ariaLive", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i7.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "component", type: i8.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,
-                        ...EUI_APP_SIDEBAR,
-                        ...EUI_APP_TOOLBAR,
-                        ...EUI_TOOLBAR,
-                        ...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' }]
-        }] });
-
-const EUI_APP = [
-    EuiAppComponent,
-    EuiAppPageWrapperDirective,
-    ...EUI_APP_BREADCRUMB,
-    ...EUI_APP_FOOTER,
-    ...EUI_APP_HEADER,
-    ...EUI_APP_SIDEBAR,
-    ...EUI_APP_TOOLBAR,
-    ...EUI_APP_TOP_MESSAGE,
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { EUI_APP, EUI_APP_BREADCRUMB, EUI_APP_FOOTER, EUI_APP_HEADER, EUI_APP_SIDEBAR, EUI_APP_TOOLBAR, EUI_APP_TOP_MESSAGE, EuiAppBreadcrumbComponent, EuiAppComponent, EuiAppFooterComponent, EuiAppHeaderComponent, EuiAppPageWrapperDirective, EuiAppSidebarBodyComponent, EuiAppSidebarComponent, EuiAppSidebarDrawerComponent, EuiAppSidebarFooterComponent, EuiAppSidebarHeaderComponent, EuiAppSidebarHeaderUserProfileComponent, EuiAppSidebarMenuComponent, EuiAppToolbarComponent, EuiAppTopMessageComponent };
-//# sourceMappingURL=eui-components-layout-eui-app.mjs.map