@eui/components 18.2.0-snapshot-1725457842618 → 18.2.0-snapshot-1725585671762

package/fesm2022/eui-components-eui-navbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-components-eui-navbar.mjs","sources":["../../eui-navbar/eui-navbar-item/eui-navbar-item.component.ts","../../eui-navbar/eui-navbar.component.ts","../../eui-navbar/eui-navbar.component.html","../../eui-navbar/eui-navbar.module.ts","../../eui-navbar/eui-components-eui-navbar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    Host,\n    HostBinding,\n    HostListener,\n    Inject,\n    Input,\n    Optional,\n    booleanAttribute,\n    forwardRef,\n} from '@angular/core';\nimport { EuiNavbarComponent } from '../eui-navbar.component';\n\n@Component({\n    selector: 'eui-navbar-item',\n    template: '{{ label }}',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class EuiNavbarItemComponent {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            'eui-navbar-item',\n            this.isActive ? 'eui-navbar-item--active' : '',\n        ].join(' ').trim();\n    }\n\n    @HostBinding('attr.tabindex') tabindex = 0;\n\n    @Input() id: string;\n    @Input() label: string;\n    @Input({ transform: booleanAttribute }) isActive = false;\n\n    navBarComponentParent: EuiNavbarComponent;\n\n    constructor(@Host() @Optional() @Inject(forwardRef(() => EuiNavbarComponent)) navBarComponent) {\n        this.navBarComponentParent = navBarComponent;\n    }\n\n    @HostListener('click')\n    protected onClick(): void {\n        this._click();\n    }\n\n    @HostListener('keydown', ['$event'])\n    protected onKeydown(event: KeyboardEvent): void {\n        switch (event.code) {\n            case 'Enter':\n            case 'Space':\n                event.preventDefault();\n                event.stopPropagation();\n                this._click();\n                break;\n        }\n    }\n\n    private _click(): void {\n        this.navBarComponentParent.itemSelected(this.id);\n    }\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n    HostBinding,\n    ViewEncapsulation,\n    Output,\n    EventEmitter,\n    ContentChildren,\n    forwardRef,\n    QueryList,\n    ElementRef,\n    AfterViewInit,\n    AfterContentInit,\n} from '@angular/core';\nimport { EuiNavbarItemComponent } from './eui-navbar-item/eui-navbar-item.component';\nimport { EuiAppShellService } from '@eui/core';\nimport { EuiDropdownModule } from '@eui/components/eui-dropdown';\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { AsyncPipe, NgFor, NgForOf } from '@angular/common';\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n@Component({\n    selector: 'eui-navbar',\n    templateUrl: './eui-navbar.component.html',\n    styleUrl: './styles/_index.scss',\n    changeDetection: ChangeDetectionStrategy.Default,\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [\n        EuiDropdownModule,\n        EuiButtonModule,\n        EuiIconModule,\n        AsyncPipe,\n        NgForOf,\n        NgFor,\n    ],\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: [\n                'euiPrimary',\n                'euiSecondary',\n            ],\n        },\n    ],\n})\nexport class EuiNavbarComponent implements AfterContentInit, AfterViewInit {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return [\n            this.baseStatesDirective.getCssClasses('eui-navbar'),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    @Output() itemClick: EventEmitter<string> = new EventEmitter();\n\n    @ContentChildren(forwardRef(() => EuiNavbarItemComponent)) items: QueryList<EuiNavbarItemComponent>;\n\n    public baseItemSelected: EuiNavbarItemComponent;\n    public isDropdownView = false;\n\n    constructor(\n        public asService: EuiAppShellService,\n        private elementRef: ElementRef,\n        public baseStatesDirective: BaseStatesDirective,\n    ) {}\n\n    ngAfterContentInit(): void {\n        this.baseItemSelected = this.items.filter((i) => i.isActive)[0];\n    }\n\n    ngAfterViewInit(): void {\n        const parentWidth = this.elementRef.nativeElement.parentWidth;\n        const width = this.elementRef.nativeElement.clientWidth;\n\n        if (width > parentWidth) {\n            setTimeout(() => {\n                this.isDropdownView = true;\n            }, 1);\n        }\n    }\n\n    public itemSelected(id: string): void {\n        this.items.forEach((item) => {\n            if (item.id === id) {\n                item.isActive = true;\n            } else {\n                item.isActive = false;\n            }\n        });\n        this.itemClick.emit(id);\n    }\n}\n","@if ( (asService.breakpoints$ | async).isLtLargeTablet || isDropdownView ) {\n    <eui-dropdown isLabelUpdatedFromSelectedItem>\n        <button euiButton euiSecondary euiSizeS [attr.aria-label]=\"'Button trigger'\">\n            <span class=\"eui-label\">{{ baseItemSelected.label }}</span>\n            <eui-icon-svg icon=\"chevron-down:sharp\" size=\"s\"></eui-icon-svg>\n        </button>\n        <eui-dropdown-content>\n            <button *ngFor=\"let item of items\" euiDropdownItem (click)=\"itemSelected(item.id)\" ariaLabel=\"{{ item.label }}\">\n                {{ item.label }}\n            </button>\n        </eui-dropdown-content>\n    </eui-dropdown>\n} @else {\n    <ng-content></ng-content>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiNavbarComponent } from './eui-navbar.component';\nimport { EuiNavbarItemComponent } from './eui-navbar-item/eui-navbar-item.component';\n\n@NgModule({\n    imports: [CommonModule, EuiNavbarComponent, EuiNavbarItemComponent],\n    exports: [EuiNavbarComponent, EuiNavbarItemComponent],\n})\nexport class EuiNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-components-layout.mjs

@@ -745,7 +745,7 @@ class EuiToolbarComponent {
         }, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EuiToolbarComponent, isStandalone: true, selector: "eui-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute], euiPrimary: ["euiPrimary", "euiPrimary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenu", first: true, predicate: i0.forwardRef(() => EuiToolbarMenuComponent), descendants: true }], ngImport: i0, template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n    <div class=\"eui-toolbar__left\">\n        @if ( ( asService.state$ | async).hasHeaderLogo ) {\n            <eui-toolbar-logo></eui-toolbar-logo>\n        }\n        @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n            <eui-toolbar-environment>\n                {{ (asService.state$ | async).environmentValue }}\n            </eui-toolbar-environment>\n        }\n        @if ( (asService.state$ | async).appName ) {\n            <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n        }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n\n} @else {\n    @if ( (asService.state$ | async).hasHeader ) {\n\n        @if ( hasMenu ) {\n            <ng-container *ngTemplateOutlet=\"toolbarMenu\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    } @else {\n\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-logo\"></ng-content>\n            <ng-content select=\"eui-toolbar-app\"></ng-content>\n            <ng-content select=\"eui-toolbar-environment\"></ng-content>\n            <ng-content select=\"eui-toolbar-navbar\"></ng-content>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n        <div class=\"eui-toolbar__right\">\n            <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n        </div>\n\n    }\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n}\n\n<ng-template #toolbarCenter>\n    <ng-content select=\"eui-toolbar-center\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarItems>\n    <ng-content select=\"eui-toolbar-items\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarMenu>\n    @if (hasMenu) {\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-menu\"></ng-content>\n        </div>\n    }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-content select=\"eui-language-selector\"></ng-content>\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-neutral-lightest);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-danger-dark);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-3xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-neutral-bg-light);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light);color:var(--eui-c-branding-light-contrast)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar-logo,.eui-toolbar-environment{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"], dependencies: [{ kind: "component", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: ["homeUrl", "logoUrl", "logoHeight", "logoWidth"] }, { kind: "component", type: EuiToolbarEnvironmentComponent, selector: "eui-toolbar-environment" }, { kind: "component", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: ["appName", "appSubTitle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EuiToolbarComponent, isStandalone: true, selector: "eui-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute], euiPrimary: ["euiPrimary", "euiPrimary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenu", first: true, predicate: i0.forwardRef(() => EuiToolbarMenuComponent), descendants: true }], ngImport: i0, template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n    <div class=\"eui-toolbar__left\">\n        @if ( ( asService.state$ | async).hasHeaderLogo ) {\n            <eui-toolbar-logo></eui-toolbar-logo>\n        }\n        @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n            <eui-toolbar-environment>\n                {{ (asService.state$ | async).environmentValue }}\n            </eui-toolbar-environment>\n        }\n        @if ( (asService.state$ | async).appName ) {\n            <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n        }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n\n} @else {\n    @if ( (asService.state$ | async).hasHeader ) {\n\n        @if ( hasMenu ) {\n            <ng-container *ngTemplateOutlet=\"toolbarMenu\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    } @else {\n\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-logo\"></ng-content>\n            <ng-content select=\"eui-toolbar-app\"></ng-content>\n            <ng-content select=\"eui-toolbar-environment\"></ng-content>\n            <ng-content select=\"eui-toolbar-navbar\"></ng-content>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n        <div class=\"eui-toolbar__right\">\n            <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n        </div>\n\n    }\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n}\n\n<ng-template #toolbarCenter>\n    <ng-content select=\"eui-toolbar-center\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarItems>\n    <ng-content select=\"eui-toolbar-items\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarMenu>\n    @if (hasMenu) {\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-menu\"></ng-content>\n        </div>\n    }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-content select=\"eui-language-selector\"></ng-content>\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-neutral-lightest);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-danger-dark);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-3xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-neutral-bg-light);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light);color:var(--eui-c-branding-light-contrast)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar-logo{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-toolbar-environment{font:var(--eui-f-xs-compact);transform:rotate(0);top:0;height:var(--eui-s-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"], dependencies: [{ kind: "component", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: ["homeUrl", "logoUrl", "logoHeight", "logoWidth"] }, { kind: "component", type: EuiToolbarEnvironmentComponent, selector: "eui-toolbar-environment" }, { kind: "component", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: ["appName", "appSubTitle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiToolbarComponent, decorators: [{
             type: Component,
@@ -755,7 +755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                         EuiToolbarAppComponent,
                         AsyncPipe,
                         NgTemplateOutlet,
-                    ], template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n    <div class=\"eui-toolbar__left\">\n        @if ( ( asService.state$ | async).hasHeaderLogo ) {\n            <eui-toolbar-logo></eui-toolbar-logo>\n        }\n        @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n            <eui-toolbar-environment>\n                {{ (asService.state$ | async).environmentValue }}\n            </eui-toolbar-environment>\n        }\n        @if ( (asService.state$ | async).appName ) {\n            <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n        }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n\n} @else {\n    @if ( (asService.state$ | async).hasHeader ) {\n\n        @if ( hasMenu ) {\n            <ng-container *ngTemplateOutlet=\"toolbarMenu\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    } @else {\n\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-logo\"></ng-content>\n            <ng-content select=\"eui-toolbar-app\"></ng-content>\n            <ng-content select=\"eui-toolbar-environment\"></ng-content>\n            <ng-content select=\"eui-toolbar-navbar\"></ng-content>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n        <div class=\"eui-toolbar__right\">\n            <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n        </div>\n\n    }\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n}\n\n<ng-template #toolbarCenter>\n    <ng-content select=\"eui-toolbar-center\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarItems>\n    <ng-content select=\"eui-toolbar-items\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarMenu>\n    @if (hasMenu) {\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-menu\"></ng-content>\n        </div>\n    }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-content select=\"eui-language-selector\"></ng-content>\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-neutral-lightest);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-danger-dark);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-3xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-neutral-bg-light);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light);color:var(--eui-c-branding-light-contrast)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar-logo,.eui-toolbar-environment{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"] }]
+                    ], template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n    <div class=\"eui-toolbar__left\">\n        @if ( ( asService.state$ | async).hasHeaderLogo ) {\n            <eui-toolbar-logo></eui-toolbar-logo>\n        }\n        @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n            <eui-toolbar-environment>\n                {{ (asService.state$ | async).environmentValue }}\n            </eui-toolbar-environment>\n        }\n        @if ( (asService.state$ | async).appName ) {\n            <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n        }\n    </div>\n\n    <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n\n} @else {\n    @if ( (asService.state$ | async).hasHeader ) {\n\n        @if ( hasMenu ) {\n            <ng-container *ngTemplateOutlet=\"toolbarMenu\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n\n    } @else {\n\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-logo\"></ng-content>\n            <ng-content select=\"eui-toolbar-app\"></ng-content>\n            <ng-content select=\"eui-toolbar-environment\"></ng-content>\n            <ng-content select=\"eui-toolbar-navbar\"></ng-content>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"toolbarCenter\"></ng-container>\n\n        <div class=\"eui-toolbar__right\">\n            <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n        </div>\n\n    }\n    <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\"></ng-container>\n}\n\n<ng-template #toolbarCenter>\n    <ng-content select=\"eui-toolbar-center\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarItems>\n    <ng-content select=\"eui-toolbar-items\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarMenu>\n    @if (hasMenu) {\n        <div class=\"eui-toolbar__left\">\n            <ng-content select=\"eui-toolbar-menu\"></ng-content>\n        </div>\n    }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n    <ng-content select=\"eui-language-selector\"></ng-content>\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-neutral-lightest);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-danger-dark);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-3xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-neutral-bg-light);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light);color:var(--eui-c-branding-light-contrast)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar-logo{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-toolbar-environment{font:var(--eui-f-xs-compact);transform:rotate(0);top:0;height:var(--eui-s-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EuiAppShellService }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']