@eui/components 18.2.15 → 18.2.16-snapshot-1756456305763

package/fesm2022/eui-components-layout.mjs

@@ -607,7 +607,7 @@ class EuiToolbarMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuiToolbarMenuComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EuiToolbarMenuComponent, isStandalone: true, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <ng-container *ngFor=\"let link of items\">\n            <li *ngIf=\"link.visible === undefined || link.visible === true\" [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 ? 'neutral' : 'white'\"\n                            class=\"eui-u-mr-xs\" />\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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-s\" />\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 ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-mr-xs\" />\n\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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-xs\" />\n                    </div>\n                </a>\n\n                <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                    <ng-container *ngFor=\"let childLink of link.children\">\n                        <li\n                            *ngIf=\"childLink.visible === undefined || childLink.visible === true\"\n                            class=\"child\"\n                            [class.has-sub]=\"childLink?.children\"\n                            [class.separator]=\"childLink.isSeparator\"\n                            [class.selected]=\"childLink.active\">\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                                <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 }}\" />\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                                <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 }}\" />\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                                <ng-container *ngFor=\"let childSubLink of childLink.children\">\n                                    <li *ngIf=\"childSubLink.visible === undefined || childSubLink.visible === true\" class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\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                                            <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 }}\" />\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                                            <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 }}\" />\n                                            <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                                        </a>\n                                    </li>\n                                </ng-container>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </li>\n        </ng-container>\n    </ul>\n</nav>\n", styles: [".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-zi-nav)}.eui-toolbar-menu-content ul:not(.show){display:flex;list-style:none;width:100%;z-index:calc(var(--eui-zi-sidebar) + 1)}.eui-toolbar-menu-content ul,.eui-toolbar-menu-content ul li,.eui-toolbar-menu-content ul li a{border:var(--eui-bw-none);border-bottom:2px solid var(--eui-c-branding);color:var(--eui-c-white);display:block;height:var(--eui-app-toolbar-height);line-height:var(--eui-s-l);margin:0;max-height:var(--eui-app-toolbar-height);min-width:0;padding:0;position:relative;text-decoration:none;display:flex}.eui-toolbar-menu-content ul.disabled,.eui-toolbar-menu-content ul li.disabled,.eui-toolbar-menu-content ul li a.disabled{opacity:var(--eui-o-50)}.eui-toolbar-menu-content ul.disabled:hover,.eui-toolbar-menu-content ul li.disabled:hover,.eui-toolbar-menu-content ul li a.disabled:hover{color:var(--eui-c-neutral-lighter)!important}.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-c-branding);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:empty{min-width:0}.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-s-m) var(--eui-s-s) var(--eui-s-xs);text-align:center;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-c-neutral-lighter)!important}.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-c-accent);border-bottom:3px solid var(--eui-c-accent-dark);color:var(--eui-c-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-c-neutral)!important;fill:var(--eui-c-neutral)!important}.eui-toolbar-menu-content>ul>li.selected>a.disabled,.eui-toolbar-menu-content>ul>li:hover>a.disabled{background-color:transparent!important;border-left:0;opacity:var(--eui-o-50);cursor:not-allowed}.eui-toolbar-menu-content ul ul{left:-9999px;position:absolute;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content li:hover>ul.show,.eui-toolbar-menu-content li:focus-within>ul.showOnEnter{flex-direction:column;left:auto;position:fixed}.eui-toolbar-menu-content .showOnEnter a:focus{border-color:var(--eui-c-neutral-bg-light)}.eui-toolbar-menu-content ul.show .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white);height:1.25rem;width:1.25rem}.eui-toolbar-menu-content ul ul ul{margin-left:100%;top:0;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content ul ul ul.show{position:absolute!important}.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-c-branding-dark);height:auto}.eui-toolbar-menu-content ul ul li.child:empty{min-height:0}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__icon{margin-right:var(--eui-s-xs)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__label{padding:var(--eui-s-2xs);position:relative}.eui-toolbar-menu-content ul ul li.hidden{display:none!important}.eui-toolbar-menu-content ul ul li.selected>a{border-left:3px solid var(--eui-c-accent-dark);color:var(--eui-c-accent)}.eui-toolbar-menu-content ul ul li a,.eui-toolbar-menu-content ul ul li h2{align-items:center;background:var(--eui-c-branding-dark);display:flex;line-height:1.25;min-height:var(--eui-s-3xl);padding:var(--eui-s-2xs) var(--eui-s-xs);text-decoration:none;transition:color .2s ease-in-out;width:260px}.eui-toolbar-menu-content ul ul li h2{color:var(--eui-c-accent);font-size:var(--eui-f-size-m);padding-left:var(--eui-s-xs);padding-top:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a{border-left:3px solid transparent;padding-left:var(--eui-s-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-c-accent-dark);color:var(--eui-c-accent)!important}.eui-toolbar-menu-content ul ul li.has-sub>a:after{border-bottom:2px solid var(--eui-c-neutral-lightest);border-right:2px solid var(--eui-c-neutral-lightest);content:\"\";height:var(--eui-s-s);position:absolute;right:var(--eui-s-s);transform:rotate(-45deg);width:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a.disabled{opacity:var(--eui-o-50);cursor:default}.eui-toolbar-menu-content ul ul li a.disabled:hover{border-left:3px solid transparent}.eui-toolbar-menu-content ul ul li.separator{background-color:var(--eui-c-neutral-bg-light)!important;height:1px!important}.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-f-size-base));position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i2$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EuiToolbarMenuComponent, isStandalone: true, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <ng-container *ngFor=\"let link of items\">\n            <li *ngIf=\"link.visible === undefined || link.visible === true\" [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 ? 'neutral' : 'white'\"\n                            class=\"eui-u-mr-xs\" />\n                        <eui-icon-svg\n                            *ngIf=\"link.iconSvgUrl\"\n                            [iconUrl]=\"link.iconSvgUrl\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            class=\"eui-u-mr-xs\" />\n                        <span *ngIf=\"link.iconClass && !link.iconSvgName && !link.iconSvgUrl\" 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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-s\" />\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 ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-mr-xs\" />\n\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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-xs\" />\n                    </div>\n                </a>\n\n                <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                    <ng-container *ngFor=\"let childLink of link.children\">\n                        <li\n                            *ngIf=\"childLink.visible === undefined || childLink.visible === true\"\n                            class=\"child\"\n                            [class.has-sub]=\"childLink?.children\"\n                            [class.separator]=\"childLink.isSeparator\"\n                            [class.selected]=\"childLink.active\">\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                                <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 }}\" />\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                                <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 }}\" />\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                                <ng-container *ngFor=\"let childSubLink of childLink.children\">\n                                    <li *ngIf=\"childSubLink.visible === undefined || childSubLink.visible === true\" class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\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                                            <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 }}\" />\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                                            <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 }}\" />\n                                            <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                                        </a>\n                                    </li>\n                                </ng-container>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </li>\n        </ng-container>\n    </ul>\n</nav>\n", styles: [".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-zi-nav)}.eui-toolbar-menu-content ul:not(.show){display:flex;list-style:none;width:100%;z-index:calc(var(--eui-zi-sidebar) + 1)}.eui-toolbar-menu-content ul,.eui-toolbar-menu-content ul li,.eui-toolbar-menu-content ul li a{border:var(--eui-bw-none);border-bottom:2px solid var(--eui-c-branding);color:var(--eui-c-white);display:block;height:var(--eui-app-toolbar-height);line-height:var(--eui-s-l);margin:0;max-height:var(--eui-app-toolbar-height);min-width:0;padding:0;position:relative;text-decoration:none;display:flex}.eui-toolbar-menu-content ul.disabled,.eui-toolbar-menu-content ul li.disabled,.eui-toolbar-menu-content ul li a.disabled{opacity:var(--eui-o-50)}.eui-toolbar-menu-content ul.disabled:hover,.eui-toolbar-menu-content ul li.disabled:hover,.eui-toolbar-menu-content ul li a.disabled:hover{color:var(--eui-c-neutral-lighter)!important}.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-c-branding);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:empty{min-width:0}.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-s-m) var(--eui-s-s) var(--eui-s-xs);text-align:center;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-c-neutral-lighter)!important}.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-c-accent);border-bottom:3px solid var(--eui-c-accent-dark);color:var(--eui-c-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-c-neutral)!important;fill:var(--eui-c-neutral)!important}.eui-toolbar-menu-content>ul>li.selected>a.disabled,.eui-toolbar-menu-content>ul>li:hover>a.disabled{background-color:transparent!important;border-left:0;opacity:var(--eui-o-50);cursor:not-allowed}.eui-toolbar-menu-content ul ul{left:-9999px;position:absolute;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content li:hover>ul.show,.eui-toolbar-menu-content li:focus-within>ul.showOnEnter{flex-direction:column;left:auto;position:fixed}.eui-toolbar-menu-content .showOnEnter a:focus{border-color:var(--eui-c-neutral-bg-light)}.eui-toolbar-menu-content ul.show .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white);height:1.25rem;width:1.25rem}.eui-toolbar-menu-content ul ul ul{margin-left:100%;top:0;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content ul ul ul.show{position:absolute!important}.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-c-branding-dark);height:auto}.eui-toolbar-menu-content ul ul li.child:empty{min-height:0}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__icon{margin-right:var(--eui-s-xs)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__label{padding:var(--eui-s-2xs);position:relative}.eui-toolbar-menu-content ul ul li.hidden{display:none!important}.eui-toolbar-menu-content ul ul li.selected>a{border-left:3px solid var(--eui-c-accent-dark);color:var(--eui-c-accent)}.eui-toolbar-menu-content ul ul li a,.eui-toolbar-menu-content ul ul li h2{align-items:center;background:var(--eui-c-branding-dark);display:flex;line-height:1.25;min-height:var(--eui-s-3xl);padding:var(--eui-s-2xs) var(--eui-s-xs);text-decoration:none;transition:color .2s ease-in-out;width:260px}.eui-toolbar-menu-content ul ul li h2{color:var(--eui-c-accent);font-size:var(--eui-f-size-m);padding-left:var(--eui-s-xs);padding-top:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a{border-left:3px solid transparent;padding-left:var(--eui-s-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-c-accent-dark);color:var(--eui-c-accent)!important}.eui-toolbar-menu-content ul ul li.has-sub>a:after{border-bottom:2px solid var(--eui-c-neutral-lightest);border-right:2px solid var(--eui-c-neutral-lightest);content:\"\";height:var(--eui-s-s);position:absolute;right:var(--eui-s-s);transform:rotate(-45deg);width:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a.disabled{opacity:var(--eui-o-50);cursor:default}.eui-toolbar-menu-content ul ul li a.disabled:hover{border-left:3px solid transparent}.eui-toolbar-menu-content ul ul li.separator{background-color:var(--eui-c-neutral-bg-light)!important;height:1px!important}.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-f-size-base));position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i2$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuiToolbarMenuComponent, decorators: [{
             type: Component,
@@ -619,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         RouterLink,
                         RouterLinkActive,
                         TranslateModule,
-                    ], template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <ng-container *ngFor=\"let link of items\">\n            <li *ngIf=\"link.visible === undefined || link.visible === true\" [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 ? 'neutral' : 'white'\"\n                            class=\"eui-u-mr-xs\" />\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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-s\" />\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 ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-mr-xs\" />\n\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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-xs\" />\n                    </div>\n                </a>\n\n                <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                    <ng-container *ngFor=\"let childLink of link.children\">\n                        <li\n                            *ngIf=\"childLink.visible === undefined || childLink.visible === true\"\n                            class=\"child\"\n                            [class.has-sub]=\"childLink?.children\"\n                            [class.separator]=\"childLink.isSeparator\"\n                            [class.selected]=\"childLink.active\">\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                                <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 }}\" />\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                                <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 }}\" />\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                                <ng-container *ngFor=\"let childSubLink of childLink.children\">\n                                    <li *ngIf=\"childSubLink.visible === undefined || childSubLink.visible === true\" class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\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                                            <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 }}\" />\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                                            <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 }}\" />\n                                            <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                                        </a>\n                                    </li>\n                                </ng-container>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </li>\n        </ng-container>\n    </ul>\n</nav>\n", styles: [".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-zi-nav)}.eui-toolbar-menu-content ul:not(.show){display:flex;list-style:none;width:100%;z-index:calc(var(--eui-zi-sidebar) + 1)}.eui-toolbar-menu-content ul,.eui-toolbar-menu-content ul li,.eui-toolbar-menu-content ul li a{border:var(--eui-bw-none);border-bottom:2px solid var(--eui-c-branding);color:var(--eui-c-white);display:block;height:var(--eui-app-toolbar-height);line-height:var(--eui-s-l);margin:0;max-height:var(--eui-app-toolbar-height);min-width:0;padding:0;position:relative;text-decoration:none;display:flex}.eui-toolbar-menu-content ul.disabled,.eui-toolbar-menu-content ul li.disabled,.eui-toolbar-menu-content ul li a.disabled{opacity:var(--eui-o-50)}.eui-toolbar-menu-content ul.disabled:hover,.eui-toolbar-menu-content ul li.disabled:hover,.eui-toolbar-menu-content ul li a.disabled:hover{color:var(--eui-c-neutral-lighter)!important}.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-c-branding);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:empty{min-width:0}.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-s-m) var(--eui-s-s) var(--eui-s-xs);text-align:center;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-c-neutral-lighter)!important}.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-c-accent);border-bottom:3px solid var(--eui-c-accent-dark);color:var(--eui-c-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-c-neutral)!important;fill:var(--eui-c-neutral)!important}.eui-toolbar-menu-content>ul>li.selected>a.disabled,.eui-toolbar-menu-content>ul>li:hover>a.disabled{background-color:transparent!important;border-left:0;opacity:var(--eui-o-50);cursor:not-allowed}.eui-toolbar-menu-content ul ul{left:-9999px;position:absolute;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content li:hover>ul.show,.eui-toolbar-menu-content li:focus-within>ul.showOnEnter{flex-direction:column;left:auto;position:fixed}.eui-toolbar-menu-content .showOnEnter a:focus{border-color:var(--eui-c-neutral-bg-light)}.eui-toolbar-menu-content ul.show .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white);height:1.25rem;width:1.25rem}.eui-toolbar-menu-content ul ul ul{margin-left:100%;top:0;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content ul ul ul.show{position:absolute!important}.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-c-branding-dark);height:auto}.eui-toolbar-menu-content ul ul li.child:empty{min-height:0}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__icon{margin-right:var(--eui-s-xs)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__label{padding:var(--eui-s-2xs);position:relative}.eui-toolbar-menu-content ul ul li.hidden{display:none!important}.eui-toolbar-menu-content ul ul li.selected>a{border-left:3px solid var(--eui-c-accent-dark);color:var(--eui-c-accent)}.eui-toolbar-menu-content ul ul li a,.eui-toolbar-menu-content ul ul li h2{align-items:center;background:var(--eui-c-branding-dark);display:flex;line-height:1.25;min-height:var(--eui-s-3xl);padding:var(--eui-s-2xs) var(--eui-s-xs);text-decoration:none;transition:color .2s ease-in-out;width:260px}.eui-toolbar-menu-content ul ul li h2{color:var(--eui-c-accent);font-size:var(--eui-f-size-m);padding-left:var(--eui-s-xs);padding-top:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a{border-left:3px solid transparent;padding-left:var(--eui-s-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-c-accent-dark);color:var(--eui-c-accent)!important}.eui-toolbar-menu-content ul ul li.has-sub>a:after{border-bottom:2px solid var(--eui-c-neutral-lightest);border-right:2px solid var(--eui-c-neutral-lightest);content:\"\";height:var(--eui-s-s);position:absolute;right:var(--eui-s-s);transform:rotate(-45deg);width:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a.disabled{opacity:var(--eui-o-50);cursor:default}.eui-toolbar-menu-content ul ul li a.disabled:hover{border-left:3px solid transparent}.eui-toolbar-menu-content ul ul li.separator{background-color:var(--eui-c-neutral-bg-light)!important;height:1px!important}.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-f-size-base));position:absolute}\n"] }]
+                    ], template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <ng-container *ngFor=\"let link of items\">\n            <li *ngIf=\"link.visible === undefined || link.visible === true\" [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 ? 'neutral' : 'white'\"\n                            class=\"eui-u-mr-xs\" />\n                        <eui-icon-svg\n                            *ngIf=\"link.iconSvgUrl\"\n                            [iconUrl]=\"link.iconSvgUrl\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            class=\"eui-u-mr-xs\" />\n                        <span *ngIf=\"link.iconClass && !link.iconSvgName && !link.iconSvgUrl\" 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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-s\" />\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 ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-mr-xs\" />\n\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=\"chevron-down:sharp\"\n                            [fillColor]=\"link.active ? 'neutral' : 'white'\"\n                            size=\"s\"\n                            class=\"eui-u-ml-xs\" />\n                    </div>\n                </a>\n\n                <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                    <ng-container *ngFor=\"let childLink of link.children\">\n                        <li\n                            *ngIf=\"childLink.visible === undefined || childLink.visible === true\"\n                            class=\"child\"\n                            [class.has-sub]=\"childLink?.children\"\n                            [class.separator]=\"childLink.isSeparator\"\n                            [class.selected]=\"childLink.active\">\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                                <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 }}\" />\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                                <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 }}\" />\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                                <ng-container *ngFor=\"let childSubLink of childLink.children\">\n                                    <li *ngIf=\"childSubLink.visible === undefined || childSubLink.visible === true\" class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\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                                            <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 }}\" />\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                                            <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 }}\" />\n                                            <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                                        </a>\n                                    </li>\n                                </ng-container>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </li>\n        </ng-container>\n    </ul>\n</nav>\n", styles: [".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-zi-nav)}.eui-toolbar-menu-content ul:not(.show){display:flex;list-style:none;width:100%;z-index:calc(var(--eui-zi-sidebar) + 1)}.eui-toolbar-menu-content ul,.eui-toolbar-menu-content ul li,.eui-toolbar-menu-content ul li a{border:var(--eui-bw-none);border-bottom:2px solid var(--eui-c-branding);color:var(--eui-c-white);display:block;height:var(--eui-app-toolbar-height);line-height:var(--eui-s-l);margin:0;max-height:var(--eui-app-toolbar-height);min-width:0;padding:0;position:relative;text-decoration:none;display:flex}.eui-toolbar-menu-content ul.disabled,.eui-toolbar-menu-content ul li.disabled,.eui-toolbar-menu-content ul li a.disabled{opacity:var(--eui-o-50)}.eui-toolbar-menu-content ul.disabled:hover,.eui-toolbar-menu-content ul li.disabled:hover,.eui-toolbar-menu-content ul li a.disabled:hover{color:var(--eui-c-neutral-lighter)!important}.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-c-branding);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:empty{min-width:0}.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-s-m) var(--eui-s-s) var(--eui-s-xs);text-align:center;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-c-neutral-lighter)!important}.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-c-accent);border-bottom:3px solid var(--eui-c-accent-dark);color:var(--eui-c-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-c-neutral)!important;fill:var(--eui-c-neutral)!important}.eui-toolbar-menu-content>ul>li.selected>a.disabled,.eui-toolbar-menu-content>ul>li:hover>a.disabled{background-color:transparent!important;border-left:0;opacity:var(--eui-o-50);cursor:not-allowed}.eui-toolbar-menu-content ul ul{left:-9999px;position:absolute;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content li:hover>ul.show,.eui-toolbar-menu-content li:focus-within>ul.showOnEnter{flex-direction:column;left:auto;position:fixed}.eui-toolbar-menu-content .showOnEnter a:focus{border-color:var(--eui-c-neutral-bg-light)}.eui-toolbar-menu-content ul.show .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white);height:1.25rem;width:1.25rem}.eui-toolbar-menu-content ul ul ul{margin-left:100%;top:0;z-index:var(--eui-zi-nav)}.eui-toolbar-menu-content ul ul ul.show{position:absolute!important}.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-c-branding-dark);height:auto}.eui-toolbar-menu-content ul ul li.child:empty{min-height:0}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__icon{margin-right:var(--eui-s-xs)}.eui-toolbar-menu-content ul ul li.child .eui-toolbar-menu-item__label{padding:var(--eui-s-2xs);position:relative}.eui-toolbar-menu-content ul ul li.hidden{display:none!important}.eui-toolbar-menu-content ul ul li.selected>a{border-left:3px solid var(--eui-c-accent-dark);color:var(--eui-c-accent)}.eui-toolbar-menu-content ul ul li a,.eui-toolbar-menu-content ul ul li h2{align-items:center;background:var(--eui-c-branding-dark);display:flex;line-height:1.25;min-height:var(--eui-s-3xl);padding:var(--eui-s-2xs) var(--eui-s-xs);text-decoration:none;transition:color .2s ease-in-out;width:260px}.eui-toolbar-menu-content ul ul li h2{color:var(--eui-c-accent);font-size:var(--eui-f-size-m);padding-left:var(--eui-s-xs);padding-top:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a{border-left:3px solid transparent;padding-left:var(--eui-s-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-c-accent-dark);color:var(--eui-c-accent)!important}.eui-toolbar-menu-content ul ul li.has-sub>a:after{border-bottom:2px solid var(--eui-c-neutral-lightest);border-right:2px solid var(--eui-c-neutral-lightest);content:\"\";height:var(--eui-s-s);position:absolute;right:var(--eui-s-s);transform:rotate(-45deg);width:var(--eui-s-s)}.eui-toolbar-menu-content ul ul li a.disabled{opacity:var(--eui-o-50);cursor:default}.eui-toolbar-menu-content ul ul li a.disabled:hover{border-left:3px solid transparent}.eui-toolbar-menu-content ul ul li.separator{background-color:var(--eui-c-neutral-bg-light)!important;height:1px!important}.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-f-size-base));position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]