@eui/components 17.0.0-next.11 → 17.0.0-next.12

package/fesm2022/eui-components-layout.mjs

@@ -172,8 +172,6 @@ class EuiAppSidebarMenuComponent {
     constructor(asService) {
         this.asService = asService;
         this.class = 'eui-app-sidebar-menu';
-        /** @deprecated it will be replaced in the next eUI version by sidebarItemClick*/
-        this.onSidebarItemClicked = new EventEmitter();
         this.sidebarItemClick = new EventEmitter();
         this._hasFilter = false;
         this._hasIcons = false;
@@ -206,11 +204,10 @@ class EuiAppSidebarMenuComponent {
             (this.asService.state.breakpoints.isMobile || this.asService.state.breakpoints.isTablet || this.asService.state.isSidebarHidden)) {
             this.asService.isSidebarOpen = false;
         }
-        this.onSidebarItemClicked.emit(event);
         this.sidebarItemClick.emit(event);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAppSidebarMenuComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: { items: "items", hasFilter: "hasFilter", hasIcons: "hasIcons", hasTooltip: "hasTooltip", expandAllItems: "expandAllItems" }, outputs: { onSidebarItemClicked: "onSidebarItemClicked", sidebarItemClick: "sidebarItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n    [items]=\"items\"\n    [hasFilter]=\"hasFilter\"\n    [hasIcons]=\"hasIcons\"\n    [hasTooltip]=\"hasTooltip\"\n    [expandAllItems]=\"expandAllItems\"\n    [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n    (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "isCollapsed", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["isClick", "itemClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: { items: "items", hasFilter: "hasFilter", hasIcons: "hasIcons", hasTooltip: "hasTooltip", expandAllItems: "expandAllItems" }, outputs: { sidebarItemClick: "sidebarItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n    [items]=\"items\"\n    [hasFilter]=\"hasFilter\"\n    [hasIcons]=\"hasIcons\"\n    [hasTooltip]=\"hasTooltip\"\n    [expandAllItems]=\"expandAllItems\"\n    [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n    (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "isCollapsed", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["isClick", "itemClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAppSidebarMenuComponent, decorators: [{
             type: Component,
@@ -227,8 +224,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ng
                 type: Input
             }], expandAllItems: [{
                 type: Input
-            }], onSidebarItemClicked: [{
-                type: Output
             }], sidebarItemClick: [{
                 type: Output
             }] } });
@@ -1384,8 +1379,6 @@ class EuiToolbarMenuComponent {
         this.asService = asService;
         this.cd = cd;
         this.class = 'eui-toolbar-menu';
-        /** @deprecated it will be replaced in the next eUI version by menuItemClick*/
-        this.menuItemClicked = new EventEmitter();
         this.menuItemClick = new EventEmitter();
         this.isdropdownOpen = false;
         this.subs = new Subscription();
@@ -1418,11 +1411,9 @@ class EuiToolbarMenuComponent {
             window.scrollTo(0, 0);
         }
         if (!link.disabled && link.children) {
-            this.menuItemClicked.emit(link);
             this.menuItemClick.emit(link);
         }
         if (!link.disabled && !link.children) {
-            this.menuItemClicked.emit(link);
             this.menuItemClick.emit(link);
             // click on dropitems to close dropdown
             const dropdown = document.querySelectorAll('#top-menu li:hover > ul');
@@ -1458,12 +1449,10 @@ class EuiToolbarMenuComponent {
                     window.scrollTo(0, 0);
                 }
                 if (link.children) {
-                    this.menuItemClicked.emit(link);
                     this.menuItemClick.emit(link);
                     this.isdropdownOpen = true;
                 }
                 if (!link.children) {
-                    this.menuItemClicked.emit(link);
                     this.menuItemClick.emit(link);
                     this.isdropdownOpen = false;
                 }
@@ -1514,7 +1503,7 @@ class EuiToolbarMenuComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiToolbarMenuComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiToolbarMenuComponent, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClicked: "menuItemClicked", menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <li *ngFor=\"let link of items\" [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n            <a\n                *ngIf=\"!link.url\"\n                [class.disabled]=\"link.disabled\"\n                [tabindex]=\"!link.disabled ? 0 : -1\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg *ngIf=\"link.children\" icon=\"eui-caret-down\" [fillColor]=\"link.active ? 'grey-100' : 'white'\" size=\"s\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n            <a\n                *ngIf=\"link.url\"\n                [routerLink]=\"link.url\"\n                [class.disabled]=\"link.disabled\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg\n                        *ngIf=\"link.children\"\n                        icon=\"eui-caret-down\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-ml-xs\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n\n            <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                <li\n                    *ngFor=\"let childLink of link.children\"\n                    class=\"child\"\n                    [class.has-sub]=\"childLink?.children\"\n                    [class.separator]=\"childLink.isSeparator\">\n                    <a\n                        *ngIf=\"!childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n                    <a\n                        *ngIf=\"childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        [routerLink]=\"childLink.url\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n\n                    <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"childLink.children\">\n                        <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\" *ngFor=\"let childSubLink of childLink.children\">\n                            <a\n                                *ngIf=\"childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                [routerLink]=\"childSubLink.url\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                            <a\n                                *ngIf=\"!childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                        </li>\n                    </ul>\n                </li>\n            </ul>\n        </li>\n    </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiToolbarMenuComponent, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\" *ngIf=\"items && items.length !== 0\">\n    <ul>\n        <li *ngFor=\"let link of items\" [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n            <a\n                *ngIf=\"!link.url\"\n                [class.disabled]=\"link.disabled\"\n                [tabindex]=\"!link.disabled ? 0 : -1\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg *ngIf=\"link.children\" icon=\"eui-caret-down\" [fillColor]=\"link.active ? 'grey-100' : 'white'\" size=\"s\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n            <a\n                *ngIf=\"link.url\"\n                [routerLink]=\"link.url\"\n                [class.disabled]=\"link.disabled\"\n                (click)=\"onLinkClick(link)\"\n                (keydown)=\"onKeyDown($event, link)\"\n                title=\"{{ link.label | translate }}\"\n                [class.icon-home-link]=\"link.isHome\">\n                <div class=\"eui-u-flex\">\n                    <eui-icon-svg\n                        *ngIf=\"link.iconSvgName\"\n                        [icon]=\"link.iconSvgName\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-mr-xs\">\n                    </eui-icon-svg>\n                    <span *ngIf=\"link.iconClass && !link.iconSvgName\" class=\"{{ link.iconClass }} eui-icon\"></span>\n                    <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n                    <eui-icon-svg\n                        *ngIf=\"link.children\"\n                        icon=\"eui-caret-down\"\n                        [fillColor]=\"link.active ? 'grey-100' : 'white'\"\n                        size=\"s\"\n                        class=\"eui-u-ml-xs\">\n                    </eui-icon-svg>\n                </div>\n            </a>\n\n            <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"link.children\">\n                <li\n                    *ngFor=\"let childLink of link.children\"\n                    class=\"child\"\n                    [class.has-sub]=\"childLink?.children\"\n                    [class.separator]=\"childLink.isSeparator\">\n                    <a\n                        *ngIf=\"!childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n                    <a\n                        *ngIf=\"childLink.url\"\n                        [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n                        [class.disabled]=\"childLink.disabled\"\n                        [routerLink]=\"childLink.url\"\n                        (click)=\"onLinkClick(childLink)\"\n                        (keydown)=\"onKeyDown($event, childLink)\">\n                        <!-- v15 OK -->\n                        <span *ngIf=\"childLink.iconClass\" class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n                        <eui-icon-svg\n                            *ngIf=\"childLink.iconSvgName\"\n                            class=\"eui-toolbar-menu-item__icon\"\n                            icon=\"{{ childLink.iconSvgName }}\"></eui-icon-svg>\n                        <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n                    </a>\n\n                    <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\" *ngIf=\"childLink.children\">\n                        <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\" *ngFor=\"let childSubLink of childLink.children\">\n                            <a\n                                *ngIf=\"childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                [routerLink]=\"childSubLink.url\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                            <a\n                                *ngIf=\"!childSubLink.url\"\n                                [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n                                [class.disabled]=\"childSubLink.disabled\"\n                                (click)=\"onLinkClick(childSubLink)\"\n                                (keydown)=\"onKeyDown($event, childSubLink)\">\n                                <!-- v15 OK -->\n                                <span\n                                    *ngIf=\"childSubLink.iconClass\"\n                                    class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n                                <eui-icon-svg\n                                    *ngIf=\"childSubLink.iconSvgName\"\n                                    class=\"eui-toolbar-menu-item__icon\"\n                                    icon=\"{{ childSubLink.iconSvgName }}\"></eui-icon-svg>\n                                <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n                            </a>\n                        </li>\n                    </ul>\n                </li>\n            </ul>\n        </li>\n    </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiToolbarMenuComponent, decorators: [{
             type: Component,
@@ -1523,8 +1512,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ng
                 type: HostBinding
             }], items: [{
                 type: Input
-            }], menuItemClicked: [{
-                type: Output
             }], menuItemClick: [{
                 type: Output
             }] } });
