@eui/components 17.0.0-next.26 → 17.0.0-next.27

package/fesm2022/eui-components-layout.mjs

@@ -1,31 +1,37 @@
-import * as i2$1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, HostBinding, HostListener, EventEmitter, Input, Output, NgModule, Inject, ContentChild, forwardRef, Directive, ContentChildren, ViewChild, ElementRef, QueryList, ComponentRef, ViewContainerRef, Injectable } from '@angular/core';
-import * as i1$2 from '@angular/router';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, HostBinding, HostListener, EventEmitter, Input, Output, Inject, NgModule, ContentChild, forwardRef, Host, ViewChild, ContentChildren, Directive, ElementRef, QueryList, ComponentRef, ViewContainerRef, Injectable } from '@angular/core';
+import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subscription, Subject, fromEvent, startWith, BehaviorSubject } from 'rxjs';
 import { filter, takeUntil, distinctUntilKeyChanged, map, debounceTime, startWith as startWith$1 } from 'rxjs/operators';
-import * as i1 from '@eui/core';
-import { consumeEvent, EuiEuLanguages as EuiEuLanguages$1, EUI_CONFIG_TOKEN, coerceBoolean } from '@eui/core';
 import * as i2 from '@eui/components/eui-menu';
 import { EuiMenuModule } from '@eui/components/eui-menu';
 import * as i3 from '@eui/components/eui-button';
 import { EuiButtonModule } from '@eui/components/eui-button';
-import * as i4 from '@eui/components/pipes';
+import * as i4$1 from '@eui/components/pipes';
 import { EuiCoerceBooleanPipeModule, EuiTruncatePipeModule } from '@eui/components/pipes';
+import * as i1 from '@eui/core';
+import { EuiEuLanguages as EuiEuLanguages$1, coerceBoolean, consumeEvent, EUI_CONFIG_TOKEN } from '@eui/core';
+import { __decorate } from 'tslib';
+import * as i2$1 from '@eui/components/shared';
+import { BaseDirective, BaseStatesDirective } from '@eui/components/shared';
+import * as i3$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import * as i5 from '@eui/components/eui-icon';
 import { EuiIconModule, EuiIconComponent } from '@eui/components/eui-icon';
-import * as i4$1 from '@eui/components/eui-dropdown';
+import * as i4 from '@eui/components/eui-dropdown';
 import { EuiDropdownModule } from '@eui/components/eui-dropdown';
-import * as i1$1 from '@eui/components/eui-dialog';
+import * as i1$2 from '@eui/components/eui-dialog';
 import { DIALOG_COMPONENT_CONFIG, EuiDialogConfig, EuiDialogModule } from '@eui/components/eui-dialog';
-import * as i2$3 from '@eui/components/shared';
-import { BaseDirective, BaseStatesDirective } from '@eui/components/shared';
 import { EuiEuLanguages, coerceBoolean as coerceBoolean$1 } from '@eui/base';
-import * as i3$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import * as i6 from '@eui/components/eui-avatar';
+import { EuiAvatarModule } from '@eui/components/eui-avatar';
+import * as i7 from '@eui/components/eui-badge';
+import { EuiBadgeModule } from '@eui/components/eui-badge';
+import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i2$2 from 'ngx-device-detector';
 import * as i10 from '@eui/components/eui-block-document';
 import { EuiBlockDocumentModule } from '@eui/components/eui-block-document';
@@ -33,15 +39,9 @@ import * as i11 from '@eui/components/eui-growl';
 import { EuiGrowlModule } from '@eui/components/eui-growl';
 import * as i12 from '@eui/components/eui-dimmer';
 import { EuiDimmerModule } from '@eui/components/eui-dimmer';
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { __decorate } from 'tslib';
-import * as i6 from '@eui/components/eui-avatar';
-import { EuiAvatarModule } from '@eui/components/eui-avatar';
-import * as i7 from '@eui/components/eui-badge';
-import { EuiBadgeModule } from '@eui/components/eui-badge';
-import * as i2$4 from '@angular/cdk/scrolling';
+import * as i2$3 from '@angular/cdk/scrolling';
 import { BaseDirective as BaseDirective$1 } from '@eui/components/shared/base';
-import * as i2$5 from '@angular/cdk/observers';
+import * as i2$4 from '@angular/cdk/observers';
 import { EuiInputTextModule } from '@eui/components/eui-input-text';
 import * as i6$1 from '@eui/components/eui-input-group';
 import { EuiInputGroupModule } from '@eui/components/eui-input-group';
@@ -54,7 +54,7 @@ import * as i6$2 from '@eui/components/eui-label';
 import { EuiLabelModule } from '@eui/components/eui-label';
 import * as i5$2 from '@eui/components/eui-list';
 import { EuiListItemComponent, EuiListComponent, EuiListModule } from '@eui/components/eui-list';
