@eui/components 19.2.2-snapshot-1746624054534 → 19.2.2-snapshot-1746647149114
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EuiNotificationsComponent.html +1 -0
- package/docs/components/EuiNotificationsV2Component.html +1 -0
- package/docs/components/EuiToolbarMenuComponent.html +1 -1
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/fesm2022/eui-components-eui-accordion.mjs +2 -2
- package/fesm2022/eui-components-eui-accordion.mjs.map +1 -1
- package/fesm2022/eui-components-eui-alert.mjs +2 -2
- package/fesm2022/eui-components-eui-alert.mjs.map +1 -1
- package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
- package/fesm2022/eui-components-eui-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-components-eui-avatar.mjs +2 -2
- package/fesm2022/eui-components-eui-avatar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-card.mjs +6 -6
- package/fesm2022/eui-components-eui-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dashboard-card.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-date-range-selector.mjs +4 -4
- package/fesm2022/eui-components-eui-date-range-selector.mjs.map +1 -1
- package/fesm2022/eui-components-eui-discussion-thread.mjs +4 -4
- package/fesm2022/eui-components-eui-discussion-thread.mjs.map +1 -1
- package/fesm2022/eui-components-eui-fieldset.mjs +2 -2
- package/fesm2022/eui-components-eui-fieldset.mjs.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +4 -4
- package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
- package/fesm2022/eui-components-eui-overlay.mjs +2 -2
- package/fesm2022/eui-components-eui-overlay.mjs.map +1 -1
- package/fesm2022/eui-components-eui-page.mjs +2 -2
- package/fesm2022/eui-components-eui-page.mjs.map +1 -1
- package/fesm2022/eui-components-eui-popover.mjs +2 -2
- package/fesm2022/eui-components-eui-popover.mjs.map +1 -1
- package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-slide-toggle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-split-button.mjs +2 -2
- package/fesm2022/eui-components-eui-split-button.mjs.map +1 -1
- package/fesm2022/eui-components-eui-table.mjs +2 -2
- package/fesm2022/eui-components-eui-table.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tabs-v2.mjs +2 -2
- package/fesm2022/eui-components-eui-tabs-v2.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tabs.mjs +4 -4
- package/fesm2022/eui-components-eui-tabs.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timebar.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timeline.mjs +2 -2
- package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
- package/fesm2022/eui-components-eui-tree-list.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +2 -2
- package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
- package/fesm2022/eui-components-eui-user-profile.mjs +2 -2
- package/fesm2022/eui-components-eui-user-profile.mjs.map +1 -1
- package/fesm2022/eui-components-eui-wizard.mjs +4 -4
- package/fesm2022/eui-components-eui-wizard.mjs.map +1 -1
- package/fesm2022/eui-components-externals-eui-editor.mjs +2 -2
- package/fesm2022/eui-components-externals-eui-editor.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +16 -14
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/layout/eui-notifications/eui-notifications.component.d.ts.map +1 -1
- package/layout/eui-notifications-v2/eui-notifications.component.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -400,7 +400,7 @@ class EuiAppSidebarHeaderUserProfileComponent {
|
|
|
400
400
|
].join(' ').trim();
|
|
401
401
|
}
|
|
402
402
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiAppSidebarHeaderUserProfileComponent, isStandalone: true, selector: "eui-app-sidebar-header-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], isOnline: ["isOnline", "isOnline", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], hasProfileDrawer: ["hasProfileDrawer", "hasProfileDrawer", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent) }], ngImport: i0, template: "<eui-user-profile\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\"\n [hasTabNavigation]=\"hasTabNavigation\"\n isReverse\n [hasToggle]=\"hasToggle\"\n #userProfile>\n <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n\n@if (hasProfileDrawer) {\n <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"Toggle user profile details\">\n <eui-icon-svg [icon]=\"toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'\"></eui-icon-svg>\n </button>\n}\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-
|
|
403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiAppSidebarHeaderUserProfileComponent, isStandalone: true, selector: "eui-app-sidebar-header-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], isOnline: ["isOnline", "isOnline", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], hasProfileDrawer: ["hasProfileDrawer", "hasProfileDrawer", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent) }], ngImport: i0, template: "<eui-user-profile\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\"\n [hasTabNavigation]=\"hasTabNavigation\"\n isReverse\n [hasToggle]=\"hasToggle\"\n #userProfile>\n <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n\n@if (hasProfileDrawer) {\n <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"Toggle user profile details\">\n <eui-icon-svg [icon]=\"toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'\"></eui-icon-svg>\n </button>\n}\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-divider);display:flex;height:var(--eui-app-sidebar-header-user-profile);padding:var(--eui-s-s) var(--eui-s-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile--has-drawer,.eui-app-sidebar-header-user-profile--has-drawer .eui-user-profile-content--no-menu{cursor:pointer}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"], dependencies: [{ kind: "component", type: i1$1.EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "statusVariant", "hasMenu", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle", "isHeaderUserProfile", "isToolbarUserProfile", "isShowUserInfos", "euiStatusSecondary", "euiStatusSuccess", "euiStatusDanger", "reverseNameOrder"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
404
404
|
}
|
|
405
405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppSidebarHeaderUserProfileComponent, decorators: [{
|
|
406
406
|
type: Component,
|
|
@@ -408,7 +408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
408
408
|
...EUI_USER_PROFILE,
|
|
409
409
|
...EUI_BUTTON,
|
|
410
410
|
...EUI_ICON,
|
|
411
|
-
], template: "<eui-user-profile\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\"\n [hasTabNavigation]=\"hasTabNavigation\"\n isReverse\n [hasToggle]=\"hasToggle\"\n #userProfile>\n <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n\n@if (hasProfileDrawer) {\n <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"Toggle user profile details\">\n <eui-icon-svg [icon]=\"toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'\"></eui-icon-svg>\n </button>\n}\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-
|
|
411
|
+
], template: "<eui-user-profile\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\"\n [hasTabNavigation]=\"hasTabNavigation\"\n isReverse\n [hasToggle]=\"hasToggle\"\n #userProfile>\n <ng-content select=\"eui-user-profile-menu\" />\n</eui-user-profile>\n\n@if (hasProfileDrawer) {\n <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary class=\"eui-u-ml-auto\" aria-label=\"Toggle user profile details\">\n <eui-icon-svg [icon]=\"toggleProfile ? 'chevron-up:sharp' : 'chevron-down:sharp'\"></eui-icon-svg>\n </button>\n}\n", styles: [".eui-app-sidebar-header-user-profile{border-bottom:1px solid var(--eui-c-divider);display:flex;height:var(--eui-app-sidebar-header-user-profile);padding:var(--eui-s-s) var(--eui-s-m);position:relative;width:100%}.eui-app-sidebar-header-user-profile--has-drawer,.eui-app-sidebar-header-user-profile--has-drawer .eui-user-profile-content--no-menu{cursor:pointer}@media screen and (min-width: 996px){.eui-app-sidebar-header-user-profile{display:none}}\n"] }]
|
|
412
412
|
}], propDecorators: { cssClasses: [{
|
|
413
413
|
type: HostBinding,
|
|
414
414
|
args: ['class']
|
|
@@ -609,11 +609,11 @@ class EuiAppSidebarComponent {
|
|
|
609
609
|
CssUtils.removeSidebarCssVars(this.document);
|
|
610
610
|
}
|
|
611
611
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppSidebarComponent, deps: [{ token: i1.EuiAppShellService, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
612
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: EuiAppSidebarComponent, isStandalone: true, selector: "eui-app-sidebar", host: { listeners: { "body:click": "close()" }, properties: { "class": "this.string" } }, ngImport: i0, template: "<aside class=\"eui-app-sidebar-content\">\n <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-bg);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-neutral-bg-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-app-sidebar-body{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-neutral-bg-light);background-color:var(--eui-c-neutral-bg-lighter);box-shadow:var(--eui-sh-2);display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.modal-open .eui-app-sidebar{z-index:auto}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-bg);border-top:1px solid var(--eui-c-
|
|
612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: EuiAppSidebarComponent, isStandalone: true, selector: "eui-app-sidebar", host: { listeners: { "body:click": "close()" }, properties: { "class": "this.string" } }, ngImport: i0, template: "<aside class=\"eui-app-sidebar-content\">\n <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-bg);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-neutral-bg-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-app-sidebar-body{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-neutral-bg-light);background-color:var(--eui-c-neutral-bg-lighter);box-shadow:var(--eui-sh-2);display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.modal-open .eui-app-sidebar{z-index:auto}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-bg);border-top:1px solid var(--eui-c-divider);height:calc(100% - var(--eui-app-sidebar-header-user-profile));overflow-y:auto;padding:var(--eui-s-s);width:100%}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-app.sidebar--open.md .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer--expanded{top:var(--eui-app-sidebar-header-user-profile);position:absolute;width:100%}.eui-app.sidebar--close.md .eui-app-sidebar-drawer,.eui-app.sidebar--close.xs .eui-app-sidebar-drawer,.eui-app.sidebar--close.sm .eui-app-sidebar-drawer{position:fixed;top:100vh}@media screen and (max-width: 767px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:50%}}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
613
613
|
}
|
|
614
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppSidebarComponent, decorators: [{
|
|
615
615
|
type: Component,
|
|
616
|
-
args: [{ selector: 'eui-app-sidebar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside class=\"eui-app-sidebar-content\">\n <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-bg);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-neutral-bg-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-app-sidebar-body{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-neutral-bg-light);background-color:var(--eui-c-neutral-bg-lighter);box-shadow:var(--eui-sh-2);display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.modal-open .eui-app-sidebar{z-index:auto}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-bg);border-top:1px solid var(--eui-c-
|
|
616
|
+
args: [{ selector: 'eui-app-sidebar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside class=\"eui-app-sidebar-content\">\n <ng-content select=\"eui-app-sidebar-header-user-profile\"></ng-content>\n <ng-content select=\"eui-app-sidebar-header\"></ng-content>\n <ng-content select=\"eui-app-sidebar-body\"></ng-content>\n <ng-content select=\"eui-app-sidebar-footer\"></ng-content>\n <ng-content select=\"eui-app-sidebar-drawer\"></ng-content>\n</aside>\n", styles: [".eui-app-sidebar{background-color:var(--eui-c-bg);height:100%;left:0;position:fixed;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in;width:var(--eui-app-sidebar-width);box-shadow:var(--eui-sh-10)}.eui-app-sidebar-header{align-items:center;background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-neutral-bg-light);display:flex;width:100%}.eui-app-sidebar-body{display:flex;height:100%;max-height:calc(100% - (var(--eui-app-sidebar-header-height) + var(--eui-app-sidebar-footer-height)));overflow-x:hidden;overflow-y:scroll}.eui-app-sidebar-body::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app-sidebar-body::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app-sidebar-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app-sidebar-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-app-sidebar-body{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-app-sidebar-footer{align-items:center;display:flex;flex:0 0 auto;justify-content:center;padding:var(--eui-s-xs)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-body{max-height:100%}.eui-app-sidebar-menu{display:flex;height:100%;width:100%}.eui-app-sidebar-content{border-right:1px solid var(--eui-c-neutral-bg-light);background-color:var(--eui-c-neutral-bg-lighter);box-shadow:var(--eui-sh-2);display:flex;flex-direction:column;height:100%;max-height:calc(100% - (var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height)));overflow:hidden;position:relative}.modal-open .eui-app-sidebar{z-index:auto}@media screen and (max-width: 767px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.eui-app-sidebar-body{max-height:100%}.sidebar--close .eui-app-sidebar{box-shadow:none!important;margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--open .eui-app-sidebar{display:initial;margin-left:0;width:50%}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);width:var(--eui-app-sidebar-width-active)}}@media screen and (min-width: 996px){.sidebar--hover .eui-app-sidebar{z-index:var(--eui-zi-sidebar)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar{width:var(--eui-app-sidebar-width-close)}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-header{display:none}.sidebar--close:not(.sidebar--hover) .eui-app-sidebar-footer{text-indent:-9999px}.sidebar--hidden.sidebar--close .eui-app-sidebar{margin-left:calc(var(--eui-app-sidebar-width-active) * -1)}.sidebar--hidden.sidebar--open .eui-app-sidebar{box-shadow:var(--eui-sh-4);display:initial;margin-left:0;width:var(--eui-app-sidebar-width-active);z-index:var(--eui-zi-sidebar)}}.eui-app-sidebar-drawer{display:none}.eui-app.sidebar--open.md .eui-app-sidebar-drawer,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer{display:flex;height:100%;position:fixed;top:100vh;transition:top .25s ease-in-out}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{background:var(--eui-c-bg);border-top:1px solid var(--eui-c-divider);height:calc(100% - var(--eui-app-sidebar-header-user-profile));overflow-y:auto;padding:var(--eui-s-s);width:100%}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content::-webkit-scrollbar-track,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-app.sidebar--open.md .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer-content,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-app.sidebar--open.md .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.xs .eui-app-sidebar-drawer--expanded,.eui-app.sidebar--open.sm .eui-app-sidebar-drawer--expanded{top:var(--eui-app-sidebar-header-user-profile);position:absolute;width:100%}.eui-app.sidebar--close.md .eui-app-sidebar-drawer,.eui-app.sidebar--close.xs .eui-app-sidebar-drawer,.eui-app.sidebar--close.sm .eui-app-sidebar-drawer{position:fixed;top:100vh}@media screen and (max-width: 767px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:75%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-sidebar-drawer,.eui-app-sidebar-drawer--expanded{width:50%}}\n"] }]
|
|
617
617
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService, decorators: [{
|
|
618
618
|
type: Optional
|
|
619
619
|
}] }, { type: Document, decorators: [{
|
|
@@ -699,7 +699,7 @@ class EuiAppToolbarComponent {
|
|
|
699
699
|
this.document.documentElement.style.removeProperty('--eui-app-toolbar-height');
|
|
700
700
|
}
|
|
701
701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppToolbarComponent, deps: [{ token: i1.EuiAppShellService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
702
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiAppToolbarComponent, isStandalone: true, selector: "eui-app-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "@if (asService.getState('hasSidebar') | async) {\n <eui-sidebar-toggle class=\"eui-app-toolbar__sidebar-toggle\"/>\n}\n\n<ng-content/>\n\n@if ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile) {\n <eui-language-selector isToolbarSelector/>\n}\n", styles: [".eui-app-toolbar{align-items:center;width:100%;height:var(--eui-app-toolbar-height);display:flex;position:fixed;right:0;left:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));z-index:var(--eui-zi-nav);border-bottom:1px solid var(--eui-c-
|
|
702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiAppToolbarComponent, isStandalone: true, selector: "eui-app-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, ngImport: i0, template: "@if (asService.getState('hasSidebar') | async) {\n <eui-sidebar-toggle class=\"eui-app-toolbar__sidebar-toggle\"/>\n}\n\n<ng-content/>\n\n@if ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile) {\n <eui-language-selector isToolbarSelector/>\n}\n", styles: [".eui-app-toolbar{align-items:center;width:100%;height:var(--eui-app-toolbar-height);display:flex;position:fixed;right:0;left:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));z-index:var(--eui-zi-nav);border-bottom:1px solid var(--eui-c-divider)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-s-xs);padding-right:var(--eui-s-xs)}.eui-app-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-app-toolbar--primary .eui-icon-svg svg{fill:var(--eui-c-white);color:var(--eui-c-white)}.eui-app-toolbar--secondary{background-color:var(--eui-c-neutral-bg-lighter);color:var(--eui-c-text)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-s-m) + 2px)}@media screen and (max-width: 767px){.eui-app-toolbar__sidebar-toggle{padding-right:0}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: EuiSidebarToggleComponent, selector: "eui-sidebar-toggle", inputs: ["e2eAttr", "iconSvgFillColor"] }, { kind: "component", type: i2$4.EuiLanguageSelectorComponent, selector: "eui-language-selector", inputs: ["hasLanguageSelection", "isToolbarSelector", "euiPrimary", "aria-label"], outputs: ["languageSelectorClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
703
703
|
}
|
|
704
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiAppToolbarComponent, decorators: [{
|
|
705
705
|
type: Component,
|
|
@@ -707,7 +707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
707
707
|
AsyncPipe,
|
|
708
708
|
EuiSidebarToggleComponent,
|
|
709
709
|
...EUI_LANGUAGE_SELECTOR,
|
|
710
|
-
], template: "@if (asService.getState('hasSidebar') | async) {\n <eui-sidebar-toggle class=\"eui-app-toolbar__sidebar-toggle\"/>\n}\n\n<ng-content/>\n\n@if ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile) {\n <eui-language-selector isToolbarSelector/>\n}\n", styles: [".eui-app-toolbar{align-items:center;width:100%;height:var(--eui-app-toolbar-height);display:flex;position:fixed;right:0;left:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));z-index:var(--eui-zi-nav);border-bottom:1px solid var(--eui-c-
|
|
710
|
+
], template: "@if (asService.getState('hasSidebar') | async) {\n <eui-sidebar-toggle class=\"eui-app-toolbar__sidebar-toggle\"/>\n}\n\n<ng-content/>\n\n@if ((asService.getState('hasHeader') | async) && (asService.breakpoints$ | async).isMobile) {\n <eui-language-selector isToolbarSelector/>\n}\n", styles: [".eui-app-toolbar{align-items:center;width:100%;height:var(--eui-app-toolbar-height);display:flex;position:fixed;right:0;left:0;top:calc(var(--eui-app-header-height) + var(--eui-app-top-message-height));z-index:var(--eui-zi-nav);border-bottom:1px solid var(--eui-c-divider)}.eui-app-toolbar__sidebar-toggle{padding-left:var(--eui-s-xs);padding-right:var(--eui-s-xs)}.eui-app-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-app-toolbar--primary .eui-icon-svg svg{fill:var(--eui-c-white);color:var(--eui-c-white)}.eui-app-toolbar--secondary{background-color:var(--eui-c-neutral-bg-lighter);color:var(--eui-c-text)}.modal-open .eui-app-toolbar{z-index:auto}.eui-t-ec .eui-app-toolbar__sidebar-toggle{padding-top:calc(var(--eui-s-m) + 2px)}@media screen and (max-width: 767px){.eui-app-toolbar__sidebar-toggle{padding-right:0}}\n"] }]
|
|
711
711
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: Document, decorators: [{
|
|
712
712
|
type: Inject,
|
|
713
713
|
args: [DOCUMENT]
|
|
@@ -1162,7 +1162,7 @@ class EuiToolbarMenuComponent {
|
|
|
1162
1162
|
}
|
|
1163
1163
|
}
|
|
1164
1164
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiToolbarMenuComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiToolbarMenuComponent, isStandalone: true, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "@if (items && items.length !== 0) {\n<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\">\n <ul>\n @for (link of items; track link) {\n @if (link.visible === undefined || link.visible === true) {\n <li [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n @if (!link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n class=\"eui-u-mr-xs\" />\n }\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-ml-s\" />\n }\n </div>\n </a>\n }\n @if (link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-mr-xs\" />\n }\n\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-ml-xs\" />\n }\n </div>\n </a>\n }\n @if (link.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childLink of link.children; track childLink) {\n\n @if (childLink.visible === undefined || childLink.visible === true) {\n <li\n class=\"child\"\n [class.has-sub]=\"childLink?.children\"\n [class.separator]=\"childLink.isSeparator\"\n [class.selected]=\"childLink.active\">\n @if (!childLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n [class.disabled]=\"childLink.disabled\"\n (click)=\"onLinkClick(childLink)\"\n (keydown)=\"onKeyDown($event, childLink)\">\n @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.url) {\n <a\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 @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childSubLink of childLink.children; track childSubLink) {\n\n @if (childSubLink.visible === undefined || childSubLink.visible === true) {\n <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\n @if (childSubLink.url) {\n <a\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 @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n @if (!childSubLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n [class.disabled]=\"childSubLink.disabled\"\n (click)=\"onLinkClick(childSubLink)\"\n (keydown)=\"onKeyDown($event, childSubLink)\">\n @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>\n}\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: "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: 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: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiToolbarMenuComponent, isStandalone: true, selector: "eui-toolbar-menu", inputs: { items: "items" }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "@if (items && items.length !== 0) {\n<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\">\n <ul>\n @for (link of items; track link) {\n @if (link.visible === undefined || link.visible === true) {\n <li [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n @if (!link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n class=\"eui-u-mr-xs\" />\n }\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"xs\"\n class=\"eui-u-ml-s\" />\n }\n </div>\n </a>\n }\n @if (link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-mr-xs\" />\n }\n\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"xs\"\n class=\"eui-u-ml-xs\" />\n }\n </div>\n </a>\n }\n @if (link.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childLink of link.children; track childLink) {\n\n @if (childLink.visible === undefined || childLink.visible === true) {\n <li\n class=\"child\"\n [class.has-sub]=\"childLink?.children\"\n [class.separator]=\"childLink.isSeparator\"\n [class.selected]=\"childLink.active\">\n @if (!childLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n [class.disabled]=\"childLink.disabled\"\n (click)=\"onLinkClick(childLink)\"\n (keydown)=\"onKeyDown($event, childLink)\">\n @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.url) {\n <a\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 @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childSubLink of childLink.children; track childSubLink) {\n\n @if (childSubLink.visible === undefined || childSubLink.visible === true) {\n <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\n @if (childSubLink.url) {\n <a\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 @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n @if (!childSubLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n [class.disabled]=\"childSubLink.disabled\"\n (click)=\"onLinkClick(childSubLink)\"\n (keydown)=\"onKeyDown($event, childSubLink)\">\n @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>\n}\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 .2s linear}.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-bg);color:var(--eui-c-active)}.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-divider);border-right:2px solid var(--eui-c-divider);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: "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: 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: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1166
1166
|
}
|
|
1167
1167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiToolbarMenuComponent, decorators: [{
|
|
1168
1168
|
type: Component,
|
|
@@ -1171,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
1171
1171
|
RouterLink,
|
|
1172
1172
|
RouterLinkActive,
|
|
1173
1173
|
TranslateModule,
|
|
1174
|
-
], template: "@if (items && items.length !== 0) {\n<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\">\n <ul>\n @for (link of items; track link) {\n @if (link.visible === undefined || link.visible === true) {\n <li [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n @if (!link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n class=\"eui-u-mr-xs\" />\n }\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-ml-s\" />\n }\n </div>\n </a>\n }\n @if (link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-mr-xs\" />\n }\n\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-ml-xs\" />\n }\n </div>\n </a>\n }\n @if (link.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childLink of link.children; track childLink) {\n\n @if (childLink.visible === undefined || childLink.visible === true) {\n <li\n class=\"child\"\n [class.has-sub]=\"childLink?.children\"\n [class.separator]=\"childLink.isSeparator\"\n [class.selected]=\"childLink.active\">\n @if (!childLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n [class.disabled]=\"childLink.disabled\"\n (click)=\"onLinkClick(childLink)\"\n (keydown)=\"onKeyDown($event, childLink)\">\n @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.url) {\n <a\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 @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childSubLink of childLink.children; track childSubLink) {\n\n @if (childSubLink.visible === undefined || childSubLink.visible === true) {\n <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\n @if (childSubLink.url) {\n <a\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 @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n @if (!childSubLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n [class.disabled]=\"childSubLink.disabled\"\n (click)=\"onLinkClick(childSubLink)\"\n (keydown)=\"onKeyDown($event, childSubLink)\">\n @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>\n}\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"] }]
|
|
1174
|
+
], template: "@if (items && items.length !== 0) {\n<nav id=\"top-menu\" class=\"eui-toolbar-menu-content\">\n <ul>\n @for (link of items; track link) {\n @if (link.visible === undefined || link.visible === true) {\n <li [class.has-sub]=\"link.children\" [class.selected]=\"link.active\" routerLinkActive=\"selected\">\n @if (!link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n class=\"eui-u-mr-xs\" />\n }\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"xs\"\n class=\"eui-u-ml-s\" />\n }\n </div>\n </a>\n }\n @if (link.url) {\n <a\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 @if (link.iconSvgName) {\n <eui-icon-svg\n [icon]=\"link.iconSvgName\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"s\"\n class=\"eui-u-mr-xs\" />\n }\n\n @if (link.iconClass && !link.iconSvgName) {\n <span class=\"{{ link.iconClass }} eui-icon\"></span>\n }\n <span class=\"eui-toolbar-menu-label\">{{ link.label | translate }}</span>\n @if (link.children) {\n <eui-icon-svg\n icon=\"chevron-down:sharp\"\n [fillColor]=\"link.active ? 'neutral' : 'white'\"\n size=\"xs\"\n class=\"eui-u-ml-xs\" />\n }\n </div>\n </a>\n }\n @if (link.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childLink of link.children; track childLink) {\n\n @if (childLink.visible === undefined || childLink.visible === true) {\n <li\n class=\"child\"\n [class.has-sub]=\"childLink?.children\"\n [class.separator]=\"childLink.isSeparator\"\n [class.selected]=\"childLink.active\">\n @if (!childLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childLink.disabled ? 0 : -1\"\n [class.disabled]=\"childLink.disabled\"\n (click)=\"onLinkClick(childLink)\"\n (keydown)=\"onKeyDown($event, childLink)\">\n @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.url) {\n <a\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 @if (childLink.iconClass) {\n <span class=\"eui-toolbar-menu-item__icon eui-icon {{ childLink.iconClass }}\"></span>\n }\n @if (childLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childLink.label | translate }}</span>\n </a>\n }\n @if (childLink.children) {\n <ul class=\"show\" [class.showOnEnter]=\"isdropdownOpen\">\n @for (childSubLink of childLink.children; track childSubLink) {\n\n @if (childSubLink.visible === undefined || childSubLink.visible === true) {\n <li class=\"child\" [class.separator]=\"childSubLink.isSeparator\">\n @if (childSubLink.url) {\n <a\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 @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n @if (!childSubLink.url) {\n <a\n [tabindex]=\"isdropdownOpen && !childSubLink.disabled ? 0 : -1\"\n [class.disabled]=\"childSubLink.disabled\"\n (click)=\"onLinkClick(childSubLink)\"\n (keydown)=\"onKeyDown($event, childSubLink)\">\n @if (childSubLink.iconClass) {\n <span\n class=\"eui-toolbar-menu-item__icon eui-icon {{ childSubLink.iconClass }}\"></span>\n }\n @if (childSubLink.iconSvgName) {\n <eui-icon-svg\n class=\"eui-toolbar-menu-item__icon\"\n icon=\"{{ childSubLink.iconSvgName }}\" />\n }\n <span class=\"eui-toolbar-menu-item__label\">{{ childSubLink.label | translate }}</span>\n </a>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>\n}\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 .2s linear}.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-bg);color:var(--eui-c-active)}.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-divider);border-right:2px solid var(--eui-c-divider);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"] }]
|
|
1175
1175
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
1176
1176
|
type: Inject,
|
|
1177
1177
|
args: [DOCUMENT]
|
|
@@ -1498,7 +1498,7 @@ class EuiToolbarComponent {
|
|
|
1498
1498
|
}, 1);
|
|
1499
1499
|
}
|
|
1500
1500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1501
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiToolbarComponent, isStandalone: true, selector: "eui-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute], euiPrimary: ["euiPrimary", "euiPrimary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenu", first: true, predicate: i0.forwardRef(() => EuiToolbarMenuComponent), descendants: true }], ngImport: i0, template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n <div class=\"eui-toolbar__left\">\n @if ( ( asService.state$ | async).hasHeaderLogo ) {\n <eui-toolbar-logo></eui-toolbar-logo>\n }\n @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n <eui-toolbar-environment>\n {{ (asService.state$ | async).environmentValue }}\n </eui-toolbar-environment>\n }\n @if ( (asService.state$ | async).appName ) {\n <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n }\n </div>\n\n <eui-toolbar-items>\n <eui-toolbar-item>\n <eui-user-profile isShowAvatarInitials>\n <!-- TODO sub-projection doesn't work from eui-header (to investigate)-->\n <!-- <ng-content select=\"eui-user-profile-menu\"/> -->\n </eui-user-profile>\n </eui-toolbar-item>\n </eui-toolbar-items>\n\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n\n} @else {\n @if ( (asService.state$ | async).hasHeader ) {\n\n @if ( hasMenu ) {\n <ng-container *ngTemplateOutlet=\"toolbarMenu\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\" />\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n }\n <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n } @else {\n\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-logo\"></ng-content>\n <ng-content select=\"eui-toolbar-app\"></ng-content>\n <ng-content select=\"eui-toolbar-environment\"></ng-content>\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n\n <div class=\"eui-toolbar__right\">\n <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n </div>\n\n }\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n}\n\n<ng-template #toolbarCenter>\n <ng-content select=\"eui-toolbar-center\" />\n</ng-template>\n\n<ng-template #toolbarItems>\n <ng-content select=\"eui-toolbar-items\" />\n</ng-template>\n\n<ng-template #toolbarNavbar>\n <ng-content select=\"eui-toolbar-navbar\" />\n</ng-template>\n\n<ng-template #toolbarMenu>\n @if (hasMenu) {\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-menu\"></ng-content>\n </div>\n }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n <ng-content select=\"eui-language-selector\" />\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-
|
|
1501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiToolbarComponent, isStandalone: true, selector: "eui-toolbar", inputs: { euiSecondary: ["euiSecondary", "euiSecondary", booleanAttribute], euiPrimary: ["euiPrimary", "euiPrimary", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenu", first: true, predicate: i0.forwardRef(() => EuiToolbarMenuComponent), descendants: true }], ngImport: i0, template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n <div class=\"eui-toolbar__left\">\n @if ( ( asService.state$ | async).hasHeaderLogo ) {\n <eui-toolbar-logo></eui-toolbar-logo>\n }\n @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n <eui-toolbar-environment>\n {{ (asService.state$ | async).environmentValue }}\n </eui-toolbar-environment>\n }\n @if ( (asService.state$ | async).appName ) {\n <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n }\n </div>\n\n <eui-toolbar-items>\n <eui-toolbar-item>\n <eui-user-profile isShowAvatarInitials>\n <!-- TODO sub-projection doesn't work from eui-header (to investigate)-->\n <!-- <ng-content select=\"eui-user-profile-menu\"/> -->\n </eui-user-profile>\n </eui-toolbar-item>\n </eui-toolbar-items>\n\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n\n} @else {\n @if ( (asService.state$ | async).hasHeader ) {\n\n @if ( hasMenu ) {\n <ng-container *ngTemplateOutlet=\"toolbarMenu\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\" />\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n }\n <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n } @else {\n\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-logo\"></ng-content>\n <ng-content select=\"eui-toolbar-app\"></ng-content>\n <ng-content select=\"eui-toolbar-environment\"></ng-content>\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n\n <div class=\"eui-toolbar__right\">\n <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n </div>\n\n }\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n}\n\n<ng-template #toolbarCenter>\n <ng-content select=\"eui-toolbar-center\" />\n</ng-template>\n\n<ng-template #toolbarItems>\n <ng-content select=\"eui-toolbar-items\" />\n</ng-template>\n\n<ng-template #toolbarNavbar>\n <ng-content select=\"eui-toolbar-navbar\" />\n</ng-template>\n\n<ng-template #toolbarMenu>\n @if (hasMenu) {\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-menu\"></ng-content>\n </div>\n }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n <ng-content select=\"eui-language-selector\" />\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-s-danger);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-3xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-neutral-bg-lighter);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light)!important;color:var(--eui-c-branding-light-contrast)!important}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar{flex-wrap:initial;padding:0 var(--eui-s-xs) 0 var(--eui-s-m)}.eui-toolbar-logo{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-toolbar-environment{display:none}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuiToolbarLogoComponent, selector: "eui-toolbar-logo", inputs: ["homeUrl", "logoUrl", "logoHeight", "logoWidth"] }, { kind: "component", type: EuiToolbarEnvironmentComponent, selector: "eui-toolbar-environment" }, { kind: "component", type: EuiToolbarAppComponent, selector: "eui-toolbar-app", inputs: ["appName", "appSubTitle"] }, { kind: "component", type: EuiToolbarItemsComponent, selector: "eui-toolbar-items", inputs: ["euiEnd", "euiPositionRight"] }, { kind: "component", type: EuiToolbarItemComponent, selector: "eui-toolbar-item" }, { kind: "component", type: i1$1.EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "subInfos", "statusVariant", "hasMenu", "hasWelcomeLabel", "isShowAvatarInitials", "hasTabNavigation", "isReverse", "hasToggle", "isHeaderUserProfile", "isToolbarUserProfile", "isShowUserInfos", "euiStatusSecondary", "euiStatusSuccess", "euiStatusDanger", "reverseNameOrder"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1502
1502
|
}
|
|
1503
1503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiToolbarComponent, decorators: [{
|
|
1504
1504
|
type: Component,
|
|
@@ -1511,7 +1511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
1511
1511
|
EuiToolbarItemsComponent,
|
|
1512
1512
|
EuiToolbarItemComponent,
|
|
1513
1513
|
...EUI_USER_PROFILE,
|
|
1514
|
-
], template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n <div class=\"eui-toolbar__left\">\n @if ( ( asService.state$ | async).hasHeaderLogo ) {\n <eui-toolbar-logo></eui-toolbar-logo>\n }\n @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n <eui-toolbar-environment>\n {{ (asService.state$ | async).environmentValue }}\n </eui-toolbar-environment>\n }\n @if ( (asService.state$ | async).appName ) {\n <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n }\n </div>\n\n <eui-toolbar-items>\n <eui-toolbar-item>\n <eui-user-profile isShowAvatarInitials>\n <!-- TODO sub-projection doesn't work from eui-header (to investigate)-->\n <!-- <ng-content select=\"eui-user-profile-menu\"/> -->\n </eui-user-profile>\n </eui-toolbar-item>\n </eui-toolbar-items>\n\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n\n} @else {\n @if ( (asService.state$ | async).hasHeader ) {\n\n @if ( hasMenu ) {\n <ng-container *ngTemplateOutlet=\"toolbarMenu\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\" />\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n }\n <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n } @else {\n\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-logo\"></ng-content>\n <ng-content select=\"eui-toolbar-app\"></ng-content>\n <ng-content select=\"eui-toolbar-environment\"></ng-content>\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n\n <div class=\"eui-toolbar__right\">\n <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n </div>\n\n }\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n}\n\n<ng-template #toolbarCenter>\n <ng-content select=\"eui-toolbar-center\" />\n</ng-template>\n\n<ng-template #toolbarItems>\n <ng-content select=\"eui-toolbar-items\" />\n</ng-template>\n\n<ng-template #toolbarNavbar>\n <ng-content select=\"eui-toolbar-navbar\" />\n</ng-template>\n\n<ng-template #toolbarMenu>\n @if (hasMenu) {\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-menu\"></ng-content>\n </div>\n }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n <ng-content select=\"eui-language-selector\" />\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-
|
|
1514
|
+
], template: "@if ( (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile ) {\n\n <div class=\"eui-toolbar__left\">\n @if ( ( asService.state$ | async).hasHeaderLogo ) {\n <eui-toolbar-logo></eui-toolbar-logo>\n }\n @if ( ( asService.state$ | async).hasHeaderEnvironment ) {\n <eui-toolbar-environment>\n {{ (asService.state$ | async).environmentValue }}\n </eui-toolbar-environment>\n }\n @if ( (asService.state$ | async).appName ) {\n <eui-toolbar-app appName=\"{{ (asService.state$ | async).appName }}\"></eui-toolbar-app>\n }\n </div>\n\n <eui-toolbar-items>\n <eui-toolbar-item>\n <eui-user-profile isShowAvatarInitials>\n <!-- TODO sub-projection doesn't work from eui-header (to investigate)-->\n <!-- <ng-content select=\"eui-user-profile-menu\"/> -->\n </eui-user-profile>\n </eui-toolbar-item>\n </eui-toolbar-items>\n\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n\n} @else {\n @if ( (asService.state$ | async).hasHeader ) {\n\n @if ( hasMenu ) {\n <ng-container *ngTemplateOutlet=\"toolbarMenu\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\" />\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n }\n <ng-container *ngTemplateOutlet=\"toolbarItems\" />\n\n } @else {\n\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-logo\"></ng-content>\n <ng-content select=\"eui-toolbar-app\"></ng-content>\n <ng-content select=\"eui-toolbar-environment\"></ng-content>\n <ng-container *ngTemplateOutlet=\"toolbarNavbar\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"toolbarCenter\" />\n\n <div class=\"eui-toolbar__right\">\n <ng-container *ngTemplateOutlet=\"toolbarItems\"></ng-container>\n </div>\n\n }\n <ng-container *ngTemplateOutlet=\"toolbarLanguageSelector\" />\n}\n\n<ng-template #toolbarCenter>\n <ng-content select=\"eui-toolbar-center\" />\n</ng-template>\n\n<ng-template #toolbarItems>\n <ng-content select=\"eui-toolbar-items\" />\n</ng-template>\n\n<ng-template #toolbarNavbar>\n <ng-content select=\"eui-toolbar-navbar\" />\n</ng-template>\n\n<ng-template #toolbarMenu>\n @if (hasMenu) {\n <div class=\"eui-toolbar__left\">\n <ng-content select=\"eui-toolbar-menu\"></ng-content>\n </div>\n }\n</ng-template>\n\n<ng-template #toolbarLanguageSelector>\n <ng-content select=\"eui-language-selector\" />\n</ng-template>\n", styles: [".eui-toolbar{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;height:var(--eui-app-toolbar-height);justify-content:space-between;padding:0 var(--eui-s-m) 0 var(--eui-s-s);position:relative;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:hidden}.eui-toolbar__left,.eui-toolbar__start{display:flex;align-items:center;flex:1}.eui-toolbar__center{display:block;margin-left:auto;text-align:center}.eui-toolbar__right{align-items:center;display:flex;flex:1;justify-content:right}.eui-toolbar-items{align-items:center;display:flex;margin-left:auto;position:relative;gap:var(--eui-s-s)}.eui-toolbar-items--position-left{margin-right:auto}.eui-toolbar-items--position-right{margin-left:auto}.eui-toolbar-items>*{display:inline-flex}.eui-toolbar-item{display:flex;align-items:center}.eui-toolbar-logo{display:flex;margin-right:var(--eui-s-m)}.eui-toolbar-logo__image{background-size:cover;cursor:pointer;height:40px}.eui-toolbar-app{font:var(--eui-f-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__name{font:var(--eui-f-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-app__subTitle{font:var(--eui-f-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar-environment{background-color:var(--eui-c-s-danger);color:var(--eui-c-white);cursor:pointer;font:var(--eui-f-s);left:var(--eui-s-3xs);pointer-events:none;position:absolute;text-align:center;transform:rotate(-20deg);width:4.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-toolbar--primary{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui-toolbar--secondary,.eui--secondary .eui-toolbar{background-color:var(--eui-c-neutral-bg-lighter);color:var(--eui-c-text)}.eui--primary .eui-toolbar{background-color:var(--eui-c-branding);color:var(--eui-c-white)}.eui--primary .eui-toolbar-item .eui-icon-svg svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--eui-c-branding-light)!important;color:var(--eui-c-branding-light-contrast)!important}.eui--primary .eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover .eui-icon-svg svg{color:var(--eui-c-branding-light-contrast)!important;fill:var(--eui-c-branding-light-contrast)!important}@media screen and (max-width: 767px){.eui-toolbar{flex-wrap:initial;padding:0 var(--eui-s-xs) 0 var(--eui-s-m)}.eui-toolbar-logo{display:none}.eui-toolbar-app{display:block;font:var(--eui-f-xl);padding-left:0;text-overflow:inherit;overflow:visible}.eui-toolbar-environment{display:none}.eui-t-ec .eui-toolbar-app{margin-top:0}}\n"] }]
|
|
1515
1515
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EuiAppShellService }], propDecorators: { cssClasses: [{
|
|
1516
1516
|
type: HostBinding,
|
|
1517
1517
|
args: ['class']
|
|
@@ -2447,7 +2447,7 @@ class EuiNotificationsComponent {
|
|
|
2447
2447
|
return unreadNotifications.length;
|
|
2448
2448
|
}
|
|
2449
2449
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2450
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsComponent, isStandalone: true, selector: "eui-notifications", inputs: { count: "count", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], customUnreadCount: ["customUnreadCount", "customUnreadCount", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (count) {\n <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications__header-title\">\n <div class=\"eui-notifications__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n @if (items) {\n <span\n class=\"eui-u-cursor-help eui-u-ml-s\"\n attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n </span>\n }\n <eui-badge>{{ items.length }}</eui-badge>\n </div>\n </div>\n\n @if (items) {\n <div class=\"eui-notifications__header-actions\">\n @if (isShowMarkAllAsReadButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n (click)=\"onMarkAllAsRead($event)\">\n <eui-icon-svg icon=\"checkmark-done:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowSettingsButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n (click)=\"onSettings($event)\">\n <eui-icon-svg icon=\"settings:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowRefreshButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n (click)=\"onRefresh($event)\">\n <eui-icon-svg icon=\"refresh:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n </div>\n }\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; let i = $index; track $index) {\n <eui-notification-item\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item>\n }\n </ul>\n }\n </eui-overlay-body>\n\n @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n <eui-overlay-footer>\n @if (items?.length > 0 && isShowViewAllAction) {\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n }\n }\n </eui-overlay-footer>\n }\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { 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: "component", type: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2450
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsComponent, isStandalone: true, selector: "eui-notifications", inputs: { count: "count", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], customUnreadCount: ["customUnreadCount", "customUnreadCount", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (count) {\n <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications__header-title\">\n <div class=\"eui-notifications__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n @if (items) {\n <span\n class=\"eui-u-cursor-help eui-u-ml-s\"\n attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n </span>\n }\n <eui-badge>{{ items.length }}</eui-badge>\n </div>\n </div>\n\n @if (items) {\n <div class=\"eui-notifications__header-actions\">\n @if (isShowMarkAllAsReadButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n (click)=\"onMarkAllAsRead($event)\">\n <eui-icon-svg icon=\"checkmark-done:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowSettingsButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n (click)=\"onSettings($event)\">\n <eui-icon-svg icon=\"settings:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowRefreshButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n (click)=\"onRefresh($event)\">\n <eui-icon-svg icon=\"refresh:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n </div>\n }\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; let i = $index; track $index) {\n <eui-notification-item\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item>\n }\n </ul>\n }\n </eui-overlay-body>\n\n @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n <eui-overlay-footer>\n @if (items?.length > 0 && isShowViewAllAction) {\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n }\n }\n </eui-overlay-footer>\n }\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { 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: "component", type: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2451
2451
|
}
|
|
2452
2452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsComponent, decorators: [{
|
|
2453
2453
|
type: Component,
|
|
@@ -2458,7 +2458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
2458
2458
|
...EUI_ICON_BUTTON,
|
|
2459
2459
|
...EUI_BADGE,
|
|
2460
2460
|
...EUI_OVERLAY,
|
|
2461
|
-
|
|
2461
|
+
...EUI_BUTTON,
|
|
2462
|
+
], template: "<eui-icon-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (count) {\n <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications__header-title\">\n <div class=\"eui-notifications__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n @if (items) {\n <span\n class=\"eui-u-cursor-help eui-u-ml-s\"\n attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n </span>\n }\n <eui-badge>{{ items.length }}</eui-badge>\n </div>\n </div>\n\n @if (items) {\n <div class=\"eui-notifications__header-actions\">\n @if (isShowMarkAllAsReadButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n (click)=\"onMarkAllAsRead($event)\">\n <eui-icon-svg icon=\"checkmark-done:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowSettingsButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n (click)=\"onSettings($event)\">\n <eui-icon-svg icon=\"settings:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowRefreshButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n (click)=\"onRefresh($event)\">\n <eui-icon-svg icon=\"refresh:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n </div>\n }\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; let i = $index; track $index) {\n <eui-notification-item\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item>\n }\n </ul>\n }\n </eui-overlay-body>\n\n @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n <eui-overlay-footer>\n @if (items?.length > 0 && isShowViewAllAction) {\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n }\n }\n </eui-overlay-footer>\n }\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
|
|
2462
2463
|
}], propDecorators: { refreshClick: [{
|
|
2463
2464
|
type: Output
|
|
2464
2465
|
}], notificationsClick: [{
|
|
@@ -2692,7 +2693,7 @@ class EuiNotificationsV2Component {
|
|
|
2692
2693
|
return item.id;
|
|
2693
2694
|
}
|
|
2694
2695
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2695
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsV2Component, isStandalone: true, selector: "eui-notifications-v2", inputs: { count: "count", unreadCount: "unreadCount", unreadSinceLastCheckCount: "unreadSinceLastCheckCount", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", headerHideLabel: "headerHideLabel", headerUnreadSinceLastCheckCountLabel: "headerUnreadSinceLastCheckCountLabel", headerUnreadCountLabel: "headerUnreadCountLabel", noNotificationFoundLabel: "noNotificationFoundLabel", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (isShowUnreadSinceLastCheckCount) {\n <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n @if (items.length > 0) {\n <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n }\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"neutral\"></eui-icon-svg>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; track trackByFn($index, item)) {\n <eui-notification-item-v2\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n }\n </ul>\n }\n </eui-overlay-body>\n\n <eui-overlay-footer>\n @if (items?.length > 0) {\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n }\n }\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-white)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar,.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { 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: "component", type: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsV2Component, isStandalone: true, selector: "eui-notifications-v2", inputs: { count: "count", unreadCount: "unreadCount", unreadSinceLastCheckCount: "unreadSinceLastCheckCount", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", headerHideLabel: "headerHideLabel", headerUnreadSinceLastCheckCountLabel: "headerUnreadSinceLastCheckCountLabel", headerUnreadCountLabel: "headerUnreadCountLabel", noNotificationFoundLabel: "noNotificationFoundLabel", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (isShowUnreadSinceLastCheckCount) {\n <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n @if (items.length > 0) {\n <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n }\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"neutral\"></eui-icon-svg>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; track trackByFn($index, item)) {\n <eui-notification-item-v2\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n }\n </ul>\n }\n </eui-overlay-body>\n\n <eui-overlay-footer>\n @if (items?.length > 0) {\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n }\n }\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-white)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar,.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { 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: "component", type: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2696
2697
|
}
|
|
2697
2698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsV2Component, decorators: [{
|
|
2698
2699
|
type: Component,
|
|
@@ -2703,7 +2704,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
2703
2704
|
...EUI_ICON_BUTTON,
|
|
2704
2705
|
...EUI_BADGE,
|
|
2705
2706
|
...EUI_OVERLAY,
|
|
2706
|
-
|
|
2707
|
+
...EUI_BUTTON,
|
|
2708
|
+
], template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (isShowUnreadSinceLastCheckCount) {\n <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n @if (items.length > 0) {\n <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n }\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"neutral\"></eui-icon-svg>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; track trackByFn($index, item)) {\n <eui-notification-item-v2\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n }\n </ul>\n }\n </eui-overlay-body>\n\n <eui-overlay-footer>\n @if (items?.length > 0) {\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n }\n }\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-white)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar,.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
|
|
2707
2709
|
}], propDecorators: { refreshClick: [{
|
|
2708
2710
|
type: Output
|
|
2709
2711
|
}], notificationsClick: [{
|