@@ -1798,7 +1785,7 @@ class EuiAppComponent {
         this.destroy$.unsubscribe();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i2$4.DeviceDetectorService }, { token: i0.ChangeDetectorRef }, { token: EUI_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", userInfos: "userInfos", userSubInfos: "userSubInfos", impersonatedUserInfos: "impersonatedUserInfos", isSidebarOpen: "isSidebarOpen", isSidebarExpandOnHover: "isSidebarExpandOnHover", isShrinkHeaderActive: "isShrinkHeaderActive", isSidebarHidden: "isSidebarHidden" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\">\n    <ng-content select=\"eui-app-top-message\"></ng-content>\n\n    <ng-content select=\"eui-app-header\"></ng-content>\n\n    <ng-container\n        *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n        <eui-app-toolbar>\n            <eui-toolbar></eui-toolbar>\n        </eui-app-toolbar>\n    </ng-container>\n\n    <ng-template #elseBlockToolbar>\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    </ng-template>\n\n    <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n    <div class=\"eui-app-main-content\" role=\"main\">\n        <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n        <!-- TODO: consider removing code below in the future by transferring responsibility of providing <router-outlet> to the developer -->\n        <ng-container *ngIf=\"hasNoPageWrapper\">\n            <router-outlet></router-outlet>\n        </ng-container>\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (clicked)=\"euiGrowlService.growlCallback()\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-base-color-grey-2);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["hasLanguageSelector"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar" }, { kind: "component", type: EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["items", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["onSidebarItemClicked", "sidebarItemClick"] }, { kind: "component", type: i10.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked"] }, { kind: "component", type: i11.EuiGrowlComponent, selector: "eui-growl", inputs: ["sticky", "life", "value", "style", "styleClass", "position", "e2eAttr", "closeAllSticky"], outputs: ["clicked", "growlClick"] }, { kind: "component", type: i12.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", userInfos: "userInfos", userSubInfos: "userSubInfos", impersonatedUserInfos: "impersonatedUserInfos", isSidebarOpen: "isSidebarOpen", isSidebarExpandOnHover: "isSidebarExpandOnHover", isShrinkHeaderActive: "isShrinkHeaderActive", isSidebarHidden: "isSidebarHidden" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n    <eui-app-sidebar>\n        <eui-app-sidebar-body>\n            <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n        </eui-app-sidebar-body>\n    </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\">\n    <ng-content select=\"eui-app-top-message\"></ng-content>\n\n    <ng-content select=\"eui-app-header\"></ng-content>\n\n    <ng-container\n        *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n        <eui-app-toolbar>\n            <eui-toolbar></eui-toolbar>\n        </eui-app-toolbar>\n    </ng-container>\n\n    <ng-template #elseBlockToolbar>\n        <ng-content select=\"eui-app-toolbar\"></ng-content>\n    </ng-template>\n\n    <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n    <div class=\"eui-app-main-content\" role=\"main\">\n        <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n        <!-- TODO: consider removing code below in the future by transferring responsibility of providing <router-outlet> to the developer -->\n        <ng-container *ngIf=\"hasNoPageWrapper\">\n            <router-outlet></router-outlet>\n        </ng-container>\n    </div>\n\n    <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n    [value]=\"euiGrowlService.growlMessages\"\n    [sticky]=\"euiGrowlService.isGrowlSticky\"\n    [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n    [life]=\"euiGrowlService.growlLife\"\n    [position]=\"euiGrowlService.growlPosition\"\n    (clicked)=\"euiGrowlService.growlCallback()\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:rgba(0,0,0,.3);bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-base-color-grey-2);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["hasLanguageSelector"] }, { kind: "component", type: EuiToolbarComponent, selector: "eui-toolbar" }, { kind: "component", type: EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["items", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i10.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked"] }, { kind: "component", type: i11.EuiGrowlComponent, selector: "eui-growl", inputs: ["sticky", "life", "value", "style", "styleClass", "position", "e2eAttr", "closeAllSticky"], outputs: ["growlClick"] }, { kind: "component", type: i12.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAppComponent, decorators: [{
             type: Component,
@@ -2027,8 +2014,6 @@ class EuiAppTopMessageComponent extends BaseDirective$1 {
         this.cd = cd;
         this.obs = obs;
         this.role = 'banner';
-        /** @deprecated it will be replaced in the next eUI version by topMessageClose*/
-        this.close = new EventEmitter();
         this.topMessageClose = new EventEmitter();
         this._isCloseable = false;
         this._isVisible = true;
@@ -2051,7 +2036,6 @@ class EuiAppTopMessageComponent extends BaseDirective$1 {
     onCloseClick() {
         this.isVisible = false;
         this.asService.activateTopMessageCssVars(0);
-        this.close.emit();
         this.topMessageClose.emit();
     }
     _calculateHeight() {
@@ -2062,7 +2046,7 @@ class EuiAppTopMessageComponent extends BaseDirective$1 {
         this.cd.detectChanges();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAppTopMessageComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$6.ContentObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: "isCloseable", isVisible: "isVisible" }, outputs: { close: "close", topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-app-top-message__wrapper\" #appTopMessage>\n    <div class=\"eui-app-top-message__content\">\n        <ng-content></ng-content>\n    </div>\n    <span *ngIf=\"isCloseable\" class=\"eui-app-top-message__close\" role=\"button\" aria-label=\"Close Icon Button\" (click)=\"onCloseClick()\">\n    </span>\n</div>\n", styles: [".eui-app-top-message{background-color:var(--eui-base-color-danger);color:var(--eui-base-color-white);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-base-z-index-top-message)}.eui-app-top-message--primary{background-color:var(--eui-base-color-primary)}.eui-app-top-message--info{background-color:var(--eui-base-color-info)}.eui-app-top-message--success{background-color:var(--eui-base-color-success)}.eui-app-top-message--warning{background-color:var(--eui-base-color-warning);color:var(--eui-color-font)}.eui-app-top-message--warning .eui-app-top-message__close{color:var(--eui-base-color-black)}.eui-app-top-message--warning .eui-app-top-message__close:hover{color:var(--eui-base-color-white)}.eui-app-top-message--danger{background-color:var(--eui-base-color-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message__wrapper{display:flex;flex-direction:row}.eui-app-top-message__content{display:flex;flex-direction:column}.eui-app-top-message__close{color:var(--eui-color-white);cursor:pointer;font-family:eui-icons;font-size:var(--eui-font-size-xl);font-weight:100;line-height:1;margin-left:auto}.eui-app-top-message__close:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}.eui-app-top-message__close:hover{color:var(--eui-color-accent)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiAppTopMessageComponent, selector: "eui-app-top-message", inputs: { isCloseable: "isCloseable", isVisible: "isVisible" }, outputs: { topMessageClose: "topMessageClose" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "appTopMessage", first: true, predicate: ["appTopMessage"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"eui-app-top-message__wrapper\" #appTopMessage>\n    <div class=\"eui-app-top-message__content\">\n        <ng-content></ng-content>\n    </div>\n    <span *ngIf=\"isCloseable\" class=\"eui-app-top-message__close\" role=\"button\" aria-label=\"Close Icon Button\" (click)=\"onCloseClick()\">\n    </span>\n</div>\n", styles: [".eui-app-top-message{background-color:var(--eui-base-color-danger);color:var(--eui-base-color-white);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:fixed;width:100%;right:0;top:0;z-index:var(--eui-base-z-index-top-message)}.eui-app-top-message--primary{background-color:var(--eui-base-color-primary)}.eui-app-top-message--info{background-color:var(--eui-base-color-info)}.eui-app-top-message--success{background-color:var(--eui-base-color-success)}.eui-app-top-message--warning{background-color:var(--eui-base-color-warning);color:var(--eui-color-font)}.eui-app-top-message--warning .eui-app-top-message__close{color:var(--eui-base-color-black)}.eui-app-top-message--warning .eui-app-top-message__close:hover{color:var(--eui-base-color-white)}.eui-app-top-message--danger{background-color:var(--eui-base-color-danger)}.eui-app-top-message--hidden{display:none}.eui-app-top-message__wrapper{display:flex;flex-direction:row}.eui-app-top-message__content{display:flex;flex-direction:column}.eui-app-top-message__close{color:var(--eui-color-white);cursor:pointer;font-family:eui-icons;font-size:var(--eui-font-size-xl);font-weight:100;line-height:1;margin-left:auto}.eui-app-top-message__close:before{height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E\")}.eui-app-top-message__close:hover{color:var(--eui-color-accent)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiAppTopMessageComponent, decorators: [{
             type: Component,
@@ -2080,8 +2064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ng
                 type: Input
             }], isVisible: [{
                 type: Input
-            }], close: [{
-                type: Output
             }], topMessageClose: [{
                 type: Output
             }] } });