-import * as i2$6 from '@eui/components/eui-overlay';
+import * as i2$5 from '@eui/components/eui-overlay';
 import { EuiOverlayModule } from '@eui/components/eui-overlay';
 
 class EuiAppSidebarComponent {
@@ -212,7 +212,7 @@ class EuiAppSidebarMenuComponent {
         this.sidebarItemClick.emit(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarMenuComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: { items: "items", hasFilter: "hasFilter", hasIcons: "hasIcons", hasTooltip: "hasTooltip", expandAllItems: "expandAllItems" }, outputs: { sidebarItemClick: "sidebarItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n    [items]=\"items\"\n    [hasFilter]=\"hasFilter\"\n    [hasIcons]=\"hasIcons\"\n    [hasTooltip]=\"hasTooltip\"\n    [expandAllItems]=\"expandAllItems\"\n    [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n    (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "isCollapsed", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["isClick", "itemClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: { items: "items", hasFilter: "hasFilter", hasIcons: "hasIcons", hasTooltip: "hasTooltip", expandAllItems: "expandAllItems" }, outputs: { sidebarItemClick: "sidebarItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n    [items]=\"items\"\n    [hasFilter]=\"hasFilter\"\n    [hasIcons]=\"hasIcons\"\n    [hasTooltip]=\"hasTooltip\"\n    [expandAllItems]=\"expandAllItems\"\n    [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n    (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "isCollapsed", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["isClick", "itemClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarMenuComponent, decorators: [{
             type: Component,
@@ -254,154 +254,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: HostBinding
             }] } });
 
-class EuiAppSidebarHeaderUserProfileComponent {
-    get isOnline() {
-        return this._isOnline;
-    }
-    set isOnline(value) {
-        this._isOnline = coerceBooleanProperty(value);
-    }
-    constructor(asService) {
-        this.asService = asService;
-        this.impersonateLabel = '';
-        this.welcomeLabel = '';
-        this.cssClasses = 'eui-app-sidebar-header-user-profile';
-        // 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
-        this.toggle = new EventEmitter();
-        this.toggleProfile = false;
-        this._isOnline = true;
-    }
-    // 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();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppSidebarHeaderUserProfileComponent, selector: "eui-app-sidebar-header-user-profile", inputs: { impersonateLabel: "impersonateLabel", welcomeLabel: "welcomeLabel", isOnline: "isOnline" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div class=\"eui-app-sidebar-header-user-profile-content\" (click)=\"onProfileClick($event)\">\n    <div\n        class=\"eui-user-profile__avatar\"\n        [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n    <div class=\"eui-user-profile__infos\">\n        <!-- NORMAL LOGIN-->\n        <div *ngIf=\"!(asService.getState('impersonatedUserInfos') | async | coerceBool)\" class=\"eui-user-profile__infos-wrapper\">\n            <div *ngIf=\"welcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n            <div class=\"eui-user-profile__infos-container\">\n                <span class=\"eui-user-profile__infos-name\">{{ asService.getState('userInfos') | async }}</span>\n            </div>\n        </div>\n\n        <!-- IMPERSONATION -->\n        <div *ngIf=\"asService.getState('impersonatedUserInfos') | async\" class=\"eui-user-profile__infos-wrapper\">\n            <div class=\"eui-user-profile__infos-container\">\n                <span *ngIf=\"welcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}&nbsp;</span>\n                <span class=\"eui-user-profile__infos-welcome\"\n                    ><strong>{{ asService.getState('userInfos') | async }}</strong></span\n                >\n            </div>\n            <div class=\"eui-user-profile__infos-container\">\n                <span class=\"eui-user-profile__infos-impersonating\">{{ impersonateLabel }}&nbsp;</span>\n                <span class=\"eui-user-profile__infos-name\">{{ asService.getState('impersonatedUserInfos') | async }}</span>\n            </div>\n        </div>\n\n        <!-- SUB INFOS-->\n        <div *ngIf=\"asService.getState('userSubInfos') | async\" class=\"eui-user-profile__infos-subinfos\">\n            {{ asService.getState('userSubInfos') | async }}\n        </div>\n    </div>\n\n    <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-user-profile__toggle\">\n        <span class=\"eui-icon\" [ngClass]=\"toggleProfile ? 'eui-icon-angle-up' : 'eui-icon-angle-down'\"></span>\n    </button>\n</div>\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile-content{align-items:center;cursor:pointer;display:flex;width:100%}.eui-app-sidebar-header-user-profile-content .eui-user-profile__avatar{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;border:3px solid var(--eui-base-color-info-75);border-radius:50%;box-shadow:0 1px 2px #0003,0 1px 3px #0000004d;height:40px;margin-right:1rem;min-height:40px;min-width:40px;position:relative;width:40px}.eui-app-sidebar-header-user-profile-content .eui-user-profile__avatar--offline{border-color:var(--eui-base-color-danger-75)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__avatar--online{border-color:var(--eui-base-color-info-75)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos{align-items:flex-start;display:flex;flex-direction:column;margin:0;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper{display:flex;flex-direction:column;width:100%}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container{justify-content:flex-start;align-items:center;display:flex;width:100%}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container .eui-user-profile__infos-welcome,.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container .eui-user-profile__infos-impersonating{color:var(--eui-base-color-grey-80)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container .eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-80)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle{font-size:var(--eui-base-font-size);margin-left:auto!important;transition:all .3s linear!important}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus:focus:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus [tabindex=\"0\"]:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus [tabindex=\"0\"]:focus:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active [tabindex=\"0\"]:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle .eui-button__container .eui-icon{font-size:var(--eui-base-font-size-l)!important}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.EuiCoerceBooleanPipe, name: "coerceBool" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-app-sidebar-header-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-app-sidebar-header-user-profile-content\" (click)=\"onProfileClick($event)\">\n    <div\n        class=\"eui-user-profile__avatar\"\n        [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n    <div class=\"eui-user-profile__infos\">\n        <!-- NORMAL LOGIN-->\n        <div *ngIf=\"!(asService.getState('impersonatedUserInfos') | async | coerceBool)\" class=\"eui-user-profile__infos-wrapper\">\n            <div *ngIf=\"welcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n            <div class=\"eui-user-profile__infos-container\">\n                <span class=\"eui-user-profile__infos-name\">{{ asService.getState('userInfos') | async }}</span>\n            </div>\n        </div>\n\n        <!-- IMPERSONATION -->\n        <div *ngIf=\"asService.getState('impersonatedUserInfos') | async\" class=\"eui-user-profile__infos-wrapper\">\n            <div class=\"eui-user-profile__infos-container\">\n                <span *ngIf=\"welcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}&nbsp;</span>\n                <span class=\"eui-user-profile__infos-welcome\"\n                    ><strong>{{ asService.getState('userInfos') | async }}</strong></span\n                >\n            </div>\n            <div class=\"eui-user-profile__infos-container\">\n                <span class=\"eui-user-profile__infos-impersonating\">{{ impersonateLabel }}&nbsp;</span>\n                <span class=\"eui-user-profile__infos-name\">{{ asService.getState('impersonatedUserInfos') | async }}</span>\n            </div>\n        </div>\n\n        <!-- SUB INFOS-->\n        <div *ngIf=\"asService.getState('userSubInfos') | async\" class=\"eui-user-profile__infos-subinfos\">\n            {{ asService.getState('userSubInfos') | async }}\n        </div>\n    </div>\n\n    <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-user-profile__toggle\">\n        <span class=\"eui-icon\" [ngClass]=\"toggleProfile ? 'eui-icon-angle-up' : 'eui-icon-angle-down'\"></span>\n    </button>\n</div>\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-base-color-grey-10);display:flex;padding:var(--eui-base-spacing-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile-content{align-items:center;cursor:pointer;display:flex;width:100%}.eui-app-sidebar-header-user-profile-content .eui-user-profile__avatar{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;border:3px solid var(--eui-base-color-info-75);border-radius:50%;box-shadow:0 1px 2px #0003,0 1px 3px #0000004d;height:40px;margin-right:1rem;min-height:40px;min-width:40px;position:relative;width:40px}.eui-app-sidebar-header-user-profile-content .eui-user-profile__avatar--offline{border-color:var(--eui-base-color-danger-75)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__avatar--online{border-color:var(--eui-base-color-info-75)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos{align-items:flex-start;display:flex;flex-direction:column;margin:0;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper{display:flex;flex-direction:column;width:100%}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container{justify-content:flex-start;align-items:center;display:flex;width:100%}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container .eui-user-profile__infos-welcome,.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container .eui-user-profile__infos-impersonating{color:var(--eui-base-color-grey-80)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos .eui-user-profile__infos-wrapper .eui-user-profile__infos-container .eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-app-sidebar-header-user-profile-content .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-80)}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle{font-size:var(--eui-base-font-size);margin-left:auto!important;transition:all .3s linear!important}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus:focus:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus [tabindex=\"0\"]:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:focus [tabindex=\"0\"]:focus:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active [tabindex=\"0\"]:active:not([readonly]),.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle:active [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-app-sidebar-header-user-profile-content .eui-user-profile__toggle .eui-button__container .eui-icon{font-size:var(--eui-base-font-size-l)!important}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { impersonateLabel: [{
-                type: Input
-            }], welcomeLabel: [{
-                type: Input
-            }], isOnline: [{
-                type: Input
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], toggle: [{
-                type: Output
-            }] } });
-
-class EuiAppSidebarDrawerComponent {
-    constructor() {
-        this._isExpanded = false;
-    }
-    get isExpanded() {
-        return this._isExpanded;
-    }
-    set isExpanded(value) {
-        this._isExpanded = coerceBooleanProperty(value);
-    }
-    get cssClasses() {
-        return this._getCssClasses();
-    }
-    _getCssClasses() {
-        return ['eui-app-sidebar-drawer', this.isExpanded ? 'eui-app-sidebar-drawer--expanded' : ''].join(' ').trim();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppSidebarDrawerComponent, 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\">\n    <ng-content></ng-content>\n</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", 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\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { isExpanded: [{
-                type: Input
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const COMPONENTS$4 = [
-    EuiAppSidebarComponent,
-    EuiAppSidebarHeaderComponent,
-    EuiAppSidebarBodyComponent,
-    EuiAppSidebarFooterComponent,
-    EuiAppSidebarMenuComponent,
-    EuiAppSidebarHeaderUserProfileComponent,
-    EuiAppSidebarDrawerComponent,
-];
-class EuiAppSidebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, declarations: [EuiAppSidebarComponent,
-            EuiAppSidebarHeaderComponent,
-            EuiAppSidebarBodyComponent,
-            EuiAppSidebarFooterComponent,
-            EuiAppSidebarMenuComponent,
-            EuiAppSidebarHeaderUserProfileComponent,
-            EuiAppSidebarDrawerComponent], imports: [CommonModule, RouterModule, EuiMenuModule, EuiButtonModule, EuiCoerceBooleanPipeModule], exports: [EuiAppSidebarComponent,
-            EuiAppSidebarHeaderComponent,
-            EuiAppSidebarBodyComponent,
-            EuiAppSidebarFooterComponent,
-            EuiAppSidebarMenuComponent,
-            EuiAppSidebarHeaderUserProfileComponent,
-            EuiAppSidebarDrawerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, imports: [CommonModule, RouterModule, EuiMenuModule, EuiButtonModule, EuiCoerceBooleanPipeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, RouterModule, EuiMenuModule, EuiButtonModule, EuiCoerceBooleanPipeModule],
-                    declarations: [...COMPONENTS$4],
-                    exports: [...COMPONENTS$4],
-                }]
-        }] });
-
-class EuiSidebarToggleComponent {
-    constructor(asService) {
-        this.asService = asService;
-        this.e2eAttr = 'eui-sidebar-toggle';
-        this.name = 'eui-sidebar-toggle';
-    }
-    onToggleSidebar(event) {
-        this.asService.sidebarToggle();
-        consumeEvent(event);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: { e2eAttr: "e2eAttr" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.name" } }, ngImport: i0, template: "<eui-icon-svg-button\n    iconSvgName=\"eui-ecl-hamburger\"\n    iconSvgFillColor=\"white\"\n    hasFocusBorder\n    [ariaLabel]=\"(asService.state$ | async).isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'\"\n    (click)=\"onToggleSidebar($event)\">\n</eui-icon-svg-button>\n", dependencies: [{ kind: "component", type: i5.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-sidebar-toggle', template: "<eui-icon-svg-button\n    iconSvgName=\"eui-ecl-hamburger\"\n    iconSvgFillColor=\"white\"\n    hasFocusBorder\n    [ariaLabel]=\"(asService.state$ | async).isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'\"\n    (click)=\"onToggleSidebar($event)\">\n</eui-icon-svg-button>\n" }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { e2eAttr: [{
-                type: HostBinding,
-                args: ['attr.data-e2e']
-            }, {
-                type: Input
-            }], name: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuiSidebarToggleModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, declarations: [EuiSidebarToggleComponent], imports: [CommonModule, EuiIconModule], exports: [EuiSidebarToggleComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, imports: [CommonModule, EuiIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, EuiIconModule],
-                    exports: [EuiSidebarToggleComponent],
-                    declarations: [EuiSidebarToggleComponent],
-                }]
-        }] });
-
 class EuiModalSelectorComponent {
     constructor(euiDialogService, config) {
         this.euiDialogService = euiDialogService;
@@ -442,13 +294,13 @@ class EuiModalSelectorComponent {
         }
         return rows;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiModalSelectorComponent, deps: [{ token: i1$1.EuiDialogService }, { token: DIALOG_COMPONENT_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiModalSelectorComponent, selector: "eui-modal-selector", ngImport: i0, template: "<h4 *ngIf=\"additionaLanguageRows?.length > 0\">EU official languages</h4>\n<div id=\"eu_languages\" *ngFor=\"let row of languageRows\" class=\"row\">\n    <div *ngFor=\"let language of row\" class=\"col-md-6 mb-2\">\n        <button\n            type=\"button\"\n            e2eAttr=\"eui-language-selector-item_{{ language.code }}\"\n            euiButton\n            euiBlockButton\n            [euiSecondary]=\"language.code !== config.selectedLanguage.code\"\n            [euiPrimary]=\"language.code === config.selectedLanguage.code\"\n            (click)=\"selectLanguage(language)\">\n            {{ language.label }} ({{ language.code }})\n        </button>\n    </div>\n</div>\n<ng-container *ngIf=\"additionaLanguageRows?.length > 0\">\n    <br />\n    <h4>Non-EU Languages</h4>\n    <div id=\"extra_languages\" *ngFor=\"let row of additionaLanguageRows\" class=\"row\">\n        <div *ngFor=\"let language of row\" class=\"col-md-6 mb-2\">\n            <button\n                type=\"button\"\n                e2eAttr=\"eui-language-selector-item_{{ language.code }}\"\n                euiButton\n                euiBlockButton\n                [euiSecondary]=\"language.code !== config.selectedLanguage.code\"\n                [euiPrimary]=\"language.code === config.selectedLanguage.code\"\n                (click)=\"selectLanguage(language)\">\n                {{ language.label }} ({{ language.code }})\n            </button>\n        </div>\n    </div>\n</ng-container>\n", styles: [".eui-language-selector{align-items:center;cursor:pointer;display:inline-flex;position:relative}.eui-language-selector:not(.eui-app-toolbar__language-selector){margin-top:var(--eui-base-spacing-xs)}.eui-language-selector:not(.eui-app-toolbar__language-selector) .eui-icon-svg>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-language-selector.eui-app-toolbar__language-selector{margin-top:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-m)}.eui-language-selector.eui-app-toolbar__language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)}.eui-language-selector-button{justify-content:center;position:relative;align-items:center;display:flex;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.eui-language-selector-button:active:not([readonly]),.eui-language-selector-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button [tabindex=\"0\"]:active:not([readonly]),.eui-language-selector-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button__language-code{align-items:center;bottom:50%;display:flex;color:var(--eui-base-color-white);position:absolute;text-transform:uppercase;top:35%;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-language-selector-menu-language-item{padding:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-10);text-align:center;cursor:pointer}.eui-language-selector-menu-language-item:hover{background:var(--eui-base-color-grey-5)}.mat-menu-panel{min-width:8rem!important}.eui-language-selector--empty{display:none}.eui-language-selector--inverted .eui-language-selector-link__language-code{color:var(--eui-base-color-text)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiModalSelectorComponent, deps: [{ token: i1$2.EuiDialogService }, { token: DIALOG_COMPONENT_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiModalSelectorComponent, selector: "eui-modal-selector", ngImport: i0, template: "<h4 *ngIf=\"additionaLanguageRows?.length > 0\">EU official languages</h4>\n<div id=\"eu_languages\" *ngFor=\"let row of languageRows\" class=\"row\">\n    <div *ngFor=\"let language of row\" class=\"col-md-6 mb-2\">\n        <button\n            type=\"button\"\n            e2eAttr=\"eui-language-selector-item_{{ language.code }}\"\n            euiButton\n            euiBlockButton\n            [euiSecondary]=\"language.code !== config.selectedLanguage.code\"\n            [euiPrimary]=\"language.code === config.selectedLanguage.code\"\n            (click)=\"selectLanguage(language)\">\n            {{ language.label }} ({{ language.code }})\n        </button>\n    </div>\n</div>\n<ng-container *ngIf=\"additionaLanguageRows?.length > 0\">\n    <br />\n    <h4>Non-EU Languages</h4>\n    <div id=\"extra_languages\" *ngFor=\"let row of additionaLanguageRows\" class=\"row\">\n        <div *ngFor=\"let language of row\" class=\"col-md-6 mb-2\">\n            <button\n                type=\"button\"\n                e2eAttr=\"eui-language-selector-item_{{ language.code }}\"\n                euiButton\n                euiBlockButton\n                [euiSecondary]=\"language.code !== config.selectedLanguage.code\"\n                [euiPrimary]=\"language.code === config.selectedLanguage.code\"\n                (click)=\"selectLanguage(language)\">\n                {{ language.label }} ({{ language.code }})\n            </button>\n        </div>\n    </div>\n</ng-container>\n", styles: [".eui-language-selector{align-items:center;cursor:pointer;display:inline-flex;position:relative}.eui-language-selector:not(.eui-app-toolbar__language-selector){margin-top:var(--eui-base-spacing-xs)}.eui-language-selector:not(.eui-app-toolbar__language-selector) .eui-icon-svg>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-language-selector.eui-app-toolbar__language-selector{margin-top:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-m)}.eui-language-selector.eui-app-toolbar__language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)}.eui-language-selector-button{justify-content:center;position:relative;align-items:center;display:flex;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.eui-language-selector-button:active:not([readonly]),.eui-language-selector-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button [tabindex=\"0\"]:active:not([readonly]),.eui-language-selector-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button__language-code{align-items:center;bottom:50%;display:flex;color:var(--eui-base-color-white);position:absolute;text-transform:uppercase;top:35%;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-language-selector-menu-language-item{padding:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-10);text-align:center;cursor:pointer}.eui-language-selector-menu-language-item:hover{background:var(--eui-base-color-grey-5)}.mat-menu-panel{min-width:8rem!important}.eui-language-selector--empty{display:none}.eui-language-selector--inverted .eui-language-selector-link__language-code{color:var(--eui-base-color-text)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiModalSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-modal-selector', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<h4 *ngIf=\"additionaLanguageRows?.length > 0\">EU official languages</h4>\n<div id=\"eu_languages\" *ngFor=\"let row of languageRows\" class=\"row\">\n    <div *ngFor=\"let language of row\" class=\"col-md-6 mb-2\">\n        <button\n            type=\"button\"\n            e2eAttr=\"eui-language-selector-item_{{ language.code }}\"\n            euiButton\n            euiBlockButton\n            [euiSecondary]=\"language.code !== config.selectedLanguage.code\"\n            [euiPrimary]=\"language.code === config.selectedLanguage.code\"\n            (click)=\"selectLanguage(language)\">\n            {{ language.label }} ({{ language.code }})\n        </button>\n    </div>\n</div>\n<ng-container *ngIf=\"additionaLanguageRows?.length > 0\">\n    <br />\n    <h4>Non-EU Languages</h4>\n    <div id=\"extra_languages\" *ngFor=\"let row of additionaLanguageRows\" class=\"row\">\n        <div *ngFor=\"let language of row\" class=\"col-md-6 mb-2\">\n            <button\n                type=\"button\"\n                e2eAttr=\"eui-language-selector-item_{{ language.code }}\"\n                euiButton\n                euiBlockButton\n                [euiSecondary]=\"language.code !== config.selectedLanguage.code\"\n                [euiPrimary]=\"language.code === config.selectedLanguage.code\"\n                (click)=\"selectLanguage(language)\">\n                {{ language.label }} ({{ language.code }})\n            </button>\n        </div>\n    </div>\n</ng-container>\n", styles: [".eui-language-selector{align-items:center;cursor:pointer;display:inline-flex;position:relative}.eui-language-selector:not(.eui-app-toolbar__language-selector){margin-top:var(--eui-base-spacing-xs)}.eui-language-selector:not(.eui-app-toolbar__language-selector) .eui-icon-svg>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-language-selector.eui-app-toolbar__language-selector{margin-top:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-m)}.eui-language-selector.eui-app-toolbar__language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)}.eui-language-selector-button{justify-content:center;position:relative;align-items:center;display:flex;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.eui-language-selector-button:active:not([readonly]),.eui-language-selector-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button [tabindex=\"0\"]:active:not([readonly]),.eui-language-selector-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button__language-code{align-items:center;bottom:50%;display:flex;color:var(--eui-base-color-white);position:absolute;text-transform:uppercase;top:35%;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-language-selector-menu-language-item{padding:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-10);text-align:center;cursor:pointer}.eui-language-selector-menu-language-item:hover{background:var(--eui-base-color-grey-5)}.mat-menu-panel{min-width:8rem!important}.eui-language-selector--empty{display:none}.eui-language-selector--inverted .eui-language-selector-link__language-code{color:var(--eui-base-color-text)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.EuiDialogService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.EuiDialogService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_COMPONENT_CONFIG]
                 }] }] });
@@ -544,13 +396,13 @@ class EuiLanguageSelectorComponent extends BaseDirective {
     getLanguage(languageCode) {
         return this.languages.find((lang) => lang.code === languageCode);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.EuiDialogService }, { token: i1.EuiAppShellService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiLanguageSelectorComponent, selector: "eui-language-selector", inputs: { hasLanguageSelection: "hasLanguageSelection" }, outputs: { languageSelectorClick: "languageSelectorClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasLanguageSelection\">\n    <button class=\"eui-language-selector-button\" (click)=\"onClick()\">\n        <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n        <span class=\"eui-language-selector-button__language-code\">\n            {{ (appShellService.state$ | async).activeLanguage }}\n        </span>\n    </button>\n</ng-container>\n\n<ng-container *ngIf=\"isShowDropDown && hasLanguageSelection\">\n    <eui-dropdown>\n        <button class=\"eui-language-selector-button\">\n            <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n            <span class=\"eui-language-selector-button__language-code\">\n                {{ (appShellService.state$ | async).activeLanguage }}\n            </span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-language-selector-menu\">\n                <div\n                    *ngFor=\"let language of languages\"\n                    euiDropdownItem\n                    attr.data-e2e=\"eui-language-selector-item_{{ language.code }}\"\n                    class=\"eui-language-selector-menu-language-item\"\n                    (click)=\"onLanguageChanged(language)\">\n                    {{ language.label }} ({{ language.code }})\n                </div>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-container *ngIf=\"isShowModal && hasLanguageSelection\">\n    <button class=\"eui-language-selector-button\" (click)=\"open()\">\n        <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n        <span class=\"eui-language-selector-button__language-code\">\n            {{ (appShellService.state$ | async).activeLanguage }}\n        </span>\n    </button>\n</ng-container>\n", styles: [".eui-language-selector{align-items:center;cursor:pointer;display:inline-flex;position:relative}.eui-language-selector:not(.eui-app-toolbar__language-selector){margin-top:var(--eui-base-spacing-xs)}.eui-language-selector:not(.eui-app-toolbar__language-selector) .eui-icon-svg>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-language-selector.eui-app-toolbar__language-selector{margin-top:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-m)}.eui-language-selector.eui-app-toolbar__language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)}.eui-language-selector-button{justify-content:center;position:relative;align-items:center;display:flex;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.eui-language-selector-button:active:not([readonly]),.eui-language-selector-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button [tabindex=\"0\"]:active:not([readonly]),.eui-language-selector-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button__language-code{align-items:center;bottom:50%;display:flex;color:var(--eui-base-color-white);position:absolute;text-transform:uppercase;top:35%;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-language-selector-menu-language-item{padding:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-10);text-align:center;cursor:pointer}.eui-language-selector-menu-language-item:hover{background:var(--eui-base-color-grey-5)}.mat-menu-panel{min-width:8rem!important}.eui-language-selector--empty{display:none}.eui-language-selector--inverted .eui-language-selector-link__language-code{color:var(--eui-base-color-text)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "component", type: i4$1.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive"] }, { kind: "directive", type: i4$1.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.EuiDialogService }, { token: i1.EuiAppShellService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiLanguageSelectorComponent, selector: "eui-language-selector", inputs: { hasLanguageSelection: "hasLanguageSelection" }, outputs: { languageSelectorClick: "languageSelectorClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasLanguageSelection\">\n    <button class=\"eui-language-selector-button\" (click)=\"onClick()\">\n        <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n        <span class=\"eui-language-selector-button__language-code\">\n            {{ (appShellService.state$ | async).activeLanguage }}\n        </span>\n    </button>\n</ng-container>\n\n<ng-container *ngIf=\"isShowDropDown && hasLanguageSelection\">\n    <eui-dropdown>\n        <button class=\"eui-language-selector-button\">\n            <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n            <span class=\"eui-language-selector-button__language-code\">\n                {{ (appShellService.state$ | async).activeLanguage }}\n            </span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-language-selector-menu\">\n                <div\n                    *ngFor=\"let language of languages\"\n                    euiDropdownItem\n                    attr.data-e2e=\"eui-language-selector-item_{{ language.code }}\"\n                    class=\"eui-language-selector-menu-language-item\"\n                    (click)=\"onLanguageChanged(language)\">\n                    {{ language.label }} ({{ language.code }})\n                </div>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-container *ngIf=\"isShowModal && hasLanguageSelection\">\n    <button class=\"eui-language-selector-button\" (click)=\"open()\">\n        <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n        <span class=\"eui-language-selector-button__language-code\">\n            {{ (appShellService.state$ | async).activeLanguage }}\n        </span>\n    </button>\n</ng-container>\n", styles: [".eui-language-selector{align-items:center;cursor:pointer;display:inline-flex;position:relative}.eui-language-selector:not(.eui-app-toolbar__language-selector){margin-top:var(--eui-base-spacing-xs)}.eui-language-selector:not(.eui-app-toolbar__language-selector) .eui-icon-svg>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-language-selector.eui-app-toolbar__language-selector{margin-top:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-m)}.eui-language-selector.eui-app-toolbar__language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)}.eui-language-selector-button{justify-content:center;position:relative;align-items:center;display:flex;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.eui-language-selector-button:active:not([readonly]),.eui-language-selector-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button [tabindex=\"0\"]:active:not([readonly]),.eui-language-selector-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button__language-code{align-items:center;bottom:50%;display:flex;color:var(--eui-base-color-white);position:absolute;text-transform:uppercase;top:35%;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-language-selector-menu-language-item{padding:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-10);text-align:center;cursor:pointer}.eui-language-selector-menu-language-item:hover{background:var(--eui-base-color-grey-5)}.mat-menu-panel{min-width:8rem!important}.eui-language-selector--empty{display:none}.eui-language-selector--inverted .eui-language-selector-link__language-code{color:var(--eui-base-color-text)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "component", type: i4.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiLanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-language-selector', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!hasLanguageSelection\">\n    <button class=\"eui-language-selector-button\" (click)=\"onClick()\">\n        <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n        <span class=\"eui-language-selector-button__language-code\">\n            {{ (appShellService.state$ | async).activeLanguage }}\n        </span>\n    </button>\n</ng-container>\n\n<ng-container *ngIf=\"isShowDropDown && hasLanguageSelection\">\n    <eui-dropdown>\n        <button class=\"eui-language-selector-button\">\n            <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n            <span class=\"eui-language-selector-button__language-code\">\n                {{ (appShellService.state$ | async).activeLanguage }}\n            </span>\n        </button>\n        <eui-dropdown-content>\n            <div class=\"eui-language-selector-menu\">\n                <div\n                    *ngFor=\"let language of languages\"\n                    euiDropdownItem\n                    attr.data-e2e=\"eui-language-selector-item_{{ language.code }}\"\n                    class=\"eui-language-selector-menu-language-item\"\n                    (click)=\"onLanguageChanged(language)\">\n                    {{ language.label }} ({{ language.code }})\n                </div>\n            </div>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-container *ngIf=\"isShowModal && hasLanguageSelection\">\n    <button class=\"eui-language-selector-button\" (click)=\"open()\">\n        <eui-icon-svg icon=\"eui-ecl-language\" size=\"l\" fillColor=\"white\"></eui-icon-svg>\n        <span class=\"eui-language-selector-button__language-code\">\n            {{ (appShellService.state$ | async).activeLanguage }}\n        </span>\n    </button>\n</ng-container>\n", styles: [".eui-language-selector{align-items:center;cursor:pointer;display:inline-flex;position:relative}.eui-language-selector:not(.eui-app-toolbar__language-selector){margin-top:var(--eui-base-spacing-xs)}.eui-language-selector:not(.eui-app-toolbar__language-selector) .eui-icon-svg>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100)}.eui-language-selector.eui-app-toolbar__language-selector{margin-top:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-m)}.eui-language-selector.eui-app-toolbar__language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)}.eui-language-selector-button{justify-content:center;position:relative;align-items:center;display:flex;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.eui-language-selector-button:active:not([readonly]),.eui-language-selector-button:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button [tabindex=\"0\"]:active:not([readonly]),.eui-language-selector-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.eui-language-selector-button__language-code{align-items:center;bottom:50%;display:flex;color:var(--eui-base-color-white);position:absolute;text-transform:uppercase;top:35%;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-language-selector-menu-language-item{padding:var(--eui-base-spacing-m);border-bottom:1px solid var(--eui-base-color-grey-10);text-align:center;cursor:pointer}.eui-language-selector-menu-language-item:hover{background:var(--eui-base-color-grey-5)}.mat-menu-panel{min-width:8rem!important}.eui-language-selector--empty{display:none}.eui-language-selector--inverted .eui-language-selector-link__language-code{color:var(--eui-base-color-text)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.EuiDialogService }, { type: i1.EuiAppShellService }, { type: i3$1.TranslateService }], propDecorators: { cssClasses: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.EuiDialogService }, { type: i1.EuiAppShellService }, { type: i3$1.TranslateService }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], hasLanguageSelection: [{
@@ -582,13 +434,13 @@ class EuiToolbarLogoComponent {
     onClick() {
         this.router.navigate([this.homeUrl]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarLogoComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarLogoComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: { homeUrl: "homeUrl" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarLogoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-toolbar-logo', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { class: [{
+        }], ctorParameters: () => [{ type: i1$3.Router }], propDecorators: { class: [{
                 type: HostBinding
             }], homeUrl: [{
                 type: Input
@@ -602,7 +454,7 @@ class EuiToolbarAppComponent {
         this.class = 'eui-toolbar-app';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: { appName: "appName", appSubTitle: "appSubTitle" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"appSubTitle; else noSubTitle\">\n    <div class=\"eui-toolbar-app__name\">\n        {{ appName }}\n    </div>\n    <div class=\"eui-toolbar-app__subTitle\">\n        {{ appSubTitle }}\n    </div>\n</ng-container>\n\n<ng-template #noSubTitle>\n    {{ appName }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: { appName: "appName", appSubTitle: "appSubTitle" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"appSubTitle; else noSubTitle\">\n    <div class=\"eui-toolbar-app__name\">\n        {{ appName }}\n    </div>\n    <div class=\"eui-toolbar-app__subTitle\">\n        {{ appSubTitle }}\n    </div>\n</ng-container>\n\n<ng-template #noSubTitle>\n    {{ appName }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarAppComponent, decorators: [{
             type: Component,
@@ -635,7 +487,7 @@ class EuiToolbarComponent {
         this.string = 'eui-toolbar';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarComponent, selector: "eui-toolbar", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "hasLanguageSelector", first: true, predicate: i0.forwardRef(() => EuiLanguageSelectorComponent), descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlock\">\n    <div class=\"eui-toolbar__left\">\n        <eui-toolbar-logo *ngIf=\"(asService.state$ | async).hasHeaderLogo\"></eui-toolbar-logo>\n\n        <eui-toolbar-environment *ngIf=\"(asService.state$ | async).hasHeaderEnvironment\">\n            {{ (asService.state$ | async).environmentValue }}\n        </eui-toolbar-environment>\n\n        <eui-toolbar-app *ngIf=\"(asService.state$ | async).appName\" appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n</ng-container>\n\n<ng-template #elseBlock>\n    <ng-container *ngIf=\"(asService.state$ | async).hasHeader; else elseBlockToolbarContent\">\n        <ng-content select=\"eui-toolbar-menu\"></ng-content>\n    </ng-container>\n\n    <ng-template #elseBlockToolbarContent>\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        </div>\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n</ng-template>\n\n<ng-template #toolbarCenter>\n    <!-- <div class=\"eui-toolbar__center\"> -->\n        <ng-content select=\"eui-toolbar-center\"></ng-content>\n    <!-- </div> -->\n</ng-template>\n\n<ng-template #toolbarItems>\n    <div class=\"eui-toolbar__right\">\n        <ng-content select=\"eui-toolbar-items\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <div class=\"eui-toolbar__language-selector\">\n            <ng-content select=\"eui-language-selector\"></ng-content>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding:0 var(--eui-base-spacing-m);position:relative;width:100%;justify-content:space-between;background-color:var(--eui-base-color-primary-100);height:var(--eui-app-toolbar-height);color:var(--eui-base-color-white)}.eui-toolbar__left{display:flex;align-items:center;flex:1;text-align:left}.eui-toolbar__center{display:block;text-align:center}.eui-toolbar__right{display:flex;align-items:center;margin-left:auto;flex:1}.eui-toolbar-items{align-items:center;display:flex;position:relative;margin-left:var(--eui-base-spacing-m)}.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,.eui-toolbar-item-user-profile{cursor:pointer;display:inline-flex;margin-left:var(--eui-base-spacing-m)}.eui-toolbar-logo{background-image:url(data:image/png;base64,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);background-size:cover;cursor:pointer;flex:0 0 auto;height:40px;outline:1px solid var(--eui-base-color-grey-20);outline-offset:-1px;width:60px}.eui-toolbar-app{font-size:var(--eui-base-font-size-3xl);padding-left:var(--eui-base-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font-size:var(--eui-base-font-size-2xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font-size:var(--eui-base-font-size-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white);cursor:pointer;font-size:var(--eui-base-font-size-s);left:.5rem;pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-t-ec .eui-toolbar-logo{background-image:url(data:image/png;base64,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);height:39px;margin-top:-5px;outline:none;width:83px}.eui-t-ec .eui-toolbar-app{margin-top:10px}.eui-toolbar__language-selector{margin-left:var(--eui-base-spacing-s)}.eui-toolbar__language-selector .eui-language-selector .eui-icon-svg>svg{color:var(--eui-base-color-white)!important;fill:var(--eui-base-color-white)!important}.eui-toolbar__language-selector .eui-language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)!important}@media screen and (max-width: 767px){.eui-toolbar-logo,.eui-toolbar-environment{display:none}.eui-toolbar-app{display:block;font-size:var(--eui-base-font-size-l);padding-left:0}.eui-t-ec .eui-toolbar-app{margin-top:0}}.eui-toolbar-menu{display:flex;height:var(--eui-app-toolbar-height);width:100%}.eui-toolbar-menu-content{display:grid;height:var(--eui-app-toolbar-height);list-style-type:none;margin:0;padding:0;position:relative;z-index:var(--eui-base-z-index-nav)}.eui-toolbar-menu-content ul:not(.show){display:flex;list-style:none;width:100%;z-index:calc(var(--eui-base-z-index-sidebar) + 1)}.eui-toolbar-menu-content ul,.eui-toolbar-menu-content ul li,.eui-toolbar-menu-content ul li a{border:0;border-bottom:2px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-white);display:block;height:var(--eui-app-toolbar-height);line-height:var(--eui-base-spacing-l);margin:0;max-height:var(--eui-app-toolbar-height);min-width:0;padding:0;position:relative;text-decoration:none}.eui-toolbar-menu-content ul.disabled,.eui-toolbar-menu-content ul li.disabled,.eui-toolbar-menu-content ul li a.disabled{color:var(--eui-base-color-grey-50)!important;font-style:italic}.eui-toolbar-menu-content ul.hidden,.eui-toolbar-menu-content ul li.hidden,.eui-toolbar-menu-content ul li a.hidden{display:none!important}.eui-toolbar-menu-content ul:hover,.eui-toolbar-menu-content ul li:hover,.eui-toolbar-menu-content ul li a:hover{background-color:var(--eui-base-color-primary-100);text-decoration:none!important}.eui-toolbar-menu-content:after,.eui-toolbar-menu-content>ul:after{clear:both;content:\".\";display:block;height:0;line-height:0;visibility:hidden}.eui-toolbar-menu-content>ul>li{border-right:1px ridge rgba(255,255,255,.25);box-sizing:border-box;display:inline-block;min-width:60px}.eui-toolbar-menu-content>ul>li:last-child{border-right:none}.eui-toolbar-menu-content>ul>li>a{border-bottom:3px solid transparent;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-xs);text-align:center;text-transform:uppercase;transition:color 0s linear,background-color .3s linear}.eui-toolbar-menu-content>ul>li>a:hover,.eui-toolbar-menu-content>ul>li>a:focus{border-color:var(--eui-base-color-grey-50)!important}.eui-toolbar-menu-content>ul>li>a:hover.disabled,.eui-toolbar-menu-content>ul>li>a:focus.disabled{border-bottom:0 transparent}.eui-toolbar-menu-content>ul>li>a:not(.icon-home-link){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-menu-content>ul>li.selected>a,.eui-toolbar-menu-content>ul>li:hover>a{background-color:var(--eui-base-color-accent-100);border-bottom:3px solid var(--eui-base-color-accent-110);color:var(--eui-base-color-black)!important}.eui-toolbar-menu-content>ul>li.selected>a .eui-icon-svg>svg,.eui-toolbar-menu-content>ul>li:hover>a .eui-icon-svg>svg{color:var(--eui-base-color-grey-100);fill:var(--eui-base-color-grey-100)}.eui-toolbar-menu-content>ul>li.selected>a.disabled,.eui-toolbar-menu-content>ul>li:hover>a.disabled{background-color:transparent!important;border-bottom:0;border-left:0;color:var(--eui-base-color-grey-50)!important;cursor:not-allowed;font-style:italic}.eui-toolbar-menu-content ul ul{left:-9999px;position:absolute;z-index:var(--eui-base-z-index-nav)}.eui-toolbar-menu-content li:hover>ul.show,.eui-toolbar-menu-content li:focus-within>ul.showOnEnter{left:auto}.eui-toolbar-menu-content .showOnEnter a:focus{border-color:var(--eui-base-color-grey-10)}.eui-toolbar-menu-content ul.show .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white);height:1.25rem;width:1.25rem}.eui-toolbar-menu-content ul ul ul{margin-left:100%;top:0;z-index:var(--eui-base-z-index-nav)}.eui-toolbar-menu-content ul ul li{height:0;transition:height .2s ease-in-out}.eui-toolbar-menu-content ul ul li.child{background:var(--eui-base-color-primary-110);height:auto;min-height:var(--eui-base-spacing-3xl)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__icon{margin-right:var(--eui-base-spacing-xs)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__label{padding:var(--eui-base-spacing-2xs);position:relative}.eui-toolbar-menu-content ul ul li.hidden{display:none!important}.eui-toolbar-menu-content ul ul li a,.eui-toolbar-menu-content ul ul li h2{align-items:center;background:var(--eui-base-color-primary-110);display:flex;line-height:1.25;min-height:var(--eui-base-spacing-3xl);min-width:260px;padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);text-decoration:none;transition:color .2s ease-in-out}.eui-toolbar-menu-content ul ul li h2{color:var(--eui-base-color-accent-100);font-size:var(--eui-base-font-size-m);padding-left:var(--eui-base-spacing-xs);padding-top:var(--eui-base-spacing-s)}.eui-toolbar-menu-content ul ul li a{border-left:3px solid transparent;padding-left:var(--eui-base-spacing-2xs)}.eui-toolbar-menu-content ul ul li:hover>a,.eui-toolbar-menu-content ul ul li a:hover{border-left:3px solid var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-100)!important}.eui-toolbar-menu-content ul ul li.has-sub>a:after{border-bottom:2px solid var(--eui-base-color-grey-15);border-right:2px solid var(--eui-base-color-grey-15);content:\"\";height:10px;position:absolute;right:10px;top:var(--eui-base-spacing-s);transform:rotate(-45deg);width:10px}.eui-toolbar-menu-content ul ul li a.disabled{color:var(--eui-base-color-grey-50)!important;cursor:default;font-style:italic}.eui-toolbar-menu-content ul ul li a.disabled:hover{border-left:0}.eui-toolbar-menu-content ul ul li.separator{background-color:var(--eui-base-color-grey-5)!important;height:1px!important}.eui-toolbar-menu-content .icon-home-link span.ux-icon,.eui-toolbar-menu-content .icon-home-link span.eui-icon{font-size:var(--eui-font-size-3xl);line-height:var(--eui-base-spacing-m)}.eui-toolbar-menu-content .icon-home-link .eui-icon-svg>svg{height:1.5rem;width:1.5rem}.eui-toolbar-menu-content .icon-menu-item.selected .icon-home-link:after,.eui-toolbar-menu-content .icon-menu-item:hover .icon-home-link:after{border-right:0}.eui-toolbar-menu-content .icon-menu-item.selected .icon-home-link:before,.eui-toolbar-menu-content .icon-menu-item:hover .icon-home-link:before{border-left:0}.eui-toolbar-menu-content .eui-toolbar-menu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#nav-bar.sidebar-toggle-with-top-menu #top-menu{left:calc(var(--eui-layout-sidebar-width) + var(--eui-base-font-size));position:absolute}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: ["homeUrl"] }, { kind: "component", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: ["appName", "appSubTitle"] }, { kind: "component", type: EuiToolbarEnvironmentComponent, selector: "eui-toolbar-environment" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarComponent, selector: "eui-toolbar", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "hasLanguageSelector", first: true, predicate: i0.forwardRef(() => EuiLanguageSelectorComponent), descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlock\">\n    <div class=\"eui-toolbar__left\">\n        <eui-toolbar-logo *ngIf=\"(asService.state$ | async).hasHeaderLogo\"></eui-toolbar-logo>\n\n        <eui-toolbar-environment *ngIf=\"(asService.state$ | async).hasHeaderEnvironment\">\n            {{ (asService.state$ | async).environmentValue }}\n        </eui-toolbar-environment>\n\n        <eui-toolbar-app *ngIf=\"(asService.state$ | async).appName\" appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n</ng-container>\n\n<ng-template #elseBlock>\n    <ng-container *ngIf=\"(asService.state$ | async).hasHeader; else elseBlockToolbarContent\">\n        <ng-content select=\"eui-toolbar-menu\"></ng-content>\n    </ng-container>\n\n    <ng-template #elseBlockToolbarContent>\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        </div>\n    </ng-template>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n</ng-template>\n\n<ng-template #toolbarCenter>\n    <!-- <div class=\"eui-toolbar__center\"> -->\n        <ng-content select=\"eui-toolbar-center\"></ng-content>\n    <!-- </div> -->\n</ng-template>\n\n<ng-template #toolbarItems>\n    <div class=\"eui-toolbar__right\">\n        <ng-content select=\"eui-toolbar-items\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <div class=\"eui-toolbar__language-selector\">\n            <ng-content select=\"eui-language-selector\"></ng-content>\n        </div>\n    </ng-container>\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding:0 var(--eui-base-spacing-m);position:relative;width:100%;justify-content:space-between;background-color:var(--eui-base-color-primary-100);height:var(--eui-app-toolbar-height);color:var(--eui-base-color-white)}.eui-toolbar__left{display:flex;align-items:center;flex:1;text-align:left}.eui-toolbar__center{display:block;text-align:center}.eui-toolbar__right{display:flex;align-items:center;margin-left:auto;flex:1}.eui-toolbar-items{align-items:center;display:flex;position:relative;margin-left:var(--eui-base-spacing-m)}.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,.eui-toolbar-item-user-profile{cursor:pointer;display:inline-flex;margin-left:var(--eui-base-spacing-m)}.eui-toolbar-logo{background-image:url(data:image/png;base64,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);background-size:cover;cursor:pointer;flex:0 0 auto;height:40px;outline:1px solid var(--eui-base-color-grey-20);outline-offset:-1px;width:60px}.eui-toolbar-app{font-size:var(--eui-base-font-size-3xl);padding-left:var(--eui-base-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font-size:var(--eui-base-font-size-2xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font-size:var(--eui-base-font-size-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white);cursor:pointer;font-size:var(--eui-base-font-size-s);left:.5rem;pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-t-ec .eui-toolbar-logo{background-image:url(data:image/png;base64,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);height:39px;margin-top:-5px;outline:none;width:83px}.eui-t-ec .eui-toolbar-app{margin-top:10px}.eui-toolbar__language-selector{margin-left:var(--eui-base-spacing-s)}.eui-toolbar__language-selector .eui-language-selector .eui-icon-svg>svg{color:var(--eui-base-color-white)!important;fill:var(--eui-base-color-white)!important}.eui-toolbar__language-selector .eui-language-selector .eui-language-selector-button__language-code{color:var(--eui-base-color-primary-100)!important}@media screen and (max-width: 767px){.eui-toolbar-logo,.eui-toolbar-environment{display:none}.eui-toolbar-app{display:block;font-size:var(--eui-base-font-size-l);padding-left:0}.eui-t-ec .eui-toolbar-app{margin-top:0}}.eui-toolbar-menu{display:flex;height:var(--eui-app-toolbar-height);width:100%}.eui-toolbar-menu-content{display:grid;height:var(--eui-app-toolbar-height);list-style-type:none;margin:0;padding:0;position:relative;z-index:var(--eui-base-z-index-nav)}.eui-toolbar-menu-content ul:not(.show){display:flex;list-style:none;width:100%;z-index:calc(var(--eui-base-z-index-sidebar) + 1)}.eui-toolbar-menu-content ul,.eui-toolbar-menu-content ul li,.eui-toolbar-menu-content ul li a{border:0;border-bottom:2px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-white);display:block;height:var(--eui-app-toolbar-height);line-height:var(--eui-base-spacing-l);margin:0;max-height:var(--eui-app-toolbar-height);min-width:0;padding:0;position:relative;text-decoration:none}.eui-toolbar-menu-content ul.disabled,.eui-toolbar-menu-content ul li.disabled,.eui-toolbar-menu-content ul li a.disabled{color:var(--eui-base-color-grey-50)!important;font-style:italic}.eui-toolbar-menu-content ul.hidden,.eui-toolbar-menu-content ul li.hidden,.eui-toolbar-menu-content ul li a.hidden{display:none!important}.eui-toolbar-menu-content ul:hover,.eui-toolbar-menu-content ul li:hover,.eui-toolbar-menu-content ul li a:hover{background-color:var(--eui-base-color-primary-100);text-decoration:none!important}.eui-toolbar-menu-content:after,.eui-toolbar-menu-content>ul:after{clear:both;content:\".\";display:block;height:0;line-height:0;visibility:hidden}.eui-toolbar-menu-content>ul>li{border-right:1px ridge rgba(255,255,255,.25);box-sizing:border-box;display:inline-block;min-width:60px}.eui-toolbar-menu-content>ul>li:last-child{border-right:none}.eui-toolbar-menu-content>ul>li>a{border-bottom:3px solid transparent;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-xs);text-align:center;text-transform:uppercase;transition:color 0s linear,background-color .3s linear}.eui-toolbar-menu-content>ul>li>a:hover,.eui-toolbar-menu-content>ul>li>a:focus{border-color:var(--eui-base-color-grey-50)!important}.eui-toolbar-menu-content>ul>li>a:hover.disabled,.eui-toolbar-menu-content>ul>li>a:focus.disabled{border-bottom:0 transparent}.eui-toolbar-menu-content>ul>li>a:not(.icon-home-link){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-menu-content>ul>li.selected>a,.eui-toolbar-menu-content>ul>li:hover>a{background-color:var(--eui-base-color-accent-100);border-bottom:3px solid var(--eui-base-color-accent-110);color:var(--eui-base-color-black)!important}.eui-toolbar-menu-content>ul>li.selected>a .eui-icon-svg>svg,.eui-toolbar-menu-content>ul>li:hover>a .eui-icon-svg>svg{color:var(--eui-base-color-grey-100);fill:var(--eui-base-color-grey-100)}.eui-toolbar-menu-content>ul>li.selected>a.disabled,.eui-toolbar-menu-content>ul>li:hover>a.disabled{background-color:transparent!important;border-bottom:0;border-left:0;color:var(--eui-base-color-grey-50)!important;cursor:not-allowed;font-style:italic}.eui-toolbar-menu-content ul ul{left:-9999px;position:absolute;z-index:var(--eui-base-z-index-nav)}.eui-toolbar-menu-content li:hover>ul.show,.eui-toolbar-menu-content li:focus-within>ul.showOnEnter{left:auto}.eui-toolbar-menu-content .showOnEnter a:focus{border-color:var(--eui-base-color-grey-10)}.eui-toolbar-menu-content ul.show .eui-icon-svg>svg{color:var(--eui-base-color-white);fill:var(--eui-base-color-white);height:1.25rem;width:1.25rem}.eui-toolbar-menu-content ul ul ul{margin-left:100%;top:0;z-index:var(--eui-base-z-index-nav)}.eui-toolbar-menu-content ul ul li{height:0;transition:height .2s ease-in-out}.eui-toolbar-menu-content ul ul li.child{background:var(--eui-base-color-primary-110);height:auto;min-height:var(--eui-base-spacing-3xl)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__icon{margin-right:var(--eui-base-spacing-xs)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__label{padding:var(--eui-base-spacing-2xs);position:relative}.eui-toolbar-menu-content ul ul li.hidden{display:none!important}.eui-toolbar-menu-content ul ul li a,.eui-toolbar-menu-content ul ul li h2{align-items:center;background:var(--eui-base-color-primary-110);display:flex;line-height:1.25;min-height:var(--eui-base-spacing-3xl);min-width:260px;padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-xs);text-decoration:none;transition:color .2s ease-in-out}.eui-toolbar-menu-content ul ul li h2{color:var(--eui-base-color-accent-100);font-size:var(--eui-base-font-size-m);padding-left:var(--eui-base-spacing-xs);padding-top:var(--eui-base-spacing-s)}.eui-toolbar-menu-content ul ul li a{border-left:3px solid transparent;padding-left:var(--eui-base-spacing-2xs)}.eui-toolbar-menu-content ul ul li:hover>a,.eui-toolbar-menu-content ul ul li a:hover{border-left:3px solid var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-100)!important}.eui-toolbar-menu-content ul ul li.has-sub>a:after{border-bottom:2px solid var(--eui-base-color-grey-15);border-right:2px solid var(--eui-base-color-grey-15);content:\"\";height:10px;position:absolute;right:10px;top:var(--eui-base-spacing-s);transform:rotate(-45deg);width:10px}.eui-toolbar-menu-content ul ul li a.disabled{color:var(--eui-base-color-grey-50)!important;cursor:default;font-style:italic}.eui-toolbar-menu-content ul ul li a.disabled:hover{border-left:0}.eui-toolbar-menu-content ul ul li.separator{background-color:var(--eui-base-color-grey-5)!important;height:1px!important}.eui-toolbar-menu-content .icon-home-link span.ux-icon,.eui-toolbar-menu-content .icon-home-link span.eui-icon{font-size:var(--eui-font-size-3xl);line-height:var(--eui-base-spacing-m)}.eui-toolbar-menu-content .icon-home-link .eui-icon-svg>svg{height:1.5rem;width:1.5rem}.eui-toolbar-menu-content .icon-menu-item.selected .icon-home-link:after,.eui-toolbar-menu-content .icon-menu-item:hover .icon-home-link:after{border-right:0}.eui-toolbar-menu-content .icon-menu-item.selected .icon-home-link:before,.eui-toolbar-menu-content .icon-menu-item:hover .icon-home-link:before{border-left:0}.eui-toolbar-menu-content .eui-toolbar-menu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#nav-bar.sidebar-toggle-with-top-menu #top-menu{left:calc(var(--eui-layout-sidebar-width) + var(--eui-base-font-size));position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: ["homeUrl"] }, { kind: "component", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: ["appName", "appSubTitle"] }, { kind: "component", type: EuiToolbarEnvironmentComponent, selector: "eui-toolbar-environment" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarComponent, decorators: [{
             type: Component,
@@ -825,7 +677,7 @@ class EuiToolbarMenuComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarMenuComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarMenuComponent, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <li *ngFor=\"let link of items\" [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n            <a\n                *ngIf=\"!link.url\"\n                [class.disabled]=\"link.disabled\"\n                [tabindex]=\"!link.disabled ? 0 : -1\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg *ngIf=\"link.children\" icon=\"eui-caret-down\" [fillColor]=\"link.active ? 'grey-100' : 'white'\" size=\"s\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n            <a\n                *ngIf=\"link.url\"\n                [routerLink]=\"link.url\"\n                [class.disabled]=\"link.disabled\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg\n                        *ngIf=\"link.children\"\n                        icon=\"eui-caret-down\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-ml-xs\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n\n            <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                <li\n                    *ngFor=\"let childLink of link.children\"\n                    class=\"child\"\n                    [class.has-sub]=\"childLink?.children\"\n                    [class.separator]=\"childLink.isSeparator\">\n                    <a\n                        *ngIf=\"!childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n                    <a\n                        *ngIf=\"childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        [routerLink]=\"childLink.url\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n\n                    <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"childLink.children\">\n                        <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\" *ngFor=\"let childSubLink of childLink.children\">\n                            <a\n                                *ngIf=\"childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                [routerLink]=\"childSubLink.url\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                            <a\n                                *ngIf=\"!childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                        </li>\n                    </ul>\n                </li>\n            </ul>\n        </li>\n    </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiToolbarMenuComponent, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <li *ngFor=\"let link of items\" [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n            <a\n                *ngIf=\"!link.url\"\n                [class.disabled]=\"link.disabled\"\n                [tabindex]=\"!link.disabled ? 0 : -1\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg *ngIf=\"link.children\" icon=\"eui-caret-down\" [fillColor]=\"link.active ? 'grey-100' : 'white'\" size=\"s\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n            <a\n                *ngIf=\"link.url\"\n                [routerLink]=\"link.url\"\n                [class.disabled]=\"link.disabled\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg\n                        *ngIf=\"link.children\"\n                        icon=\"eui-caret-down\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-ml-xs\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n\n            <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                <li\n                    *ngFor=\"let childLink of link.children\"\n                    class=\"child\"\n                    [class.has-sub]=\"childLink?.children\"\n                    [class.separator]=\"childLink.isSeparator\">\n                    <a\n                        *ngIf=\"!childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n                    <a\n                        *ngIf=\"childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        [routerLink]=\"childLink.url\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n\n                    <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"childLink.children\">\n                        <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\" *ngFor=\"let childSubLink of childLink.children\">\n                            <a\n                                *ngIf=\"childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                [routerLink]=\"childSubLink.url\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                            <a\n                                *ngIf=\"!childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                        </li>\n                    </ul>\n                </li>\n            </ul>\n        </li>\n    </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiToolbarMenuComponent, decorators: [{
             type: Component,
@@ -853,7 +705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$3 = [
+const COMPONENTS$4 = [
     EuiToolbarComponent,
     EuiToolbarItemComponent,
     EuiToolbarItemsComponent,
@@ -903,51 +755,520 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                         EuiLanguageSelectorModule,
                         TranslateModule,
                     ],
-                    declarations: [...COMPONENTS$3],
-                    exports: [...COMPONENTS$3],
+                    declarations: [...COMPONENTS$4],
+                    exports: [...COMPONENTS$4],
                 }]
         }] });
 
-class EuiAppToolbarComponent {
-    get hasLanguageSelector() {
-        return this._hasLanguageSelector;
-    }
-    set hasLanguageSelector(value) {
-        this._hasLanguageSelector = coerceBooleanProperty(value);
+class EuiUserProfileComponent {
+    get cssClasses() {
+        return this.getCssClasses();
     }
-    constructor(asService) {
-        this.asService = asService;
-        this.string = 'eui-app-toolbar';
-        this.role = 'banner';
-        this._hasLanguageSelector = true;
+    constructor(toolbarItemParent, userService, baseStatesDirective) {
+        this.userService = userService;
+        this.baseStatesDirective = baseStatesDirective;
+        this.isOnline = true;
+        this.welcomeLabel = 'Welcome';
+        this.impersonateLabel = 'impersonating';
+        this.hasMenu = true;
+        this.isShowUserInfos = true;
+        this.hasWelcomeLabel = true;
+        this.isShowAvatarInitials = false;
+        this.hasTabNavigation = false;
+        this.isReverse = false;
+        this.hasToggle = false;
+        this.unsubscribeSubject$ = new Subject();
+        this.toolbarItemParent = toolbarItemParent;
     }
     ngOnInit() {
-        this.asService.activateToolbar();
+        this.userService
+            .getState()
+            .pipe(takeUntil(this.unsubscribeSubject$))
+            .subscribe((state) => {
+            if (state) {
+                this.userState = state;
+                const firstNameInitial = state.firstName?.substring(0, 1).toUpperCase();
+                const lastNameInitial = state.lastName?.substring(0, 1).toUpperCase();
+                this.avatarInitials = `${firstNameInitial}${lastNameInitial}`;
+            }
+        });
+    }
+    ngAfterContentInit() {
+        if (this.toolbarItemParent) {
+            this.baseStatesDirective.euiSizeS = true;
+            this.baseStatesDirective.euiInverted = true;
+        }
     }
     ngOnDestroy() {
-        this.asService.setState({
-            ...this.asService.state,
-            hasToolbar: false,
-        });
-        document.documentElement.style.removeProperty('--eui-app-toolbar-height');
+        this.unsubscribeSubject$.next();
+        this.unsubscribeSubject$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppToolbarComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: { hasLanguageSelector: "hasLanguageSelector" }, host: { properties: { "class": "this.string", "attr.role": "this.role" } }, ngImport: i0, template: "<!--Only render the toggle if there is a rendered sidebar in the DOM, otherwise it doesn't make sense. -->\n<eui-sidebar-toggle *ngIf=\"asService.getState('hasSidebar') | async\" class=\"eui-app-toolbar__sidebar-toggle\"> </eui-sidebar-toggle>\n\n<ng-content></ng-content>\n\n<ng-container\n    *ngIf=\"\n        !(asService.getState('hasHeader') | async | coerceBool) ||\n        ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile)\n    \">\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <eui-language-selector styleClass=\"eui-app-toolbar__language-selector\"> </eui-language-selector>\n    </ng-container>\n</ng-container>\n", styles: [".eui-app-toolbar{align-items:center;background:var(--eui-base-color-primary-100);color:var(--eui-base-color-white);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));transition:top .1s ease,left .1s ease-in,width .1s ease-in;z-index:var(--eui-base-z-index-nav)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-base-spacing-xs)}.eui-app-toolbar__language-selector{margin-left:auto}.eui-app-toolbar__language-selector .eui-language-selector-link__icon{color:var(--eui-base-color-white);font-size:var(--eui-base-icon-size-l)}.eui-app-toolbar__language-selector .eui-language-selector-link__language-code{color:var(--eui-base-color-primary-100)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-base-spacing-m) + 2px)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr"] }, { kind: "component", type: EuiLanguageSelectorComponent, selector: "eui-language-selector", inputs: ["hasLanguageSelection"], outputs: ["languageSelectorClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.EuiCoerceBooleanPipe, name: "coerceBool" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    closeDropdown() {
+        this.dropdown.closeDropdown();
+    }
+    getCssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('eui-user-profile'),
+            this.isReverse ? 'eui-user-profile--reverse' : '',
+        ].join(' ').trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileComponent, deps: [{ token: forwardRef(() => EuiToolbarItemComponent), host: true, optional: true }, { token: i1.UserService }, { token: i2$1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: "hasMenu", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation", isReverse: "isReverse", hasToggle: "hasToggle" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2$1.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-subinfos]=\"subInfos && !hasWelcomeLabel\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasToggle\">\n                    <eui-badge euiSecondary>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"xs\" fillColor=\"white\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90)}.eui-user-profile__infos--no-subinfos{display:flex}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-base-spacing-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppToolbarComponent, decorators: [{
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "hasMenu", void 0);
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "isShowUserInfos", void 0);
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "hasWelcomeLabel", void 0);
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "isShowAvatarInitials", void 0);
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "hasTabNavigation", void 0);
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "isReverse", void 0);
+__decorate([
+    coerceBoolean
+], EuiUserProfileComponent.prototype, "hasToggle", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-app-toolbar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<!--Only render the toggle if there is a rendered sidebar in the DOM, otherwise it doesn't make sense. -->\n<eui-sidebar-toggle *ngIf=\"asService.getState('hasSidebar') | async\" class=\"eui-app-toolbar__sidebar-toggle\"> </eui-sidebar-toggle>\n\n<ng-content></ng-content>\n\n<ng-container\n    *ngIf=\"\n        !(asService.getState('hasHeader') | async | coerceBool) ||\n        ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile)\n    \">\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <eui-language-selector styleClass=\"eui-app-toolbar__language-selector\"> </eui-language-selector>\n    </ng-container>\n</ng-container>\n", styles: [".eui-app-toolbar{align-items:center;background:var(--eui-base-color-primary-100);color:var(--eui-base-color-white);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));transition:top .1s ease,left .1s ease-in,width .1s ease-in;z-index:var(--eui-base-z-index-nav)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-base-spacing-xs)}.eui-app-toolbar__language-selector{margin-left:auto}.eui-app-toolbar__language-selector .eui-language-selector-link__icon{color:var(--eui-base-color-white);font-size:var(--eui-base-icon-size-l)}.eui-app-toolbar__language-selector .eui-language-selector-link__language-code{color:var(--eui-base-color-primary-100)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-base-spacing-m) + 2px)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { string: [{
+            args: [{ selector: 'eui-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euiSizeS',
+                                'euiInverted',
+                            ],
+                        },
+                    ], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-subinfos]=\"subInfos && !hasWelcomeLabel\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasToggle\">\n                    <eui-badge euiSecondary>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"xs\" fillColor=\"white\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90)}.eui-user-profile__infos--no-subinfos{display:flex}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-base-spacing-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => EuiToolbarItemComponent)]
+                }] }, { type: i1.UserService }, { type: i2$1.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], hasLanguageSelector: [{
-                type: Input
-            }] } });
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], welcomeLabel: [{
+                type: Input
+            }], impersonateLabel: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], subInfos: [{
+                type: Input
+            }], hasMenu: [{
+                type: Input
+            }], isShowUserInfos: [{
+                type: Input
+            }], hasWelcomeLabel: [{
+                type: Input
+            }], isShowAvatarInitials: [{
+                type: Input
+            }], hasTabNavigation: [{
+                type: Input
+            }], isReverse: [{
+                type: Input
+            }], hasToggle: [{
+                type: Input
+            }] } });
+
+class EuiUserProfileMenuItemComponent {
+    constructor(element) {
+        this.element = element;
+        this.class = 'eui-user-profile-menu-item';
+        this.tabindex = '-1';
+        this.role = 'menuitem';
+    }
+    focus() {
+        this.element.nativeElement.focus();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileMenuItemComponent, selector: "eui-user-profile-menu-item", inputs: { styleClass: "styleClass" }, host: { properties: { "class": "this.class", "attr.tabindex": "this.tabindex", "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-user-profile-menu-item', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
+                type: HostBinding
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], styleClass: [{
+                type: Input
+            }] } });
+
+class EuiUserProfileMenuComponent {
+    constructor(dropdownService) {
+        this.dropdownService = dropdownService;
+        this.class = 'eui-user-profile-menu';
+        this.role = 'menu';
+        this.destroy$ = new Subject();
+    }
+    onKeydown(event) {
+        this.focusKeyManager.onKeydown(event);
+    }
+    ngAfterContentInit() {
+        this.dropdownService.isDropdownOpen.pipe(takeUntil(this.destroy$)).subscribe((isOpen) => {
+            if (isOpen) {
+                this.focusKeyManager = new FocusKeyManager(this.items).withWrap();
+                this.focusKeyManager.setFirstItemActive();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuComponent, deps: [{ token: i4.EuiDropdownService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileMenuComponent, selector: "eui-user-profile-menu", host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiUserProfileMenuItemComponent) }], ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-user-profile-menu', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i4.EuiDropdownService }], propDecorators: { class: [{
+                type: HostBinding
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], items: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EuiUserProfileMenuItemComponent)]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class EuiUserProfileCardComponent {
+    get cssClasses() {
+        return 'eui-user-profile-card';
+    }
+    constructor(userService) {
+        this.userService = userService;
+        this.isOnline = true;
+        this.impersonateLabel = 'impersonating';
+        this.showDetailsLabel = 'Show profile details';
+        this.isShowAvatarInitials = false;
+        this.showProfileInfo = new EventEmitter();
+        this.closeProfileMenu = new EventEmitter();
+        this.unsubscribeSubject$ = new Subject();
+    }
+    ngOnInit() {
+        this.userService
+            .getState()
+            .pipe(takeUntil(this.unsubscribeSubject$))
+            .subscribe((state) => {
+            if (state) {
+                const firstNameInitial = state.firstName?.substring(0, 1).toUpperCase();
+                const lastNameInitial = state.lastName?.substring(0, 1).toUpperCase();
+                this.avatarInitials = `${firstNameInitial}${lastNameInitial}`;
+                this.userState = state;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeSubject$.next();
+        this.unsubscribeSubject$.complete();
+    }
+    onShowInfoClick() {
+        this.showProfileInfo.emit();
+    }
+    onClose() {
+        this.closeProfileMenu.emit();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileCardComponent, deps: [{ token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileCardComponent, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: "isShowAvatarInitials" }, outputs: { showProfileInfo: "showProfileInfo", closeProfileMenu: "closeProfileMenu" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n    <div class=\"eui-user-profile-card__avatar-wrapper\">\n        <eui-avatar euiSizeL euiInfo>\n            <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                {{ avatarInitials }}\n            </eui-avatar-text>\n            <ng-template #noAvatarInitials>\n                <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n            </ng-template>\n        </eui-avatar>\n    </div>\n    <div class=\"eui-user-profile-card__userInfos\">\n        <div class=\"eui-u-font-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n        <div *ngIf=\"userState.function\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.function }}\n        </div>\n        <div *ngIf=\"userState.organisation && userState.organisation.code\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.organisation.code }}\n        </div>\n    </div>\n    <div class=\"eui-user-profile-card__main-wrapper-right-content\">\n        <a class=\"eui-u-text-link\" tabindex=\"0\" (click)=\"onClose()\">close</a>\n        <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto eui-u-mt-m\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n            <eui-icon-svg icon=\"eui-info\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-container *ngIf=\"userState?.impersonatingUser\">\n    <div class=\"eui-user-profile-card__impersonateInfos\">\n        <div>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName }}</div>\n        <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n        <div class=\"eui-u-mt-2xs\">\n            <strong>{{ userState?.fullName }}</strong>\n        </div>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+__decorate([
+    coerceBoolean
+], EuiUserProfileCardComponent.prototype, "isShowAvatarInitials", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-user-profile-card', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n    <div class=\"eui-user-profile-card__avatar-wrapper\">\n        <eui-avatar euiSizeL euiInfo>\n            <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                {{ avatarInitials }}\n            </eui-avatar-text>\n            <ng-template #noAvatarInitials>\n                <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n            </ng-template>\n        </eui-avatar>\n    </div>\n    <div class=\"eui-user-profile-card__userInfos\">\n        <div class=\"eui-u-font-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n        <div *ngIf=\"userState.function\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.function }}\n        </div>\n        <div *ngIf=\"userState.organisation && userState.organisation.code\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.organisation.code }}\n        </div>\n    </div>\n    <div class=\"eui-user-profile-card__main-wrapper-right-content\">\n        <a class=\"eui-u-text-link\" tabindex=\"0\" (click)=\"onClose()\">close</a>\n        <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto eui-u-mt-m\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n            <eui-icon-svg icon=\"eui-info\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-container *ngIf=\"userState?.impersonatingUser\">\n    <div class=\"eui-user-profile-card__impersonateInfos\">\n        <div>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName }}</div>\n        <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n        <div class=\"eui-u-mt-2xs\">\n            <strong>{{ userState?.fullName }}</strong>\n        </div>\n    </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i1.UserService }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], impersonateLabel: [{
+                type: Input
+            }], showDetailsLabel: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], isShowAvatarInitials: [{
+                type: Input
+            }], showProfileInfo: [{
+                type: Output
+            }], closeProfileMenu: [{
+                type: Output
+            }] } });
+
+const COMPONENTS$3 = [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent];
+class EuiUserProfileModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, declarations: [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent], imports: [CommonModule,
+            EuiDropdownModule, EuiCoerceBooleanPipeModule, EuiIconModule, EuiButtonModule, EuiAvatarModule,
+            EuiBadgeModule], exports: [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, imports: [CommonModule,
+            EuiDropdownModule, EuiCoerceBooleanPipeModule, EuiIconModule, EuiButtonModule, EuiAvatarModule,
+            EuiBadgeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        EuiDropdownModule, EuiCoerceBooleanPipeModule, EuiIconModule, EuiButtonModule, EuiAvatarModule,
+                        EuiBadgeModule,
+                    ],
+                    declarations: [...COMPONENTS$3],
+                    exports: [...COMPONENTS$3],
+                }]
+        }] });
+
+class EuiAppSidebarHeaderUserProfileComponent {
+    constructor() {
+        this.cssClasses = 'eui-app-sidebar-header-user-profile';
+        this.welcomeLabel = 'Welcome';
+        this.impersonateLabel = 'impersonating';
+        this.isShowUserInfos = true;
+        this.hasWelcomeLabel = true;
+        this.isShowAvatarInitials = false;
+        this.hasTabNavigation = false;
+        this.isOnline = true;
+        this.hasToggle = false;
+        // 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
+        this.toggle = new EventEmitter();
+        this.toggleProfile = false;
+    }
+    // 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) {
+        this.onProfileClick(event);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppSidebarHeaderUserProfileComponent, selector: "eui-app-sidebar-header-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation", isOnline: "isOnline", hasToggle: "hasToggle" }, 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]=\"false\"\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n\n<button *ngIf=\"hasToggle\" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"toggle user profile\">\n    <span class=\"eui-icon\" [ngClass]=\"toggleProfile ? 'eui-icon-angle-up' : 'eui-icon-angle-down'\"></span>\n</button>\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-base-color-grey-25);display:flex;padding:var(--eui-base-spacing-m);position:relative;width:100%}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "hasMenu", "isShowUserInfos", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+__decorate([
+    coerceBoolean
+], EuiAppSidebarHeaderUserProfileComponent.prototype, "isShowUserInfos", void 0);
+__decorate([
+    coerceBoolean
+], EuiAppSidebarHeaderUserProfileComponent.prototype, "hasWelcomeLabel", void 0);
+__decorate([
+    coerceBoolean
+], EuiAppSidebarHeaderUserProfileComponent.prototype, "isShowAvatarInitials", void 0);
+__decorate([
+    coerceBoolean
+], EuiAppSidebarHeaderUserProfileComponent.prototype, "hasTabNavigation", void 0);
+__decorate([
+    coerceBoolean
+], EuiAppSidebarHeaderUserProfileComponent.prototype, "isOnline", void 0);
+__decorate([
+    coerceBoolean
+], EuiAppSidebarHeaderUserProfileComponent.prototype, "hasToggle", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-sidebar-header-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, 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]=\"false\"\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n\n<button *ngIf=\"hasToggle\" euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"toggle user profile\">\n    <span class=\"eui-icon\" [ngClass]=\"toggleProfile ? 'eui-icon-angle-up' : 'eui-icon-angle-down'\"></span>\n</button>\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-base-color-grey-25);display:flex;padding:var(--eui-base-spacing-m);position:relative;width:100%}@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
+            }], hasWelcomeLabel: [{
+                type: Input
+            }], isShowAvatarInitials: [{
+                type: Input
+            }], hasTabNavigation: [{
+                type: Input
+            }], isOnline: [{
+                type: Input
+            }], hasToggle: [{
+                type: Input
+            }], 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();
+    }
+    _getCssClasses() {
+        return ['eui-app-sidebar-drawer', this.isExpanded ? 'eui-app-sidebar-drawer--expanded' : ''].join(' ').trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppSidebarDrawerComponent, 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\">\n    <ng-content></ng-content>\n</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", 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\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { isExpanded: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENTS$2 = [
+    EuiAppSidebarComponent,
+    EuiAppSidebarHeaderComponent,
+    EuiAppSidebarBodyComponent,
+    EuiAppSidebarFooterComponent,
+    EuiAppSidebarMenuComponent,
+    EuiAppSidebarHeaderUserProfileComponent,
+    EuiAppSidebarDrawerComponent,
+];
+class EuiAppSidebarModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, declarations: [EuiAppSidebarComponent,
+            EuiAppSidebarHeaderComponent,
+            EuiAppSidebarBodyComponent,
+            EuiAppSidebarFooterComponent,
+            EuiAppSidebarMenuComponent,
+            EuiAppSidebarHeaderUserProfileComponent,
+            EuiAppSidebarDrawerComponent], imports: [CommonModule, RouterModule, EuiMenuModule, EuiButtonModule, EuiCoerceBooleanPipeModule,
+            EuiUserProfileModule], exports: [EuiAppSidebarComponent,
+            EuiAppSidebarHeaderComponent,
+            EuiAppSidebarBodyComponent,
+            EuiAppSidebarFooterComponent,
+            EuiAppSidebarMenuComponent,
+            EuiAppSidebarHeaderUserProfileComponent,
+            EuiAppSidebarDrawerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, imports: [CommonModule, RouterModule, EuiMenuModule, EuiButtonModule, EuiCoerceBooleanPipeModule,
+            EuiUserProfileModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppSidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule, RouterModule, EuiMenuModule, EuiButtonModule, EuiCoerceBooleanPipeModule,
+                        EuiUserProfileModule,
+                    ],
+                    declarations: [...COMPONENTS$2],
+                    exports: [...COMPONENTS$2],
+                }]
+        }] });
+
+class EuiSidebarToggleComponent {
+    constructor(asService) {
+        this.asService = asService;
+        this.e2eAttr = 'eui-sidebar-toggle';
+        this.name = 'eui-sidebar-toggle';
+    }
+    onToggleSidebar(event) {
+        this.asService.sidebarToggle();
+        consumeEvent(event);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: { e2eAttr: "e2eAttr" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.name" } }, ngImport: i0, template: "<eui-icon-svg-button\n    iconSvgName=\"eui-ecl-hamburger\"\n    iconSvgFillColor=\"white\"\n    hasFocusBorder\n    [ariaLabel]=\"(asService.state$ | async).isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'\"\n    (click)=\"onToggleSidebar($event)\">\n</eui-icon-svg-button>\n", dependencies: [{ kind: "component", type: i5.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-sidebar-toggle', template: "<eui-icon-svg-button\n    iconSvgName=\"eui-ecl-hamburger\"\n    iconSvgFillColor=\"white\"\n    hasFocusBorder\n    [ariaLabel]=\"(asService.state$ | async).isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'\"\n    (click)=\"onToggleSidebar($event)\">\n</eui-icon-svg-button>\n" }]
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { e2eAttr: [{
+                type: HostBinding,
+                args: ['attr.data-e2e']
+            }, {
+                type: Input
+            }], name: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuiSidebarToggleModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, declarations: [EuiSidebarToggleComponent], imports: [CommonModule, EuiIconModule], exports: [EuiSidebarToggleComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, imports: [CommonModule, EuiIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSidebarToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, EuiIconModule],
+                    exports: [EuiSidebarToggleComponent],
+                    declarations: [EuiSidebarToggleComponent],
+                }]
+        }] });
+
+class EuiAppToolbarComponent {
+    get hasLanguageSelector() {
+        return this._hasLanguageSelector;
+    }
+    set hasLanguageSelector(value) {
+        this._hasLanguageSelector = coerceBooleanProperty(value);
+    }
+    constructor(asService) {
+        this.asService = asService;
+        this.string = 'eui-app-toolbar';
+        this.role = 'banner';
+        this._hasLanguageSelector = true;
+    }
+    ngOnInit() {
+        this.asService.activateToolbar();
+    }
+    ngOnDestroy() {
+        this.asService.setState({
+            ...this.asService.state,
+            hasToolbar: false,
+        });
+        document.documentElement.style.removeProperty('--eui-app-toolbar-height');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppToolbarComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: { hasLanguageSelector: "hasLanguageSelector" }, host: { properties: { "class": "this.string", "attr.role": "this.role" } }, ngImport: i0, template: "<!--Only render the toggle if there is a rendered sidebar in the DOM, otherwise it doesn't make sense. -->\n<eui-sidebar-toggle *ngIf=\"asService.getState('hasSidebar') | async\" class=\"eui-app-toolbar__sidebar-toggle\"> </eui-sidebar-toggle>\n\n<ng-content></ng-content>\n\n<ng-container\n    *ngIf=\"\n        !(asService.getState('hasHeader') | async | coerceBool) ||\n        ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile)\n    \">\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <eui-language-selector styleClass=\"eui-app-toolbar__language-selector\"> </eui-language-selector>\n    </ng-container>\n</ng-container>\n", styles: [".eui-app-toolbar{align-items:center;background:var(--eui-base-color-primary-100);color:var(--eui-base-color-white);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));transition:top .1s ease,left .1s ease-in,width .1s ease-in;z-index:var(--eui-base-z-index-nav)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-base-spacing-xs)}.eui-app-toolbar__language-selector{margin-left:auto}.eui-app-toolbar__language-selector .eui-language-selector-link__icon{color:var(--eui-base-color-white);font-size:var(--eui-base-icon-size-l)}.eui-app-toolbar__language-selector .eui-language-selector-link__language-code{color:var(--eui-base-color-primary-100)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-base-spacing-m) + 2px)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr"] }, { kind: "component", type: EuiLanguageSelectorComponent, selector: "eui-language-selector", inputs: ["hasLanguageSelection"], outputs: ["languageSelectorClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.EuiCoerceBooleanPipe, name: "coerceBool" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-app-toolbar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<!--Only render the toggle if there is a rendered sidebar in the DOM, otherwise it doesn't make sense. -->\n<eui-sidebar-toggle *ngIf=\"asService.getState('hasSidebar') | async\" class=\"eui-app-toolbar__sidebar-toggle\"> </eui-sidebar-toggle>\n\n<ng-content></ng-content>\n\n<ng-container\n    *ngIf=\"\n        !(asService.getState('hasHeader') | async | coerceBool) ||\n        ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile)\n    \">\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <eui-language-selector styleClass=\"eui-app-toolbar__language-selector\"> </eui-language-selector>\n    </ng-container>\n</ng-container>\n", styles: [".eui-app-toolbar{align-items:center;background:var(--eui-base-color-primary-100);color:var(--eui-base-color-white);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));transition:top .1s ease,left .1s ease-in,width .1s ease-in;z-index:var(--eui-base-z-index-nav)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-base-spacing-xs)}.eui-app-toolbar__language-selector{margin-left:auto}.eui-app-toolbar__language-selector .eui-language-selector-link__icon{color:var(--eui-base-color-white);font-size:var(--eui-base-icon-size-l)}.eui-app-toolbar__language-selector .eui-language-selector-link__language-code{color:var(--eui-base-color-primary-100)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-base-spacing-m) + 2px)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hasLanguageSelector: [{
+                type: Input
+            }] } });
 
-const COMPONENTS$2 = [EuiAppToolbarComponent];
+const COMPONENTS$1 = [EuiAppToolbarComponent];
 class EuiAppToolbarModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiAppToolbarModule, declarations: [EuiAppToolbarComponent], imports: [CommonModule, EuiSidebarToggleModule, EuiLanguageSelectorModule, EuiToolbarModule, EuiCoerceBooleanPipeModule], exports: [EuiAppToolbarComponent] }); }
@@ -957,8 +1278,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
             type: NgModule,
             args: [{
                     imports: [CommonModule, EuiSidebarToggleModule, EuiLanguageSelectorModule, EuiToolbarModule, EuiCoerceBooleanPipeModule],
-                    declarations: [...COMPONENTS$2],
-                    exports: [...COMPONENTS$2],
+                    declarations: [...COMPONENTS$1],
+                    exports: [...COMPONENTS$1],
                 }]
         }] });
 
@@ -987,16 +1308,14 @@ class EuiAppComponent {
     set isSidebarHidden(value) {
         this._isSidebarHidden = coerceBooleanProperty(value);
     }
-    constructor(asService, euiGrowlService, deviceDetectorService, cdRef, euiConfigToken) {
+    constructor(asService, euiGrowlService, deviceDetectorService, cdRef) {
         this.asService = asService;
         this.euiGrowlService = euiGrowlService;
         this.deviceDetectorService = deviceDetectorService;
         this.cdRef = cdRef;
-        this.euiConfigToken = euiConfigToken;
         this.cssClasses = 'eui-app';
         this.appSubTitle = '';
         this.themeClass = '';
-        this.userInfos = '';
         this.hasNoPageWrapper = false;
         this._isSidebarOpen = false;
         this._isSidebarExpandOnHover = true;
@@ -1065,51 +1384,24 @@ class EuiAppComponent {
                 isSidebarExpandOnHover: changes.isSidebarExpandOnHover.currentValue,
             });
         }
-        if (changes.userInfos) {
-            this.asService.setState({
-                ...this.asService.state,
-                userInfos: changes.userInfos.currentValue,
-            });
-        }
-        if (changes.userSubInfos) {
-            this.asService.setState({
-                ...this.asService.state,
-                userSubInfos: changes.userSubInfos.currentValue,
-            });
-        }
-        if (changes.impersonatedUserInfos) {
-            this.asService.setState({
-                ...this.asService.state,
-                impersonatedUserInfos: changes.impersonatedUserInfos.currentValue,
-            });
-        }
     }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i2$2.DeviceDetectorService }, { token: i0.ChangeDetectorRef }, { token: EUI_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", userInfos: "userInfos", userSubInfos: "userSubInfos", impersonatedUserInfos: "impersonatedUserInfos", isSidebarOpen: "isSidebarOpen", isSidebarExpandOnHover: "isSidebarExpandOnHover", isShrinkHeaderActive: "isShrinkHeaderActive", isSidebarHidden: "isSidebarHidden" }, 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\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n</ng-container>\n\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    <ng-container\n        *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n        <eui-app-toolbar>\n            <eui-toolbar></eui-toolbar>\n        </eui-app-toolbar>\n    </ng-container>\n\n    <ng-template #elseBlockToolbar>\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    </ng-template>\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        <!-- TODO: consider removing code below in the future by transferring responsibility of providing <router-outlet> to the developer -->\n        <ng-container *ngIf=\"hasNoPageWrapper\">\n            <router-outlet></router-outlet>\n        </ng-container>\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (clicked)=\"euiGrowlService.growlCallback()\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);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:rgba(0,0,0,.3);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:rgba(0,0,0,.3);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}}.eui-app-main{min-height:100vh;background:var(--eui-base-color-grey-2);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@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%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["hasLanguageSelector"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar" }, { 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: ["items", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i10.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked"] }, { kind: "component", type: i11.EuiGrowlComponent, selector: "eui-growl", inputs: ["sticky", "life", "value", "style", "styleClass", "position", "e2eAttr", "closeAllSticky"], outputs: ["growlClick"] }, { kind: "component", type: i12.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i2$2.DeviceDetectorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: "isSidebarOpen", isSidebarExpandOnHover: "isSidebarExpandOnHover", isShrinkHeaderActive: "isShrinkHeaderActive", isSidebarHidden: "isSidebarHidden" }, 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\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n</ng-container>\n\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    <ng-container\n        *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n        <eui-app-toolbar>\n            <eui-toolbar></eui-toolbar>\n        </eui-app-toolbar>\n    </ng-container>\n\n    <ng-template #elseBlockToolbar>\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    </ng-template>\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        <!-- TODO: consider removing code below in the future by transferring responsibility of providing <router-outlet> to the developer -->\n        <ng-container *ngIf=\"hasNoPageWrapper\">\n            <router-outlet></router-outlet>\n        </ng-container>\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (clicked)=\"euiGrowlService.growlCallback()\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);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:rgba(0,0,0,.3);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:rgba(0,0,0,.3);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}}.eui-app-main{min-height:100vh;background:var(--eui-base-color-grey-2);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@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%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["hasLanguageSelector"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar" }, { 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: ["items", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i10.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked"] }, { kind: "component", type: i11.EuiGrowlComponent, selector: "eui-growl", inputs: ["sticky", "life", "value", "style", "styleClass", "position", "e2eAttr", "closeAllSticky"], outputs: ["growlClick"] }, { kind: "component", type: i12.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-app', encapsulation: ViewEncapsulation.None, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n</ng-container>\n\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    <ng-container\n        *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n        <eui-app-toolbar>\n            <eui-toolbar></eui-toolbar>\n        </eui-app-toolbar>\n    </ng-container>\n\n    <ng-template #elseBlockToolbar>\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    </ng-template>\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        <!-- TODO: consider removing code below in the future by transferring responsibility of providing <router-outlet> to the developer -->\n        <ng-container *ngIf=\"hasNoPageWrapper\">\n            <router-outlet></router-outlet>\n        </ng-container>\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (clicked)=\"euiGrowlService.growlCallback()\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);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:rgba(0,0,0,.3);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:rgba(0,0,0,.3);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}}.eui-app-main{min-height:100vh;background:var(--eui-base-color-grey-2);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@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%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i1.EuiGrowlService }, { type: i2$2.DeviceDetectorService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [EUI_CONFIG_TOKEN]
-                }] }], propDecorators: { cssClasses: [{
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i1.EuiGrowlService }, { type: i2$2.DeviceDetectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], appSubTitle: [{
                 type: Input
             }], themeClass: [{
                 type: Input
-            }], userInfos: [{
-                type: Input
-            }], userSubInfos: [{
-                type: Input
-            }], impersonatedUserInfos: [{
-                type: Input
             }], isSidebarOpen: [{
                 type: Input
             }], isSidebarExpandOnHover: [{
@@ -1138,259 +1430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
             args: [{ selector: 'eui-app-page-wrapper' }]
         }] });
 
-class EuiUserProfileMenuItemComponent {
-    constructor(element) {
-        this.element = element;
-        this.class = 'eui-user-profile-menu-item';
-        this.tabindex = '-1';
-        this.role = 'menuitem';
-    }
-    focus() {
-        this.element.nativeElement.focus();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileMenuItemComponent, selector: "eui-user-profile-menu-item", inputs: { styleClass: "styleClass" }, host: { properties: { "class": "this.class", "attr.tabindex": "this.tabindex", "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-user-profile-menu-item', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
-                type: HostBinding
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], styleClass: [{
-                type: Input
-            }] } });
-
-class EuiUserProfileMenuComponent {
-    constructor(dropdownService) {
-        this.dropdownService = dropdownService;
-        this.class = 'eui-user-profile-menu';
-        this.role = 'menu';
-        this.destroy$ = new Subject();
-    }
-    onKeydown(event) {
-        this.focusKeyManager.onKeydown(event);
-    }
-    ngAfterContentInit() {
-        this.dropdownService.isDropdownOpen.pipe(takeUntil(this.destroy$)).subscribe((isOpen) => {
-            if (isOpen) {
-                this.focusKeyManager = new FocusKeyManager(this.items).withWrap();
-                this.focusKeyManager.setFirstItemActive();
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuComponent, deps: [{ token: i4$1.EuiDropdownService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileMenuComponent, selector: "eui-user-profile-menu", host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiUserProfileMenuItemComponent) }], ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-user-profile-menu', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i4$1.EuiDropdownService }], propDecorators: { class: [{
-                type: HostBinding
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EuiUserProfileMenuItemComponent)]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-class EuiUserProfileComponent {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    constructor(asService, userService, baseStatesDirective) {
-        this.asService = asService;
-        this.userService = userService;
-        this.baseStatesDirective = baseStatesDirective;
-        this.isOnline = true;
-        this.welcomeLabel = 'Welcome';
-        this.impersonateLabel = 'impersonating';
-        this.hasMenu = true;
-        this.isShowUserInfos = true;
-        this.hasWelcomeLabel = true;
-        this.isShowAvatarInitials = false;
-        this.hasTabNavigation = false;
-        this.unsubscribeSubject$ = new Subject();
-    }
-    ngOnInit() {
-        if (this.isShowAvatarInitials) {
-            this.userService
-                .getState()
-                .pipe(takeUntil(this.unsubscribeSubject$))
-                .subscribe((state) => {
-                if (state) {
-                    const firstNameInitial = state.firstName?.substring(0, 1).toUpperCase();
-                    const lastNameInitial = state.lastName?.substring(0, 1).toUpperCase();
-                    this.avatarInitials = `${firstNameInitial}${lastNameInitial}`;
-                }
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribeSubject$.next();
-        this.unsubscribeSubject$.complete();
-    }
-    closeDropdown() {
-        this.dropdown.closeDropdown();
-    }
-    getCssClasses() {
-        return [
-            this.baseStatesDirective.getCssClasses('eui-user-profile'),
-        ].join(' ').trim();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.UserService }, { token: i2$3.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", hasMenu: "hasMenu", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2$3.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-subinfos]=\"(asService.state$ | async).userSubInfos && !hasWelcomeLabel\">\n                <ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ (asService.state$ | async).userInfos }}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).impersonatedUserInfos }}</div>\n                    <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ (asService.state$ | async).userSubInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).userInfos }}</div>\n                    <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ (asService.state$ | async).userSubInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"(asService.state$ | async).impersonatedUserInfos\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge *ngIf=\"isShowAvatarInitials\" position=\"bottom\">\n                    <eui-badge euiSecondary>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"xs\" fillColor=\"white\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90)}.eui-user-profile__infos--no-subinfos{display:flex}.eui-toolbar-item .eui-user-profile__infos,.eui-toolbar-item .eui-user-profile__infos-name,.eui-toolbar-item .eui-user-profile__subinfos{color:var(--eui-base-color-white)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i4$1.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
-}
-__decorate([
-    coerceBoolean
-], EuiUserProfileComponent.prototype, "hasMenu", void 0);
-__decorate([
-    coerceBoolean
-], EuiUserProfileComponent.prototype, "isShowUserInfos", void 0);
-__decorate([
-    coerceBoolean
-], EuiUserProfileComponent.prototype, "hasWelcomeLabel", void 0);
-__decorate([
-    coerceBoolean
-], EuiUserProfileComponent.prototype, "isShowAvatarInitials", void 0);
-__decorate([
-    coerceBoolean
-], EuiUserProfileComponent.prototype, "hasTabNavigation", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, hostDirectives: [
-                        {
-                            directive: BaseStatesDirective,
-                            inputs: [
-                                'euiSizeS',
-                                'euiInverted',
-                            ],
-                        },
-                    ], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-subinfos]=\"(asService.state$ | async).userSubInfos && !hasWelcomeLabel\">\n                <ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ (asService.state$ | async).userInfos }}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).impersonatedUserInfos }}</div>\n                    <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ (asService.state$ | async).userSubInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).userInfos }}</div>\n                    <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ (asService.state$ | async).userSubInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"(asService.state$ | async).impersonatedUserInfos\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge *ngIf=\"isShowAvatarInitials\" position=\"bottom\">\n                    <eui-badge euiSecondary>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"xs\" fillColor=\"white\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90)}.eui-user-profile__infos--no-subinfos{display:flex}.eui-toolbar-item .eui-user-profile__infos,.eui-toolbar-item .eui-user-profile__infos-name,.eui-toolbar-item .eui-user-profile__subinfos{color:var(--eui-base-color-white)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i1.UserService }, { type: i2$3.BaseStatesDirective }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], dropdown: [{
-                type: ViewChild,
-                args: ['dropdown']
-            }], welcomeLabel: [{
-                type: Input
-            }], impersonateLabel: [{
-                type: Input
-            }], avatarUrl: [{
-                type: Input
-            }], hasMenu: [{
-                type: Input
-            }], isShowUserInfos: [{
-                type: Input
-            }], hasWelcomeLabel: [{
-                type: Input
-            }], isShowAvatarInitials: [{
-                type: Input
-            }], hasTabNavigation: [{
-                type: Input
-            }] } });
-
-class EuiUserProfileCardComponent {
-    get cssClasses() {
-        return 'eui-user-profile-card';
-    }
-    constructor(userService, asService) {
-        this.userService = userService;
-        this.asService = asService;
-        this.isOnline = true;
-        this.impersonateLabel = 'impersonating';
-        this.showDetailsLabel = 'Show profile details';
-        this.isShowAvatarInitials = false;
-        this.showProfileInfo = new EventEmitter();
-        this.closeProfileMenu = new EventEmitter();
-        this.unsubscribeSubject$ = new Subject();
-    }
-    ngOnInit() {
-        this.userService
-            .getState()
-            .pipe(takeUntil(this.unsubscribeSubject$))
-            .subscribe((state) => {
-            if (state) {
-                const firstNameInitial = state.firstName?.substring(0, 1).toUpperCase();
-                const lastNameInitial = state.lastName?.substring(0, 1).toUpperCase();
-                this.avatarInitials = `${firstNameInitial}${lastNameInitial}`;
-                this.userState = state;
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribeSubject$.next();
-        this.unsubscribeSubject$.complete();
-    }
-    onShowInfoClick() {
-        this.showProfileInfo.emit();
-    }
-    onClose() {
-        this.closeProfileMenu.emit();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileCardComponent, deps: [{ token: i1.UserService }, { token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiUserProfileCardComponent, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: "isShowAvatarInitials" }, outputs: { showProfileInfo: "showProfileInfo", closeProfileMenu: "closeProfileMenu" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n    <div class=\"eui-user-profile-card__avatar-wrapper\">\n        <eui-avatar euiSizeL euiInfo>\n            <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                {{ avatarInitials }}\n            </eui-avatar-text>\n            <ng-template #noAvatarInitials>\n                <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n            </ng-template>\n        </eui-avatar>\n    </div>\n    <div class=\"eui-user-profile-card__userInfos\">\n        <div class=\"eui-u-font-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n        <div *ngIf=\"userState.function\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.function }}\n        </div>\n        <div *ngIf=\"userState.organisation && userState.organisation.code\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.organisation.code }}\n        </div>\n    </div>\n    <div class=\"eui-user-profile-card__main-wrapper-right-content\">\n        <a class=\"eui-u-text-link\" tabindex=\"0\" (click)=\"onClose()\">close</a>\n        <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto eui-u-mt-m\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n            <eui-icon-svg icon=\"eui-info\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos\">\n    <div class=\"eui-user-profile-card__impersonateInfos\">\n        <div>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName }}</div>\n        <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n        <div class=\"eui-u-mt-2xs\">\n            <strong>{{ (asService.state$ | async).impersonatedUserInfos }}</strong>\n        </div>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
-}
-__decorate([
-    coerceBoolean
-], EuiUserProfileCardComponent.prototype, "isShowAvatarInitials", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-user-profile-card', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n    <div class=\"eui-user-profile-card__avatar-wrapper\">\n        <eui-avatar euiSizeL euiInfo>\n            <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                {{ avatarInitials }}\n            </eui-avatar-text>\n            <ng-template #noAvatarInitials>\n                <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n            </ng-template>\n        </eui-avatar>\n    </div>\n    <div class=\"eui-user-profile-card__userInfos\">\n        <div class=\"eui-u-font-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n        <div *ngIf=\"userState.function\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.function }}\n        </div>\n        <div *ngIf=\"userState.organisation && userState.organisation.code\" class=\"eui-user-profile-card__userInfos-item\">\n            {{ userState.organisation.code }}\n        </div>\n    </div>\n    <div class=\"eui-user-profile-card__main-wrapper-right-content\">\n        <a class=\"eui-u-text-link\" tabindex=\"0\" (click)=\"onClose()\">close</a>\n        <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto eui-u-mt-m\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n            <eui-icon-svg icon=\"eui-info\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos\">\n    <div class=\"eui-user-profile-card__impersonateInfos\">\n        <div>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName }}</div>\n        <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n        <div class=\"eui-u-mt-2xs\">\n            <strong>{{ (asService.state$ | async).impersonatedUserInfos }}</strong>\n        </div>\n    </div>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1.UserService }, { type: i1.EuiAppShellService }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], impersonateLabel: [{
-                type: Input
-            }], showDetailsLabel: [{
-                type: Input
-            }], avatarUrl: [{
-                type: Input
-            }], isShowAvatarInitials: [{
-                type: Input
-            }], showProfileInfo: [{
-                type: Output
-            }], closeProfileMenu: [{
-                type: Output
-            }] } });
-
-const COMPONENTS$1 = [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent];
-class EuiUserProfileModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, declarations: [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent], imports: [CommonModule,
-            EuiDropdownModule, EuiCoerceBooleanPipeModule, EuiIconModule, EuiButtonModule, EuiAvatarModule,
-            EuiBadgeModule], exports: [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, imports: [CommonModule,
-            EuiDropdownModule, EuiCoerceBooleanPipeModule, EuiIconModule, EuiButtonModule, EuiAvatarModule,
-            EuiBadgeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiUserProfileModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        EuiDropdownModule, EuiCoerceBooleanPipeModule, EuiIconModule, EuiButtonModule, EuiAvatarModule,
-                        EuiBadgeModule,
-                    ],
-                    declarations: [...COMPONENTS$1],
-                    exports: [...COMPONENTS$1],
-                }]
-        }] });
-
 class EuiAppHeaderComponent {
     get cssClasses() {
         return this.getCssClasses();
@@ -1443,13 +1482,13 @@ class EuiAppHeaderComponent {
     getCssClasses() {
         return ['eui-app-header', this.isHeaderShrinked ? 'eui-app-header--shrinked' : ''].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppHeaderComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.NgZone }, { token: i2$4.ViewportRuler }, { token: i2$4.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppHeaderComponent, selector: "eui-app-header", inputs: { isShrinkHeaderActive: "isShrinkHeaderActive" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "<eui-sidebar-toggle\n    *ngIf=\"(asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar\"\n    styleClass=\"eui-app-header__sidebar-toggle\">\n</eui-sidebar-toggle>\n\n<ng-content select=\"eui-header\"></ng-content>\n", styles: [".eui-app-header{align-items:center;background-color:var(--eui-base-color-white);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-base-z-index-header);transition:all .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{display:flex;padding:2rem .5rem 1rem 1rem}.eui-app-header__sidebar-toggle .eui-icon{cursor:pointer}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppHeaderComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.NgZone }, { token: i2$3.ViewportRuler }, { token: i2$3.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppHeaderComponent, selector: "eui-app-header", inputs: { isShrinkHeaderActive: "isShrinkHeaderActive" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "<eui-sidebar-toggle\n    *ngIf=\"(asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar\"\n    styleClass=\"eui-app-header__sidebar-toggle\">\n</eui-sidebar-toggle>\n\n<ng-content select=\"eui-header\"></ng-content>\n", styles: [".eui-app-header{align-items:center;background-color:var(--eui-base-color-white);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-base-z-index-header);transition:all .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{display:flex;padding:2rem .5rem 1rem 1rem}.eui-app-header__sidebar-toggle .eui-icon{cursor:pointer}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-app-header', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-sidebar-toggle\n    *ngIf=\"(asService.state$ | async).hasSidebar && (asService.state$ | async).hasHeader && !(asService.state$ | async).hasToolbar\"\n    styleClass=\"eui-app-header__sidebar-toggle\">\n</eui-sidebar-toggle>\n\n<ng-content select=\"eui-header\"></ng-content>\n", styles: [".eui-app-header{align-items:center;background-color:var(--eui-base-color-white);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-base-z-index-header);transition:all .1s ease}.eui-app-header--shrinked{visibility:hidden}.eui-app-header__sidebar-toggle{display:flex;padding:2rem .5rem 1rem 1rem}.eui-app-header__sidebar-toggle .eui-icon{cursor:pointer}@media screen and (max-width: 767px){.eui-app-header{visibility:hidden}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.NgZone }, { type: i2$4.ViewportRuler }, { type: i2$4.ScrollDispatcher }], propDecorators: { cssClasses: [{
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.NgZone }, { type: i2$3.ViewportRuler }, { type: i2$3.ScrollDispatcher }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{
@@ -1596,16 +1635,16 @@ class EuiAppTopMessageComponent extends BaseDirective$1 {
         this.cd.reattach();
         this.cd.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppTopMessageComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$5.ContentObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: "isCloseable", isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], usesInheritance: true, 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    <eui-icon-svg-button\n        iconSvgName=\"eui-close\"\n        hasFocusBorder\n        (click)=\"onCloseClick()\"\n        ariaLabel=\"Close top message\"\n        class=\"eui-u-ml-auto\">\n    </eui-icon-svg-button>\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-base-z-index-top-message);background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--hidden{display:none}.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}\n"], dependencies: [{ kind: "component", type: i5.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppTopMessageComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$4.ContentObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: "isCloseable", isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], usesInheritance: true, 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    <eui-icon-svg-button\n        *ngIf=\"isCloseable\"\n        iconSvgName=\"eui-close\"\n        hasFocusBorder\n        (click)=\"onCloseClick()\"\n        ariaLabel=\"Close top message\"\n        class=\"eui-u-ml-auto\">\n    </eui-icon-svg-button>\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-base-z-index-top-message);background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--hidden{display:none}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
 ], EuiAppTopMessageComponent.prototype, "isCloseable", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiAppTopMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-app-top-message', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, 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    <eui-icon-svg-button\n        iconSvgName=\"eui-close\"\n        hasFocusBorder\n        (click)=\"onCloseClick()\"\n        ariaLabel=\"Close top message\"\n        class=\"eui-u-ml-auto\">\n    </eui-icon-svg-button>\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-base-z-index-top-message);background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--hidden{display:none}.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}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$5.ContentObserver }], propDecorators: { cssClasses: [{
+            args: [{ selector: 'eui-app-top-message', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, 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    <eui-icon-svg-button\n        *ngIf=\"isCloseable\"\n        iconSvgName=\"eui-close\"\n        hasFocusBorder\n        (click)=\"onCloseClick()\"\n        ariaLabel=\"Close top message\"\n        class=\"eui-u-ml-auto\">\n    </eui-icon-svg-button>\n</div>\n", styles: [".eui-app-top-message{padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-base-z-index-top-message);background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--primary{background-color:var(--eui-base-color-primary-100);border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--primary .eui-icon-svg svg{color:var(--eui-base-color-primary-100-contrast);fill:var(--eui-base-color-primary-100-contrast)}.eui-app-top-message--info{background-color:var(--eui-base-color-info-100);border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--info .eui-icon-svg svg{color:var(--eui-base-color-info-100-contrast);fill:var(--eui-base-color-info-100-contrast)}.eui-app-top-message--success{background-color:var(--eui-base-color-success-100);border-color:var(--eui-base-color-success-100);color:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--success .eui-icon-svg svg{color:var(--eui-base-color-success-100-contrast);fill:var(--eui-base-color-success-100-contrast)}.eui-app-top-message--warning{background-color:var(--eui-base-color-warning-100);border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--warning .eui-icon-svg svg{color:var(--eui-base-color-warning-100-contrast);fill:var(--eui-base-color-warning-100-contrast)}.eui-app-top-message--danger{background-color:var(--eui-base-color-danger-100);border-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--danger .eui-icon-svg svg{color:var(--eui-base-color-danger-100-contrast);fill:var(--eui-base-color-danger-100-contrast)}.eui-app-top-message--hidden{display:none}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$4.ContentObserver }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{
@@ -1677,7 +1716,7 @@ class EuiSearchComponent {
         console.log(e);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: "isAutocomplete", hasSearchButton: "hasSearchButton" }, outputs: { search: "search" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n    <div class=\"eui-input-group-addon\">\n        <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n            placeholder=\"{{placeholderLabel}}\"\n            panelWidth=\"{{panelWidth}}\"\n            (inputBlur)=\"onInputBlur()\"\n            (inputFocus)=\"onInputFocus()\"\n            (selectionChange)=\"onSelectionChanged($event)\"\n            (inputChange)=\"onSearch($event)\">\n            <ng-template let-option euiTemplate=\"dropdownOption\">\n                <ng-container\n                    [ngTemplateOutlet]=\"resultItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option }\">\n                </ng-container>\n            </ng-template>\n        </eui-autocomplete>\n        <button *ngIf=\"hasSearchButton\"\n            class=\"eui-search__input-button\"\n            euiButton\n            euiBasicButton\n            euiSizeS\n            [euiSecondary]=\"isInputFocus\"\n            euiIconButton\n            (click)=\"onSearchClick()\"\n            aria-label=\"search button\">\n            <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n        </button>\n        <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n            <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n        </div>\n    </div>\n</div>\n", styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-base-color-primary-110);border-color:var(--eui-base-color-primary-50);border-radius:var(--eui-base-spacing-m)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-base-color-white);width:200px}.eui-search--focus .eui-input-text{background-color:#fff;border-color:var(--eui-base-color-grey-80);color:#000;width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-base-color-grey-90)!important}.eui-search--focus .eui-search__icon{color:transparent!important}.eui-search__input-button{position:absolute;right:6px;top:6px;color:var(--eui-base-color-grey-15)!important}.eui-search__input-button .eui-icon{z-index:1}.eui-search__input-button:focus{color:var(--eui-base-color-black)!important}.eui-search__icon{position:absolute;right:8px;top:10px;color:var(--eui-base-color-grey-15)!important}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["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: "directive", type: i5$1.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6$1.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: "isAutocomplete", hasSearchButton: "hasSearchButton" }, outputs: { search: "search" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n    <div class=\"eui-input-group-addon\">\n        <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n            placeholder=\"{{placeholderLabel}}\"\n            panelWidth=\"{{panelWidth}}\"\n            (inputBlur)=\"onInputBlur()\"\n            (inputFocus)=\"onInputFocus()\"\n            (selectionChange)=\"onSelectionChanged($event)\"\n            (inputChange)=\"onSearch($event)\">\n            <ng-template let-option euiTemplate=\"dropdownOption\">\n                <ng-container\n                    [ngTemplateOutlet]=\"resultItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option }\">\n                </ng-container>\n            </ng-template>\n        </eui-autocomplete>\n        <button *ngIf=\"hasSearchButton\"\n            class=\"eui-search__input-button\"\n            euiButton\n            euiBasicButton\n            euiSizeS\n            [euiSecondary]=\"isInputFocus\"\n            euiIconButton\n            (click)=\"onSearchClick()\"\n            aria-label=\"search button\">\n            <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n        </button>\n        <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n            <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n        </div>\n    </div>\n</div>\n", styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-base-color-primary-110);border-color:var(--eui-base-color-primary-50);border-radius:var(--eui-base-spacing-m)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-base-color-white);width:200px}.eui-search--focus .eui-input-text{background-color:#fff;border-color:var(--eui-base-color-grey-80);color:#000;width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-base-color-grey-90)!important}.eui-search--focus .eui-search__icon{color:transparent!important}.eui-search__input-button{position:absolute;right:6px;top:6px;color:var(--eui-base-color-grey-15)!important}.eui-search__input-button .eui-icon{z-index:1}.eui-search__input-button:focus{color:var(--eui-base-color-black)!important}.eui-search__icon{position:absolute;right:8px;top:10px;color:var(--eui-base-color-grey-15)!important}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["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: "directive", type: i5$1.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6$1.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean$1
@@ -1823,13 +1862,13 @@ class EuiBreadcrumbItemComponent {
     isLast() {
         return !this.nextCrumb;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiBreadcrumbItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.LogService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiBreadcrumbItemComponent, selector: "eui-breadcrumb-item", inputs: { id: "id", label: "label", link: "link", navigationExtras: "navigationExtras" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n    <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n    {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6$2.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiBreadcrumbItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Router }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.LogService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiBreadcrumbItemComponent, selector: "eui-breadcrumb-item", inputs: { id: "id", label: "label", link: "link", navigationExtras: "navigationExtras" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n    <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n    {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6$2.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiBreadcrumbItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-breadcrumb-item', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n    <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n    {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.LogService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Router }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.LogService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { string: [{
                 type: HostBinding,
@@ -1905,7 +1944,7 @@ class CollapsedBreadcrumbComponent {
         return !!this.customButton;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CollapsedBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: CollapsedBreadcrumbComponent, selector: "eui-collapsed-breadcrumb", queries: [{ propertyName: "customButton", first: true, predicate: i0.forwardRef(() => CollapsedButtonDirective), descendants: true, static: true }, { propertyName: "listItemComponents", predicate: i0.forwardRef(() => EuiListItemComponent) }], viewQueries: [{ propertyName: "list", first: true, predicate: EuiListComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<eui-dropdown>\n    <!-- render default collapsed button if no custom is provided -->\n    <ng-container *ngIf=\"!hasCustomButton()\">\n        <button type=\"button\" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n            <eui-icon-svg icon=\"eui-ellipsis-horizontal\"></eui-icon-svg>\n        </button>\n    </ng-container>\n    <!-- provide customizations for the collapsed button -->\n    <ng-content select=\"collapsed-button\"></ng-content>\n    <eui-dropdown-content>\n        <ul euiList>\n            <ng-content></ng-content>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n\n<!-- SAMPLE aligned with Design System\n<eui-dropdown>\n    <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiPrimary euiSizeS euiTooltip=\"Other links menu\" [attr.aria-label]=\"'Other links menu'\">\n        <eui-icon-svg icon=\"ellipsis-horizontal\" fillColor=\"grey-100\"></eui-icon-svg>\n    </button>\n    <eui-dropdown-content>\n        <ul euiList>\n            <li euiListItem>\n                <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n                <button type=\"button\" euiSizeXS euiListItem>Item 1</button>\n            </li>\n            <li euiListItem>\n                <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n                <button type=\"button\" euiSizeXS euiListItem>Item 2</button>\n            </li>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n-->\n", styles: [".eui-breadcrumb-item{align-items:center;display:flex;font-size:v(eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:v(eui-base-font-size-s);font-weight:700;padding:0 v(eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:v(eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4$1.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i4$1.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5$2.EuiListComponent, selector: "[euiList], eui-list", inputs: ["isCollapsible"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: CollapsedBreadcrumbComponent, selector: "eui-collapsed-breadcrumb", queries: [{ propertyName: "customButton", first: true, predicate: i0.forwardRef(() => CollapsedButtonDirective), descendants: true, static: true }, { propertyName: "listItemComponents", predicate: i0.forwardRef(() => EuiListItemComponent) }], viewQueries: [{ propertyName: "list", first: true, predicate: EuiListComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<eui-dropdown>\n    <!-- render default collapsed button if no custom is provided -->\n    <ng-container *ngIf=\"!hasCustomButton()\">\n        <button type=\"button\" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n            <eui-icon-svg icon=\"eui-ellipsis-horizontal\"></eui-icon-svg>\n        </button>\n    </ng-container>\n    <!-- provide customizations for the collapsed button -->\n    <ng-content select=\"collapsed-button\"></ng-content>\n    <eui-dropdown-content>\n        <ul euiList>\n            <ng-content></ng-content>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n\n<!-- SAMPLE aligned with Design System\n<eui-dropdown>\n    <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiPrimary euiSizeS euiTooltip=\"Other links menu\" [attr.aria-label]=\"'Other links menu'\">\n        <eui-icon-svg icon=\"ellipsis-horizontal\" fillColor=\"grey-100\"></eui-icon-svg>\n    </button>\n    <eui-dropdown-content>\n        <ul euiList>\n            <li euiListItem>\n                <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n                <button type=\"button\" euiSizeXS euiListItem>Item 1</button>\n            </li>\n            <li euiListItem>\n                <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n                <button type=\"button\" euiSizeXS euiListItem>Item 2</button>\n            </li>\n        </ul>\n    </eui-dropdown-content>\n</eui-dropdown>\n-->\n", styles: [".eui-breadcrumb-item{align-items:center;display:flex;font-size:v(eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:v(eui-base-font-size-s);font-weight:700;padding:0 v(eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:v(eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5$2.EuiListComponent, selector: "[euiList], eui-list", inputs: ["isCollapsible"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CollapsedBreadcrumbComponent, decorators: [{
             type: Component,
@@ -2117,13 +2156,13 @@ class EuiBreadcrumbComponent {
             this.collapsedViewIcon = icon;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiBreadcrumbComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$4.ViewportRuler }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiBreadcrumbComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$3.ViewportRuler }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiBreadcrumbComponent, selector: "eui-breadcrumb", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(() => EuiBreadcrumbItemComponent) }], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"eui-breadcrumb__items\">\n    <ng-container #vcr>\n        <ng-content></ng-content>\n    </ng-container>\n</div>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-breadcrumb__items\">\n    <ng-container #vcr>\n        <ng-content></ng-content>\n    </ng-container>\n</div>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$4.ViewportRuler }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { string: [{
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$3.ViewportRuler }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { string: [{
                 type: HostBinding,
                 args: ['class']
             }], breadcrumbItems: [{
@@ -2455,7 +2494,7 @@ class EuiHeaderAppComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiHeaderAppComponent, deps: [{ token: i1.EuiAppShellService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiHeaderAppComponent, selector: "eui-header-app", inputs: { appName: "appName", appShortName: "appShortName", appSubTitle: "appSubTitle" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customAppName", first: true, predicate: i0.forwardRef(() => EuiHeaderAppNameDirective), descendants: true }, { propertyName: "customAppSubtitle", first: true, predicate: i0.forwardRef(() => EuiHeaderAppSubtitleDirective), descendants: true }, { propertyName: "customAppNameLogo", first: true, predicate: i0.forwardRef(() => EuiHeaderAppNameLogoDirective), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"customAppName\">\n    <div class=\"eui-header-app__title full\">\n        <ng-content select=\"eui-header-app-name\"></ng-content>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"!customAppName\">\n    <div *ngIf=\"appName\" class=\"eui-header-app__title full\">\n        {{ appName }}\n    </div>\n</ng-container>\n\n<div class=\"eui-header-app__title short\">\n    {{ appShortName }}\n</div>\n\n<ng-container *ngIf=\"customAppSubtitle\">\n    <div class=\"eui-header-app__sub-title\">\n        <ng-content select=\"eui-header-app-subtitle\"></ng-content>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"!customAppSubtitle\">\n    <div *ngIf=\"appSubTitle\" class=\"eui-header-app__sub-title\">{{ appSubTitle }}</div>\n</ng-container>\n\n<ng-container *ngIf=\"customAppNameLogo\">\n    <div class=\"eui-header-app-__title-logo\">\n        <ng-content select=\"eui-header-app-name-logo\"></ng-content>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiHeaderAppComponent, selector: "eui-header-app", inputs: { appName: "appName", appShortName: "appShortName", appSubTitle: "appSubTitle" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customAppName", first: true, predicate: i0.forwardRef(() => EuiHeaderAppNameDirective), descendants: true }, { propertyName: "customAppSubtitle", first: true, predicate: i0.forwardRef(() => EuiHeaderAppSubtitleDirective), descendants: true }, { propertyName: "customAppNameLogo", first: true, predicate: i0.forwardRef(() => EuiHeaderAppNameLogoDirective), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"customAppName\">\n    <div class=\"eui-header-app__title full\">\n        <ng-content select=\"eui-header-app-name\"></ng-content>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"!customAppName\">\n    <div *ngIf=\"appName\" class=\"eui-header-app__title full\">\n        {{ appName }}\n    </div>\n</ng-container>\n\n<div class=\"eui-header-app__title short\">\n    {{ appShortName }}\n</div>\n\n<ng-container *ngIf=\"customAppSubtitle\">\n    <div class=\"eui-header-app__sub-title\">\n        <ng-content select=\"eui-header-app-subtitle\"></ng-content>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"!customAppSubtitle\">\n    <div *ngIf=\"appSubTitle\" class=\"eui-header-app__sub-title\">{{ appSubTitle }}</div>\n</ng-container>\n\n<ng-container *ngIf=\"customAppNameLogo\">\n    <div class=\"eui-header-app-__title-logo\">\n        <ng-content select=\"eui-header-app-name-logo\"></ng-content>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiHeaderAppComponent, decorators: [{
             type: Component,
@@ -2565,7 +2604,7 @@ class EuiHeaderLogoComponent {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiHeaderLogoComponent, deps: [{ token: i1.EuiAppShellService, optional: true }, { token: EUI_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiHeaderLogoComponent, selector: "eui-header-logo", inputs: { homeUrl: "homeUrl" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<img class=\"logo-svg\" [src]=\"svgUrl\" [routerLink]=\"homeUrl\" alt=\"EC logo\" />\n", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiHeaderLogoComponent, selector: "eui-header-logo", inputs: { homeUrl: "homeUrl" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<img class=\"logo-svg\" [src]=\"svgUrl\" [routerLink]=\"homeUrl\" alt=\"EC logo\" />\n", dependencies: [{ kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiHeaderLogoComponent, decorators: [{
             type: Component,
@@ -2597,7 +2636,7 @@ class EuiHeaderUserProfileComponent {
         this.userProfile.closeDropdown();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiHeaderUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiHeaderUserProfileComponent, selector: "eui-header-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent) }], 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    [hasMenu]=\"userProfileMenu.length !== 0\"\n    [isShowUserInfos]=\"isShowUserInfos\"\n    [isShowAvatarInitials]=\"isShowAvatarInitials\"\n    [hasTabNavigation]=\"hasTabNavigation\"\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n", dependencies: [{ kind: "component", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "hasMenu", "isShowUserInfos", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiHeaderUserProfileComponent, selector: "eui-header-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent) }], 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    [hasMenu]=\"userProfileMenu.length !== 0\"\n    [isShowUserInfos]=\"isShowUserInfos\"\n    [isShowAvatarInitials]=\"isShowAvatarInitials\"\n    [hasTabNavigation]=\"hasTabNavigation\"\n    #userProfile>\n    <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n", dependencies: [{ kind: "component", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "hasMenu", "isShowUserInfos", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean$1
@@ -2800,7 +2839,7 @@ class EuiNotificationItemComponent {
         consumeEvent(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: "isShowMarkAsRead" }, 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-bg-color-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-font-s\">\n        <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n            <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                <!-- TODO v15 replace by eui-icon-svg -->\n                <span\n                    class=\"eui-icon eui-icon-bell eui-u-font-m\"\n                    [ngClass]=\"{\n                        'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n                        'eui-u-color-grey-20': item.metadata?.read\n                    }\"></span>\n                <span\n                    *ngIf=\"item.metadata?.new\"\n                    class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s eui-icon eui-icon-circle\"></span>\n            </span>\n            <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n        </div>\n        <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n            <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </div>\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        <ng-template [ngIf]=\"item.metadata?.url\">\n            <a href=\"{{ item.metadata.url }}\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n            <a\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            <div\n                *ngIf=\"item.subLabel\"\n                class=\"eui-notification-item-content-middle__sub-label\"\n                [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n        </ng-template>\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        <a *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\" href=\"javascript:void(0)\" (click)=\"onItemMarkAsRead($event)\">\n            {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n        </a>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.EuiTruncatePipe, name: "euiTruncate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: "isShowMarkAsRead" }, 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-bg-color-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-font-s\">\n        <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n            <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                <!-- TODO v15 replace by eui-icon-svg -->\n                <span\n                    class=\"eui-icon eui-icon-bell eui-u-font-m\"\n                    [ngClass]=\"{\n                        'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n                        'eui-u-color-grey-20': item.metadata?.read\n                    }\"></span>\n                <span\n                    *ngIf=\"item.metadata?.new\"\n                    class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s eui-icon eui-icon-circle\"></span>\n            </span>\n            <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n        </div>\n        <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n            <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </div>\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        <ng-template [ngIf]=\"item.metadata?.url\">\n            <a href=\"{{ item.metadata.url }}\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n            <a\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            <div\n                *ngIf=\"item.subLabel\"\n                class=\"eui-notification-item-content-middle__sub-label\"\n                [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n        </ng-template>\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        <a *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\" href=\"javascript:void(0)\" (click)=\"onItemMarkAsRead($event)\">\n            {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n        </a>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4$1.EuiTruncatePipe, name: "euiTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationItemComponent, decorators: [{
             type: Component,
@@ -2995,11 +3034,11 @@ class EuiNotificationsComponent {
         return unreadNotifications.length;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationsComponent, 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", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg-button\n    class=\"eui-notifications__trigger\"\n    iconSvgName=\"eui-notifications\"\n    iconSvgSize=\"l\"\n    iconSvgFillColor=\"white\"\n    (click)=\"onClicked($event)\"\n    (keydown.enter)=\"onClicked($event)\"\n    (keydown.esc)=\"onHide()\"\n    hasFocusBorder>\n    <eui-badge *ngIf=\"count\" euiSize euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\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                <span\n                    *ngIf=\"items\"\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                <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n                <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n            </div>\n        </div>\n\n        <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowMarkAllAsReadButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowSettingsButton\"\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\" fillColor=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowRefreshButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n        </div>\n    </eui-overlay-header>\n\n    <eui-overlay-body>\n        <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n            <eui-notification-item\n                *ngFor=\"let item of items; trackBy: trackByFn\"\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        </ul>\n    </eui-overlay-body>\n\n    <eui-overlay-footer>\n        <ng-template [ngIf]=\"items?.length > 0\">\n            <strong\n                ><a (click)=\"onViewAllClick($event)\">{{\n                    viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n                }}</a></strong\n            >\n        </ng-template>\n        <ng-template [ngIf]=\"items?.length === 0\">\n            <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n            </div>\n            <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n                <strong\n                    ><a (click)=\"onNoNotificationFoundClick()\">{{\n                        noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                    }}</a></strong\n                >\n            </div>\n        </ng-template>\n    </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$6.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$6.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$6.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationsComponent, 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", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg-button\n    class=\"eui-notifications__trigger\"\n    iconSvgName=\"eui-notifications\"\n    iconSvgSize=\"m\"\n    iconSvgFillColor=\"white\"\n    (click)=\"onClicked($event)\"\n    (keydown.enter)=\"onClicked($event)\"\n    (keydown.esc)=\"onHide()\"\n    hasFocusBorder>\n    <eui-badge *ngIf=\"count\" euiSizeS euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\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                <span\n                    *ngIf=\"items\"\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                <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n                <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n            </div>\n        </div>\n\n        <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowMarkAllAsReadButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowSettingsButton\"\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\" fillColor=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowRefreshButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n        </div>\n    </eui-overlay-header>\n\n    <eui-overlay-body>\n        <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n            <eui-notification-item\n                *ngFor=\"let item of items; trackBy: trackByFn\"\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        </ul>\n    </eui-overlay-body>\n\n    <eui-overlay-footer>\n        <ng-template [ngIf]=\"items?.length > 0\">\n            <strong\n                ><a (click)=\"onViewAllClick($event)\">{{\n                    viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n                }}</a></strong\n            >\n        </ng-template>\n        <ng-template [ngIf]=\"items?.length === 0\">\n            <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n            </div>\n            <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n                <strong\n                    ><a (click)=\"onNoNotificationFoundClick()\">{{\n                        noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                    }}</a></strong\n                >\n            </div>\n        </ng-template>\n    </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$5.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$5.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$5.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$5.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-notifications', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg-button\n    class=\"eui-notifications__trigger\"\n    iconSvgName=\"eui-notifications\"\n    iconSvgSize=\"l\"\n    iconSvgFillColor=\"white\"\n    (click)=\"onClicked($event)\"\n    (keydown.enter)=\"onClicked($event)\"\n    (keydown.esc)=\"onHide()\"\n    hasFocusBorder>\n    <eui-badge *ngIf=\"count\" euiSize euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\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                <span\n                    *ngIf=\"items\"\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                <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n                <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n            </div>\n        </div>\n\n        <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowMarkAllAsReadButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowSettingsButton\"\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\" fillColor=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowRefreshButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n        </div>\n    </eui-overlay-header>\n\n    <eui-overlay-body>\n        <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n            <eui-notification-item\n                *ngFor=\"let item of items; trackBy: trackByFn\"\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        </ul>\n    </eui-overlay-body>\n\n    <eui-overlay-footer>\n        <ng-template [ngIf]=\"items?.length > 0\">\n            <strong\n                ><a (click)=\"onViewAllClick($event)\">{{\n                    viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n                }}</a></strong\n            >\n        </ng-template>\n        <ng-template [ngIf]=\"items?.length === 0\">\n            <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n            </div>\n            <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n                <strong\n                    ><a (click)=\"onNoNotificationFoundClick()\">{{\n                        noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                    }}</a></strong\n                >\n            </div>\n        </ng-template>\n    </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'eui-notifications', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg-button\n    class=\"eui-notifications__trigger\"\n    iconSvgName=\"eui-notifications\"\n    iconSvgSize=\"m\"\n    iconSvgFillColor=\"white\"\n    (click)=\"onClicked($event)\"\n    (keydown.enter)=\"onClicked($event)\"\n    (keydown.esc)=\"onHide()\"\n    hasFocusBorder>\n    <eui-badge *ngIf=\"count\" euiSizeS euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\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                <span\n                    *ngIf=\"items\"\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                <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n                <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n            </div>\n        </div>\n\n        <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowMarkAllAsReadButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowSettingsButton\"\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\" fillColor=\"primary-100\"></eui-icon-svg>\n            </button>\n            <button\n                euiButton\n                euiPrimary\n                euiRounded\n                euiIconButton\n                euiBasicButton\n                euiSizeS\n                type=\"button\"\n                *ngIf=\"isShowRefreshButton\"\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=\"primary-100\"></eui-icon-svg>\n            </button>\n        </div>\n    </eui-overlay-header>\n\n    <eui-overlay-body>\n        <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n            <eui-notification-item\n                *ngFor=\"let item of items; trackBy: trackByFn\"\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        </ul>\n    </eui-overlay-body>\n\n    <eui-overlay-footer>\n        <ng-template [ngIf]=\"items?.length > 0\">\n            <strong\n                ><a (click)=\"onViewAllClick($event)\">{{\n                    viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n                }}</a></strong\n            >\n        </ng-template>\n        <ng-template [ngIf]=\"items?.length === 0\">\n            <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n            </div>\n            <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n                <strong\n                    ><a (click)=\"onNoNotificationFoundClick()\">{{\n                        noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                    }}</a></strong\n                >\n            </div>\n        </ng-template>\n    </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
         }], propDecorators: { refreshClick: [{
                 type: Output
             }], notificationsClick: [{
@@ -3109,7 +3148,7 @@ class EuiNotificationItemV2Component {
         consumeEvent(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationItemV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: "isShowMarkAsRead" }, 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-bg-color-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-font-s\">\n        <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n            <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                <!-- TODO v15 replace by eui-icon-svg -->\n                <span\n                    class=\"eui-icon eui-icon-bell eui-u-font-m\"\n                    [ngClass]=\"{\n                        'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n                        'eui-u-color-grey-20': item.metadata?.read\n                    }\"></span>\n                <span\n                    *ngIf=\"item.metadata?.new\"\n                    class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s eui-icon eui-icon-circle\"></span>\n            </span>\n            <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n        </div>\n        <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n            <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </div>\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        <ng-template [ngIf]=\"item.metadata?.url\">\n            <a href=\"{{ item.metadata.url }}\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n            <a\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            <div\n                *ngIf=\"item.subLabel\"\n                class=\"eui-notification-item-content-middle__sub-label\"\n                [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n        </ng-template>\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        <a\n            class=\"eui-u-text-link\"\n            *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n            href=\"javascript:void(0)\"\n            (click)=\"onItemMarkAsRead($event)\" tabIndex=\"0\">\n            {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n        </a>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.EuiTruncatePipe, name: "euiTruncate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: "isShowMarkAsRead" }, 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-bg-color-white': item.metadata?.read || !item.metadata }\">\n    <div class=\"eui-notification-item-content-top eui-u-font-s\">\n        <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n            <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n                <!-- TODO v15 replace by eui-icon-svg -->\n                <span\n                    class=\"eui-icon eui-icon-bell eui-u-font-m\"\n                    [ngClass]=\"{\n                        'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n                        'eui-u-color-grey-20': item.metadata?.read\n                    }\"></span>\n                <span\n                    *ngIf=\"item.metadata?.new\"\n                    class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s eui-icon eui-icon-circle\"></span>\n            </span>\n            <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n        </div>\n        <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n            <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n        </div>\n    </div>\n    <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n        <ng-template [ngIf]=\"item.metadata?.url\">\n            <a href=\"{{ item.metadata.url }}\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n            <a\n                href=\"{{ item.metadata.urlExternal }}\"\n                [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\" tabIndex=\"0\">\n                <div\n                    class=\"eui-notification-item-content-middle__label\"\n                    [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                    {{ item.label | translate | euiTruncate: 200 }}\n                </div>\n                <div\n                    *ngIf=\"item.subLabel\"\n                    class=\"eui-notification-item-content-middle__sub-label\"\n                    [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n            </a>\n        </ng-template>\n\n        <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n            <div\n                class=\"eui-notification-item-content-middle__label\"\n                [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n                {{ item.label | translate | euiTruncate: 200 }}\n            </div>\n            <div\n                *ngIf=\"item.subLabel\"\n                class=\"eui-notification-item-content-middle__sub-label\"\n                [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n        </ng-template>\n    </span>\n    <div class=\"eui-notification-item-content-bottom\">\n        <a\n            class=\"eui-u-text-link\"\n            *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n            href=\"javascript:void(0)\"\n            (click)=\"onItemMarkAsRead($event)\" tabIndex=\"0\">\n            {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n        </a>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4$1.EuiTruncatePipe, name: "euiTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationItemV2Component, decorators: [{
             type: Component,
@@ -3289,7 +3328,7 @@ class EuiNotificationsV2Component {
         return unreadNotifications.length;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationsV2Component, 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", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: "noNotificationFoundLink", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg\n    class=\"eui-notifications-v2__trigger\"\n    role=\"button\"\n    size=\"m\"\n    icon=\"eui-notifications\"\n    fillColor=\"grey-5\"\n    (click)=\"onClicked($event)\"\n    (keydown.enter)=\"onClicked($event)\"\n    (keydown.esc)=\"onHide()\"\n    tabindex=\"0\">\n    <eui-badge *ngIf=\"unreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\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                        <span class=\"ml-2 eui-u-font-xs eui-icon eui-icon-chevron-right\"></span>\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                <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n                    {{ 'notif.MARK-ALL-READ' | translate }}\n                </a>\n                <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n                    <span class=\"eui-u-flex\">\n                        <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n                        {{ 'notif.SV-REFRESH' | translate }}\n                    </span>\n                </a>\n            </div>\n        </div>\n    </eui-overlay-header>\n\n    <eui-overlay-body>\n        <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n            <eui-notification-item-v2\n                *ngFor=\"let item of items; trackBy: trackByFn\"\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        </ul>\n    </eui-overlay-body>\n\n    <eui-overlay-footer>\n        <ng-template [ngIf]=\"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        </ng-template>\n        <ng-template [ngIf]=\"items?.length === 0\">\n            <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n            </div>\n            <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n                <strong\n                    ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n                        noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                    }}</a></strong\n                >\n            </div>\n        </ng-template>\n    </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-base-color-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger{cursor:pointer;margin-top:var(--eui-base-spacing-xs);margin-left:var(--eui-base-spacing-s)}.eui-notifications-v2__trigger:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:5px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications-v2__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-info-10);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$6.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$6.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$6.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: EuiNotificationsV2Component, 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", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: "noNotificationFoundLink", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg\n    class=\"eui-notifications-v2__trigger\"\n    role=\"button\"\n    size=\"m\"\n    icon=\"eui-notifications\"\n    fillColor=\"grey-5\"\n    (click)=\"onClicked($event)\"\n    (keydown.enter)=\"onClicked($event)\"\n    (keydown.esc)=\"onHide()\"\n    tabindex=\"0\">\n    <eui-badge *ngIf=\"unreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\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                        <span class=\"ml-2 eui-u-font-xs eui-icon eui-icon-chevron-right\"></span>\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                <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n                    {{ 'notif.MARK-ALL-READ' | translate }}\n                </a>\n                <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n                    <span class=\"eui-u-flex\">\n                        <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n                        {{ 'notif.SV-REFRESH' | translate }}\n                    </span>\n                </a>\n            </div>\n        </div>\n    </eui-overlay-header>\n\n    <eui-overlay-body>\n        <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n            <eui-notification-item-v2\n                *ngFor=\"let item of items; trackBy: trackByFn\"\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        </ul>\n    </eui-overlay-body>\n\n    <eui-overlay-footer>\n        <ng-template [ngIf]=\"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        </ng-template>\n        <ng-template [ngIf]=\"items?.length === 0\">\n            <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n                {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n            </div>\n            <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n                <strong\n                    ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n                        noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n                    }}</a></strong\n                >\n            </div>\n        </ng-template>\n    </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-base-color-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger{cursor:pointer;margin-top:var(--eui-base-spacing-xs);margin-left:var(--eui-base-spacing-s)}.eui-notifications-v2__trigger:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:5px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications-v2__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-info-10);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$5.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$5.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$5.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$5.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: EuiNotificationsV2Component, decorators: [{
             type: Component,