@eui/components 19.2.2-snapshot-1746647149114 → 19.2.2-snapshot-1746687278530
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/EuiAppComponent.html +2 -1
- package/docs/components/EuiMenuItemComponent.html +2 -1
- package/docs/components/EuiToolbarComponent.html +1 -1
- package/docs/components/EuiUserProfileComponent.html +24 -0
- package/docs/dependencies.html +2 -2
- package/docs/js/menu-wc.js +9 -9
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/miscellaneous/variables.html +1 -0
- package/eui-menu/eui-menu-item.component.d.ts.map +1 -1
- package/eui-user-profile/user-profile.component.d.ts +3 -1
- package/eui-user-profile/user-profile.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +10 -7
- package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
- package/fesm2022/eui-components-eui-user-profile.mjs +8 -1
- package/fesm2022/eui-components-eui-user-profile.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +19 -14
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.d.ts.map +1 -1
- package/layout/eui-app/eui-app.component.d.ts +1 -1
- package/layout/eui-app/eui-app.component.d.ts.map +1 -1
- package/layout/eui-app/eui-app.module.d.ts +3 -2
- package/layout/eui-app/eui-app.module.d.ts.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-menu-item.component.d.ts","sourceRoot":"","sources":["../../eui-menu/eui-menu-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAMH,YAAY,EAEZ,MAAM,EACN,SAAS,EACT,aAAa,EAEb,UAAU,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;;
|
|
1
|
+
{"version":3,"file":"eui-menu-item.component.d.ts","sourceRoot":"","sources":["../../eui-menu/eui-menu-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAMH,YAAY,EAEZ,MAAM,EACN,SAAS,EACT,aAAa,EAEb,UAAU,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;;AAW3D,qBAiBa,oBAAqB,YAAW,MAAM,EAAE,SAAS,EAAE,eAAe;IA4C/D,OAAO,CAAC,UAAU;IA1CJ,IAAI,SAAc;IACZ,SAAS,SAAM;IAE/C,IACW,UAAU,IAAI,MAAM,CAE9B;IAC6B,QAAQ,SAAQ;IAC9C,IACI,YAAY,IAAI,OAAO,CAE1B;IACD,IACI,YAAY,IAAI,OAAO,CAE1B;IACD,IACI,YAAY,IAAI,OAAO,CAE1B;IAEQ,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,UAAQ;IACpB,YAAY,qCAAmC;IAC/C,SAAS,qCAAmC;IAEtD,eAAe,SAAY;IAC3B,iBAAiB,SAAc;IAE/B,SAAS,UAAS;IAClB,UAAU,UAAS;IACnB,WAAW,UAAS;IACpB,mBAAmB,UAAS;IAEY,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,EAAE,OAAO,CAAC;gBAE9C,UAAU,EAAE,UAAU;IAE1C,QAAQ,IAAI,IAAI;IAQhB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAalC,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAK/C,IAAI,eAAe,IAAI,MAAM,CAK5B;IAEM,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,GAAG,IAAI;IAMhD,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKlC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAK1C,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAO/C,eAAe,IAAI,IAAI;IAK9B,oBAAoB,IAAI,IAAI;IAIrB,KAAK,IAAI,IAAI;IAIpB;;;OAGG;IACH,0BAA0B,CAAC,gBAAgB,UAAQ,GAAG,OAAO;IAU7D;;;OAGG;IACH,cAAc,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAIzC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,OAAO,CAAC,aAAa;yCA3JZ,oBAAoB;2CAApB,oBAAoB;sCAkK01yc,OAAQ;yCAAR,OAAQ;mDAAR,OAAQ;0CAAR,OAAQ;mDAAR,OAAQ;+CAAR,OAAQ;CADl4yc"}
|
|
@@ -47,6 +47,7 @@ export declare class EuiUserProfileComponent implements OnInit, OnDestroy, After
|
|
|
47
47
|
isHeaderUserProfile: boolean;
|
|
48
48
|
isToolbarUserProfile: boolean;
|
|
49
49
|
isShowUserInfos: boolean;
|
|
50
|
+
isMobileOnly: boolean;
|
|
50
51
|
euiStatusSecondary: boolean;
|
|
51
52
|
euiStatusSuccess: boolean;
|
|
52
53
|
euiStatusDanger: boolean;
|
|
@@ -65,7 +66,7 @@ export declare class EuiUserProfileComponent implements OnInit, OnDestroy, After
|
|
|
65
66
|
closeDropdown(): void;
|
|
66
67
|
onDropdownExpand(isOpen: boolean): void;
|
|
67
68
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiUserProfileComponent, never>;
|
|
68
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EuiUserProfileComponent, "eui-user-profile", never, { "welcomeLabel": { "alias": "welcomeLabel"; "required": false; }; "impersonateLabel": { "alias": "impersonateLabel"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "subInfos": { "alias": "subInfos"; "required": false; }; "statusVariant": { "alias": "statusVariant"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "hasWelcomeLabel": { "alias": "hasWelcomeLabel"; "required": false; }; "isShowAvatarInitials": { "alias": "isShowAvatarInitials"; "required": false; }; "hasTabNavigation": { "alias": "hasTabNavigation"; "required": false; }; "isReverse": { "alias": "isReverse"; "required": false; }; "hasToggle": { "alias": "hasToggle"; "required": false; }; "isHeaderUserProfile": { "alias": "isHeaderUserProfile"; "required": false; }; "isToolbarUserProfile": { "alias": "isToolbarUserProfile"; "required": false; }; "isShowUserInfos": { "alias": "isShowUserInfos"; "required": false; }; "euiStatusSecondary": { "alias": "euiStatusSecondary"; "required": false; }; "euiStatusSuccess": { "alias": "euiStatusSuccess"; "required": false; }; "euiStatusDanger": { "alias": "euiStatusDanger"; "required": false; }; "reverseNameOrder": { "alias": "reverseNameOrder"; "required": false; }; }, {}, ["hasMenuContent"], ["*"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSizeS": "euiSizeS"; "euiSecondary": "euiSecondary"; "euiPrimary": "euiPrimary"; }; outputs: {}; }]>;
|
|
69
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EuiUserProfileComponent, "eui-user-profile", never, { "welcomeLabel": { "alias": "welcomeLabel"; "required": false; }; "impersonateLabel": { "alias": "impersonateLabel"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "subInfos": { "alias": "subInfos"; "required": false; }; "statusVariant": { "alias": "statusVariant"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "hasWelcomeLabel": { "alias": "hasWelcomeLabel"; "required": false; }; "isShowAvatarInitials": { "alias": "isShowAvatarInitials"; "required": false; }; "hasTabNavigation": { "alias": "hasTabNavigation"; "required": false; }; "isReverse": { "alias": "isReverse"; "required": false; }; "hasToggle": { "alias": "hasToggle"; "required": false; }; "isHeaderUserProfile": { "alias": "isHeaderUserProfile"; "required": false; }; "isToolbarUserProfile": { "alias": "isToolbarUserProfile"; "required": false; }; "isShowUserInfos": { "alias": "isShowUserInfos"; "required": false; }; "isMobileOnly": { "alias": "isMobileOnly"; "required": false; }; "euiStatusSecondary": { "alias": "euiStatusSecondary"; "required": false; }; "euiStatusSuccess": { "alias": "euiStatusSuccess"; "required": false; }; "euiStatusDanger": { "alias": "euiStatusDanger"; "required": false; }; "reverseNameOrder": { "alias": "reverseNameOrder"; "required": false; }; }, {}, ["hasMenuContent"], ["*"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSizeS": "euiSizeS"; "euiSecondary": "euiSecondary"; "euiPrimary": "euiPrimary"; }; outputs: {}; }]>;
|
|
69
70
|
static ngAcceptInputType_hasMenu: unknown;
|
|
70
71
|
static ngAcceptInputType_hasWelcomeLabel: unknown;
|
|
71
72
|
static ngAcceptInputType_isShowAvatarInitials: unknown;
|
|
@@ -75,6 +76,7 @@ export declare class EuiUserProfileComponent implements OnInit, OnDestroy, After
|
|
|
75
76
|
static ngAcceptInputType_isHeaderUserProfile: unknown;
|
|
76
77
|
static ngAcceptInputType_isToolbarUserProfile: unknown;
|
|
77
78
|
static ngAcceptInputType_isShowUserInfos: unknown;
|
|
79
|
+
static ngAcceptInputType_isMobileOnly: unknown;
|
|
78
80
|
static ngAcceptInputType_euiStatusSecondary: unknown;
|
|
79
81
|
static ngAcceptInputType_euiStatusSuccess: unknown;
|
|
80
82
|
static ngAcceptInputType_euiStatusDanger: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user-profile.component.d.ts","sourceRoot":"","sources":["../../eui-user-profile/user-profile.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,MAAM,EAEN,SAAS,EAET,SAAS,EACT,aAAa,EAEb,UAAU,EAEV,MAAM,EAEN,iBAAiB,EACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAgB,oBAAoB,EAAsB,MAAM,8BAA8B,CAAC;AAEtG,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iDAAiD,CAAC;;;AAM9F;;;;;;;GAOG;AACH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC1C,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,YAAY,CAAC,EAAE;QACX,mDAAmD;QACnD,IAAI,EAAE,MAAM,CAAA;KACf,CAAA;CACJ;AAED,qBAwBa,uBAAwB,YAAW,MAAM,EAAE,SAAS,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"user-profile.component.d.ts","sourceRoot":"","sources":["../../eui-user-profile/user-profile.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,MAAM,EAEN,SAAS,EAET,SAAS,EACT,aAAa,EAEb,UAAU,EAEV,MAAM,EAEN,iBAAiB,EACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAgB,oBAAoB,EAAsB,MAAM,8BAA8B,CAAC;AAEtG,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iDAAiD,CAAC;;;AAM9F;;;;;;;GAOG;AACH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC1C,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,YAAY,CAAC,EAAE;QACX,mDAAmD;QACnD,IAAI,EAAE,MAAM,CAAA;KACf,CAAA;CACJ;AAED,qBAwBa,uBAAwB,YAAW,MAAM,EAAE,SAAS,EAAE,aAAa;IA+CxE,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,WAAW;IACZ,mBAAmB,EAAE,mBAAmB;IAjDnD,IACW,UAAU,IAAI,MAAM,CAM9B;IAED,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAEtB,YAAY,SAAa;IACzB,gBAAgB,SAAmB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,SAAa;IAEK,OAAO,UAAS;IAChB,eAAe,UAAQ;IACvB,oBAAoB,UAAS;IAC7B,gBAAgB,UAAS;IACzB,SAAS,UAAS;IAClB,SAAS,UAAS;IAClB,mBAAmB,UAAS;IAC5B,oBAAoB,UAAS;IAC7B,eAAe,UAAQ;IACvB,YAAY,UAAQ;IAEpB,kBAAkB,UAAS;IAC3B,gBAAgB,UAAS;IACzB,eAAe,UAAS;IAChE;;OAEG;IACM,gBAAgB,UAAS;IAEX,QAAQ,EAAE,oBAAoB,CAAC;IAEtD,cAAc,EAAE,SAAS,CAAC,2BAA2B,CAAC,CAAC;IAEvD,cAAc,UAAS;IAEvB,OAAO,CAAC,mBAAmB,CAAgC;gBAG/C,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,EACtC,mBAAmB,EAAE,mBAAmB;IAInD,QAAQ,IAAI,IAAI;IAWhB,eAAe,IAAI,IAAI;IAqCvB,WAAW,IAAI,IAAI;IAKnB,aAAa,IAAI,IAAI;IAKrB,gBAAgB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;yCAhH9B,uBAAuB;2CAAvB,uBAAuB;sCAoH6ozc,OAAQ;8CAAR,OAAQ;mDAAR,OAAQ;+CAAR,OAAQ;wCAAR,OAAQ;wCAAR,OAAQ;kDAAR,OAAQ;mDAAR,OAAQ;8CAAR,OAAQ;2CAAR,OAAQ;iDAAR,OAAQ;+CAAR,OAAQ;8CAAR,OAAQ;CADxrzc"}
|
|
@@ -3,17 +3,19 @@ import { EventEmitter, booleanAttribute, HostListener, Input, Output, HostBindin
|
|
|
3
3
|
import { consumeEvent } from '@eui/core';
|
|
4
4
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
5
5
|
import { NgTemplateOutlet } from '@angular/common';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i2 from '@eui/components/eui-icon';
|
|
7
7
|
import { EUI_ICON } from '@eui/components/eui-icon';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i3 from '@eui/components/eui-badge';
|
|
9
9
|
import { EUI_BADGE } from '@eui/components/eui-badge';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i4 from '@eui/components/eui-icon-button';
|
|
11
11
|
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i5 from '@eui/components/eui-button';
|
|
13
13
|
import { EUI_BUTTON } from '@eui/components/eui-button';
|
|
14
14
|
import { EuiTooltipDirective } from '@eui/components/directives';
|
|
15
15
|
import * as i1$1 from '@angular/router';
|
|
16
16
|
import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
|
|
17
|
+
import * as i1 from '@ngx-translate/core';
|
|
18
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
17
19
|
import { FocusKeyManager } from '@angular/cdk/a11y';
|
|
18
20
|
import * as i3$1 from '@eui/components/eui-icon-input';
|
|
19
21
|
import { EUI_ICON_INPUT } from '@eui/components/eui-icon-input';
|
|
@@ -146,7 +148,7 @@ class EuiMenuItemComponent {
|
|
|
146
148
|
].join(' ').trim();
|
|
147
149
|
}
|
|
148
150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiMenuItemComponent, isStandalone: true, selector: "eui-menu-item", inputs: { item: "item", parent: "parent", hasExpandIcon: "hasExpandIcon", hasIcon: ["hasIcon", "hasIcon", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], hasTooltipOnExpanded: ["hasTooltipOnExpanded", "hasTooltipOnExpanded", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute] }, outputs: { expandToggle: "expandToggle", itemClick: "itemClick" }, host: { listeners: { "click": "stopPropagation($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses", "attr.tabindex": "this.tabindex", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-disabled": "this.ariaDisabled" } }, usesOnChanges: true, ngImport: i0, template: "@if (item.visible && item.filtered) {\n @if (isLabelItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n class=\"eui-menu-item__content\"\n [attr.data-e2e]=\"item.e2eAttr\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [euiTooltip]=\"menuItemTooltip\"\n tabindex=\"-1\"\n position=\"after\">\n\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link eui-menu-item__link-category\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label-category\">{{ item.label }}</span>\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n </a>\n </li>\n }\n\n @if (isUrlItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n [routerLink]=\"item.url ? item.url : null\"\n [queryParams]=\"item.queryParams\"\n [routerLinkActive]=\"item.url ? 'eui-menu-item__link--active' : ''\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\"\n tabindex=\"-1\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n\n @if (isLinkItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n}\n\n<ng-template #linkContent>\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label\">{{ item.label }}</span>\n @if (item.urlExternal && item.urlExternalTarget === '_blank') {\n <eui-icon-svg\n class=\"eui-menu-item__label-external\"\n icon=\"eui-ecl-external\"\n size=\"2xs\"\n aria-label=\"external link icon\"\n euiEnd>\n </eui-icon-svg>\n }\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n</ng-template>\n\n<!-- PROJECTED CONTENT BLOCK -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n\n<!-- PROJECTED START BLOCK -->\n<ng-template #itemIconContent>\n @if (!isCollapsed) {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n @else if (!isLabelItem) {\n <!-- DEFAULT for non category items -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n } @else if (item.hasMarker) {\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n\n } @else {\n @if (hasCollapsedInitials) {\n <span class=\"eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}\">\n {{ item.initials }}\n </span>\n } @else {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n } @else {\n <!-- DEFAULT -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\"\n [aria-label]=\"item.iconLabel\" />\n }\n } @else {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon eui-u-ml-2xs\"\n icon=\"square:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n }\n }\n</ng-template>\n\n<!-- PROJECTED END BLOCK -->\n<ng-template #itemEndContent>\n @if (item.tagLabel) {\n @if (isCollapsed) {\n <eui-badge [euiVariant]=\"item.tagTypeClass\" class=\"eui-menu-item__link-dotted-badge\" />\n } @else {\n <eui-badge [euiVariant]=\"item.tagTypeClass\">\n {{ item.tagLabel }}\n </eui-badge>\n }\n }\n\n @if (item.actionIcon) {\n <button\n euiButton\n euiRounded\n euiIconButton\n euiSizeS\n euiBasicButton\n type=\"button\"\n tabindex=\"-1\"\n (keydown)=\"onActionIconKeyDown($event)\"\n (focusout)=\"onActionIconFocusOut()\"\n (focus)=\"focusActionIcon()\"\n class=\"eui-menu-item__link-action-icon\"\n [euiDisabled]=\"item.disabled\"\n [attr.aria-label]=\"item.actionIcon?.label\"\n (click)=\"onActionIconClick($event)\">\n <eui-icon-svg [icon]=\"item.actionIcon?.icon\" [fillColor]=\"item.actionIcon?.color\"></eui-icon-svg>\n </button>\n }\n\n @if (hasExpandIcon) {\n @if (item.children?.length > 0) {\n <eui-icon-button\n class=\"eui-menu-item__link-toggle\"\n [icon]=\"item.expanded ? 'chevron-up:sharp': 'chevron-down:sharp'\"\n (buttonClick)=\"onExpandToggle($event)\"\n [ariaLabel]=\"item.expanded ? collapseMenuLabel : expandMenuLabel\"\n euiRounded\n size=\"s\"\n [tabindex]=\"-1\"\n [euiDisabled]=\"item.disabled\"/>\n }\n }\n</ng-template>\n", styles: [".eui-19 .eui-menu{display:flex;flex-direction:column;gap:0;list-style:none;margin-block-start:0;margin-block-end:0;margin:0;padding:0;width:100%}.eui-19 .eui-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-19 .eui-menu--collapsed .eui-menu-item__link-content-block,.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-dotted-badge{position:absolute;top:var(--eui-s-2xs);right:var(--eui-s-2xs);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-xs));transform:scale(.75);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-s-xs);font:var(--eui-f-s-bold);justify-content:center;margin-left:calc(-1 * var(--eui-s-2xs));min-width:var(--eui-s-2xl)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-s)}.eui-19 .eui-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-19 .eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-19 .eui-menu-filter--collapsed{padding:0;height:0}.eui-19 .eui-menu-filter--collapsed .eui-icon-svg{display:none}.eui-19 .eui-menu-item{display:flex;position:relative;width:100%}.eui-19 .eui-menu-item:focus-visible>.eui-menu-item__content{outline:1px solid var(--eui-c-focus-visible);outline-offset:0px}.eui-19 .eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%;border:var(--eui-bw-xs) solid transparent}.eui-19 .eui-menu-item__link{align-items:center;color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);min-height:var(--eui-s-4xl);padding:0 var(--eui-s-xs) 0 var(--eui-s-m);margin-bottom:calc(-1 * var(--eui-s-2xs));border-top:1px solid var(--eui-c-neutral-bg);text-decoration:none;width:100%}.eui-19 .eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link-start-block:empty{display:none}.eui-19 .eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{cursor:default;color:var(--eui-c-neutral-darker);font:var(--eui-f-bold);opacity:var(--eui-o-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link:hover:not(.eui-menu-item--disabled):not(.eui-menu-item__link-category){background-color:var(--eui-c-active-bg);text-decoration:none}.eui-19 .eui-menu-item__link--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-active-bg);font:var(--eui-f-m-bold)}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-link)}.eui-19 .eui-menu-item--expanded{display:flex;flex-direction:column}.eui-19 .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-3xl)}.eui-19 .eui-menu-item .eui-menu-sub .eui-menu-item__link{min-height:var(--eui-s-3xl);padding-left:var(--eui-s-xl);border-top:0}.eui-19 .eui-menu-item--bold>.eui-menu-item__content>.eui-menu-item__link{font:var(--eui-f-m-bold)}\n"], dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.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: i2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiMenuItemComponent, isStandalone: true, selector: "eui-menu-item", inputs: { item: "item", parent: "parent", hasExpandIcon: "hasExpandIcon", hasIcon: ["hasIcon", "hasIcon", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], hasTooltipOnExpanded: ["hasTooltipOnExpanded", "hasTooltipOnExpanded", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute] }, outputs: { expandToggle: "expandToggle", itemClick: "itemClick" }, host: { listeners: { "click": "stopPropagation($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses", "attr.tabindex": "this.tabindex", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-disabled": "this.ariaDisabled" } }, usesOnChanges: true, ngImport: i0, template: "@if (item.visible && item.filtered) {\n @if (isLabelItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n class=\"eui-menu-item__content\"\n [attr.data-e2e]=\"item.e2eAttr\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [euiTooltip]=\"menuItemTooltip\"\n tabindex=\"-1\"\n position=\"after\">\n\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link eui-menu-item__link-category\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label-category\">{{ item.label | translate }}</span>\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n </a>\n </li>\n }\n\n @if (isUrlItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n [routerLink]=\"item.url ? item.url : null\"\n [queryParams]=\"item.queryParams\"\n [routerLinkActive]=\"item.url ? 'eui-menu-item__link--active' : ''\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\"\n tabindex=\"-1\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n\n @if (isLinkItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n}\n\n<ng-template #linkContent>\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label\">{{ item.label | translate }}</span>\n @if (item.urlExternal && item.urlExternalTarget === '_blank') {\n <eui-icon-svg\n class=\"eui-menu-item__label-external\"\n icon=\"eui-ecl-external\"\n size=\"2xs\"\n aria-label=\"external link icon\"\n euiEnd>\n </eui-icon-svg>\n }\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n</ng-template>\n\n<!-- PROJECTED CONTENT BLOCK -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n\n<!-- PROJECTED START BLOCK -->\n<ng-template #itemIconContent>\n @if (!isCollapsed) {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n @else if (!isLabelItem) {\n <!-- DEFAULT for non category items -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n } @else if (item.hasMarker) {\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n\n } @else {\n @if (hasCollapsedInitials) {\n <span class=\"eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}\">\n {{ item.initials }}\n </span>\n } @else {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n } @else {\n <!-- DEFAULT -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\"\n [aria-label]=\"item.iconLabel\" />\n }\n } @else {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon eui-u-ml-2xs\"\n icon=\"square:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n }\n }\n</ng-template>\n\n<!-- PROJECTED END BLOCK -->\n<ng-template #itemEndContent>\n @if (item.tagLabel) {\n @if (isCollapsed) {\n <eui-badge [euiVariant]=\"item.tagTypeClass\" class=\"eui-menu-item__link-dotted-badge\" />\n } @else {\n <eui-badge [euiVariant]=\"item.tagTypeClass\">\n {{ item.tagLabel }}\n </eui-badge>\n }\n }\n\n @if (item.actionIcon) {\n <button\n euiButton\n euiRounded\n euiIconButton\n euiSizeS\n euiBasicButton\n type=\"button\"\n tabindex=\"-1\"\n (keydown)=\"onActionIconKeyDown($event)\"\n (focusout)=\"onActionIconFocusOut()\"\n (focus)=\"focusActionIcon()\"\n class=\"eui-menu-item__link-action-icon\"\n [euiDisabled]=\"item.disabled\"\n [attr.aria-label]=\"item.actionIcon?.label\"\n (click)=\"onActionIconClick($event)\">\n <eui-icon-svg [icon]=\"item.actionIcon?.icon\" [fillColor]=\"item.actionIcon?.color\"></eui-icon-svg>\n </button>\n }\n\n @if (hasExpandIcon) {\n @if (item.children?.length > 0) {\n <eui-icon-button\n class=\"eui-menu-item__link-toggle\"\n [icon]=\"item.expanded ? 'chevron-up:sharp': 'chevron-down:sharp'\"\n (buttonClick)=\"onExpandToggle($event)\"\n [ariaLabel]=\"item.expanded ? collapseMenuLabel : expandMenuLabel\"\n euiRounded\n size=\"s\"\n [tabindex]=\"-1\"\n [euiDisabled]=\"item.disabled\"/>\n }\n }\n</ng-template>\n", styles: [".eui-19 .eui-menu{display:flex;flex-direction:column;gap:0;list-style:none;margin-block-start:0;margin-block-end:0;margin:0;padding:0;width:100%}.eui-19 .eui-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-19 .eui-menu--collapsed .eui-menu-item__link-content-block,.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-dotted-badge{position:absolute;top:var(--eui-s-2xs);right:var(--eui-s-2xs);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-xs));transform:scale(.75);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-s-xs);font:var(--eui-f-s-bold);justify-content:center;margin-left:calc(-1 * var(--eui-s-2xs));min-width:var(--eui-s-2xl)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-s)}.eui-19 .eui-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-19 .eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-19 .eui-menu-filter--collapsed{padding:0;height:0}.eui-19 .eui-menu-filter--collapsed .eui-icon-svg{display:none}.eui-19 .eui-menu-item{display:flex;position:relative;width:100%}.eui-19 .eui-menu-item:focus-visible>.eui-menu-item__content{outline:1px solid var(--eui-c-focus-visible);outline-offset:0px}.eui-19 .eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%;border:var(--eui-bw-xs) solid transparent}.eui-19 .eui-menu-item__link{align-items:center;color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);min-height:var(--eui-s-4xl);padding:0 var(--eui-s-xs) 0 var(--eui-s-m);margin-bottom:calc(-1 * var(--eui-s-2xs));border-top:1px solid var(--eui-c-neutral-bg);text-decoration:none;width:100%}.eui-19 .eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link-start-block:empty{display:none}.eui-19 .eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{cursor:default;color:var(--eui-c-neutral-darker);font:var(--eui-f-bold);opacity:var(--eui-o-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link:hover:not(.eui-menu-item--disabled):not(.eui-menu-item__link-category){background-color:var(--eui-c-active-bg);text-decoration:none}.eui-19 .eui-menu-item__link--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-active-bg);font:var(--eui-f-m-bold)}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-link)}.eui-19 .eui-menu-item--expanded{display:flex;flex-direction:column}.eui-19 .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-3xl)}.eui-19 .eui-menu-item .eui-menu-sub .eui-menu-item__link{min-height:var(--eui-s-3xl);padding-left:var(--eui-s-xl);border-top:0}.eui-19 .eui-menu-item--bold>.eui-menu-item__content>.eui-menu-item__link{font:var(--eui-f-m-bold)}\n"], dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: i2.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: i3.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { 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: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
150
152
|
}
|
|
151
153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiMenuItemComponent, decorators: [{
|
|
152
154
|
type: Component,
|
|
@@ -154,12 +156,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
154
156
|
RouterLink,
|
|
155
157
|
RouterLinkActive,
|
|
156
158
|
NgTemplateOutlet,
|
|
159
|
+
TranslateModule,
|
|
157
160
|
...EUI_ICON,
|
|
158
161
|
...EUI_BADGE,
|
|
159
162
|
...EUI_ICON_BUTTON,
|
|
160
163
|
...EUI_BUTTON,
|
|
161
164
|
EuiTooltipDirective,
|
|
162
|
-
], template: "@if (item.visible && item.filtered) {\n @if (isLabelItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n class=\"eui-menu-item__content\"\n [attr.data-e2e]=\"item.e2eAttr\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [euiTooltip]=\"menuItemTooltip\"\n tabindex=\"-1\"\n position=\"after\">\n\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link eui-menu-item__link-category\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label-category\">{{ item.label }}</span>\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n </a>\n </li>\n }\n\n @if (isUrlItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n [routerLink]=\"item.url ? item.url : null\"\n [queryParams]=\"item.queryParams\"\n [routerLinkActive]=\"item.url ? 'eui-menu-item__link--active' : ''\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\"\n tabindex=\"-1\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n\n @if (isLinkItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n}\n\n<ng-template #linkContent>\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label\">{{ item.label }}</span>\n @if (item.urlExternal && item.urlExternalTarget === '_blank') {\n <eui-icon-svg\n class=\"eui-menu-item__label-external\"\n icon=\"eui-ecl-external\"\n size=\"2xs\"\n aria-label=\"external link icon\"\n euiEnd>\n </eui-icon-svg>\n }\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n</ng-template>\n\n<!-- PROJECTED CONTENT BLOCK -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n\n<!-- PROJECTED START BLOCK -->\n<ng-template #itemIconContent>\n @if (!isCollapsed) {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n @else if (!isLabelItem) {\n <!-- DEFAULT for non category items -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n } @else if (item.hasMarker) {\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n\n } @else {\n @if (hasCollapsedInitials) {\n <span class=\"eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}\">\n {{ item.initials }}\n </span>\n } @else {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n } @else {\n <!-- DEFAULT -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\"\n [aria-label]=\"item.iconLabel\" />\n }\n } @else {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon eui-u-ml-2xs\"\n icon=\"square:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n }\n }\n</ng-template>\n\n<!-- PROJECTED END BLOCK -->\n<ng-template #itemEndContent>\n @if (item.tagLabel) {\n @if (isCollapsed) {\n <eui-badge [euiVariant]=\"item.tagTypeClass\" class=\"eui-menu-item__link-dotted-badge\" />\n } @else {\n <eui-badge [euiVariant]=\"item.tagTypeClass\">\n {{ item.tagLabel }}\n </eui-badge>\n }\n }\n\n @if (item.actionIcon) {\n <button\n euiButton\n euiRounded\n euiIconButton\n euiSizeS\n euiBasicButton\n type=\"button\"\n tabindex=\"-1\"\n (keydown)=\"onActionIconKeyDown($event)\"\n (focusout)=\"onActionIconFocusOut()\"\n (focus)=\"focusActionIcon()\"\n class=\"eui-menu-item__link-action-icon\"\n [euiDisabled]=\"item.disabled\"\n [attr.aria-label]=\"item.actionIcon?.label\"\n (click)=\"onActionIconClick($event)\">\n <eui-icon-svg [icon]=\"item.actionIcon?.icon\" [fillColor]=\"item.actionIcon?.color\"></eui-icon-svg>\n </button>\n }\n\n @if (hasExpandIcon) {\n @if (item.children?.length > 0) {\n <eui-icon-button\n class=\"eui-menu-item__link-toggle\"\n [icon]=\"item.expanded ? 'chevron-up:sharp': 'chevron-down:sharp'\"\n (buttonClick)=\"onExpandToggle($event)\"\n [ariaLabel]=\"item.expanded ? collapseMenuLabel : expandMenuLabel\"\n euiRounded\n size=\"s\"\n [tabindex]=\"-1\"\n [euiDisabled]=\"item.disabled\"/>\n }\n }\n</ng-template>\n", styles: [".eui-19 .eui-menu{display:flex;flex-direction:column;gap:0;list-style:none;margin-block-start:0;margin-block-end:0;margin:0;padding:0;width:100%}.eui-19 .eui-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-19 .eui-menu--collapsed .eui-menu-item__link-content-block,.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-dotted-badge{position:absolute;top:var(--eui-s-2xs);right:var(--eui-s-2xs);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-xs));transform:scale(.75);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-s-xs);font:var(--eui-f-s-bold);justify-content:center;margin-left:calc(-1 * var(--eui-s-2xs));min-width:var(--eui-s-2xl)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-s)}.eui-19 .eui-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-19 .eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-19 .eui-menu-filter--collapsed{padding:0;height:0}.eui-19 .eui-menu-filter--collapsed .eui-icon-svg{display:none}.eui-19 .eui-menu-item{display:flex;position:relative;width:100%}.eui-19 .eui-menu-item:focus-visible>.eui-menu-item__content{outline:1px solid var(--eui-c-focus-visible);outline-offset:0px}.eui-19 .eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%;border:var(--eui-bw-xs) solid transparent}.eui-19 .eui-menu-item__link{align-items:center;color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);min-height:var(--eui-s-4xl);padding:0 var(--eui-s-xs) 0 var(--eui-s-m);margin-bottom:calc(-1 * var(--eui-s-2xs));border-top:1px solid var(--eui-c-neutral-bg);text-decoration:none;width:100%}.eui-19 .eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link-start-block:empty{display:none}.eui-19 .eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{cursor:default;color:var(--eui-c-neutral-darker);font:var(--eui-f-bold);opacity:var(--eui-o-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link:hover:not(.eui-menu-item--disabled):not(.eui-menu-item__link-category){background-color:var(--eui-c-active-bg);text-decoration:none}.eui-19 .eui-menu-item__link--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-active-bg);font:var(--eui-f-m-bold)}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-link)}.eui-19 .eui-menu-item--expanded{display:flex;flex-direction:column}.eui-19 .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-3xl)}.eui-19 .eui-menu-item .eui-menu-sub .eui-menu-item__link{min-height:var(--eui-s-3xl);padding-left:var(--eui-s-xl);border-top:0}.eui-19 .eui-menu-item--bold>.eui-menu-item__content>.eui-menu-item__link{font:var(--eui-f-m-bold)}\n"] }]
|
|
165
|
+
], template: "@if (item.visible && item.filtered) {\n @if (isLabelItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n class=\"eui-menu-item__content\"\n [attr.data-e2e]=\"item.e2eAttr\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [euiTooltip]=\"menuItemTooltip\"\n tabindex=\"-1\"\n position=\"after\">\n\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link eui-menu-item__link-category\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label-category\">{{ item.label | translate }}</span>\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n </a>\n </li>\n }\n\n @if (isUrlItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n [routerLink]=\"item.url ? item.url : null\"\n [queryParams]=\"item.queryParams\"\n [routerLinkActive]=\"item.url ? 'eui-menu-item__link--active' : ''\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\"\n tabindex=\"-1\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n\n @if (isLinkItem) {\n <li\n role=\"none\"\n id=\"{{item.id}}\"\n [attr.data-e2e]=\"item.e2eAttr\"\n class=\"eui-menu-item__content\"\n [class.eui-menu-item--disabled]=\"item.disabled\"\n [class.eui-menu-item--expanded]=\"item.expanded || item.filtered\"\n [attr.aria-disabled]=\"item.disabled\">\n <a\n (click)=\"onClick($event)\"\n tabindex=\"-1\"\n class=\"eui-menu-item__link\"\n [class.eui-menu-item__link--disabled]=\"item.disabled\"\n [class.eui-menu-item__link--active]=\"item.active\"\n [class.eui-menu-item__link--has-sub]=\"item.children?.length > 0\"\n href=\"javascript:void(0)\"\n [euiTooltip]=\"menuItemTooltip\"\n position=\"after\">\n <ng-template *ngTemplateOutlet=\"linkContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </a>\n\n <ng-template *ngTemplateOutlet=\"content\"></ng-template>\n </li>\n }\n}\n\n<ng-template #linkContent>\n <div class=\"eui-menu-item__link-start-block\">\n <ng-template *ngTemplateOutlet=\"itemIconContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n\n <div class=\"eui-menu-item__link-content-block\">\n <div class=\"eui-menu-item__link-label-container\">\n <span class=\"eui-menu-item__link-label\">{{ item.label | translate }}</span>\n @if (item.urlExternal && item.urlExternalTarget === '_blank') {\n <eui-icon-svg\n class=\"eui-menu-item__label-external\"\n icon=\"eui-ecl-external\"\n size=\"2xs\"\n aria-label=\"external link icon\"\n euiEnd>\n </eui-icon-svg>\n }\n </div>\n </div>\n\n <div class=\"eui-menu-item__link-end-block\">\n <ng-template *ngTemplateOutlet=\"itemEndContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </div>\n</ng-template>\n\n<!-- PROJECTED CONTENT BLOCK -->\n<ng-template #content>\n <ng-content />\n</ng-template>\n\n<!-- PROJECTED START BLOCK -->\n<ng-template #itemIconContent>\n @if (!isCollapsed) {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n @else if (!isLabelItem) {\n <!-- DEFAULT for non category items -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n } @else if (item.hasMarker) {\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n }\n\n } @else {\n @if (hasCollapsedInitials) {\n <span class=\"eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}\">\n {{ item.initials }}\n </span>\n } @else {\n @if (hasIcon) {\n @if (item.iconSvgName) {\n <!-- SVG -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"{{ item.iconSvgName }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.iconSvgUrl) {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n iconUrl=\"{{ item.iconSvgUrl }}\"\n fillColor=\"{{ item.iconTypeClass }}\" />\n\n } @else if (item.hasMarker) {\n <!-- MARKER -->\n <eui-icon-svg\n class=\"eui-menu-item__link-marker\"\n fillColor=\"{{ item?.markerTypeClass }}\"\n icon=\"ellipse:sharp\"\n size=\"2xs\"\n [aria-label]=\"item.markerTypeClass + ' ' + 'marker'\" />\n } @else {\n <!-- DEFAULT -->\n <eui-icon-svg\n class=\"eui-menu-item__link-icon\"\n icon=\"ellipse:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\"\n [aria-label]=\"item.iconLabel\" />\n }\n } @else {\n <eui-icon-svg\n class=\"eui-menu-item__link-icon eui-u-ml-2xs\"\n icon=\"square:sharp\"\n fillColor=\"neutral-light\"\n size=\"2xs\" />\n }\n }\n }\n</ng-template>\n\n<!-- PROJECTED END BLOCK -->\n<ng-template #itemEndContent>\n @if (item.tagLabel) {\n @if (isCollapsed) {\n <eui-badge [euiVariant]=\"item.tagTypeClass\" class=\"eui-menu-item__link-dotted-badge\" />\n } @else {\n <eui-badge [euiVariant]=\"item.tagTypeClass\">\n {{ item.tagLabel }}\n </eui-badge>\n }\n }\n\n @if (item.actionIcon) {\n <button\n euiButton\n euiRounded\n euiIconButton\n euiSizeS\n euiBasicButton\n type=\"button\"\n tabindex=\"-1\"\n (keydown)=\"onActionIconKeyDown($event)\"\n (focusout)=\"onActionIconFocusOut()\"\n (focus)=\"focusActionIcon()\"\n class=\"eui-menu-item__link-action-icon\"\n [euiDisabled]=\"item.disabled\"\n [attr.aria-label]=\"item.actionIcon?.label\"\n (click)=\"onActionIconClick($event)\">\n <eui-icon-svg [icon]=\"item.actionIcon?.icon\" [fillColor]=\"item.actionIcon?.color\"></eui-icon-svg>\n </button>\n }\n\n @if (hasExpandIcon) {\n @if (item.children?.length > 0) {\n <eui-icon-button\n class=\"eui-menu-item__link-toggle\"\n [icon]=\"item.expanded ? 'chevron-up:sharp': 'chevron-down:sharp'\"\n (buttonClick)=\"onExpandToggle($event)\"\n [ariaLabel]=\"item.expanded ? collapseMenuLabel : expandMenuLabel\"\n euiRounded\n size=\"s\"\n [tabindex]=\"-1\"\n [euiDisabled]=\"item.disabled\"/>\n }\n }\n</ng-template>\n", styles: [".eui-19 .eui-menu{display:flex;flex-direction:column;gap:0;list-style:none;margin-block-start:0;margin-block-end:0;margin:0;padding:0;width:100%}.eui-19 .eui-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-19 .eui-menu--collapsed .eui-menu-item__link-content-block,.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-dotted-badge{position:absolute;top:var(--eui-s-2xs);right:var(--eui-s-2xs);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-xs));transform:scale(.75);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-s-xs);font:var(--eui-f-s-bold);justify-content:center;margin-left:calc(-1 * var(--eui-s-2xs));min-width:var(--eui-s-2xl)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-s)}.eui-19 .eui-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-19 .eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-19 .eui-menu-filter--collapsed{padding:0;height:0}.eui-19 .eui-menu-filter--collapsed .eui-icon-svg{display:none}.eui-19 .eui-menu-item{display:flex;position:relative;width:100%}.eui-19 .eui-menu-item:focus-visible>.eui-menu-item__content{outline:1px solid var(--eui-c-focus-visible);outline-offset:0px}.eui-19 .eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%;border:var(--eui-bw-xs) solid transparent}.eui-19 .eui-menu-item__link{align-items:center;color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);min-height:var(--eui-s-4xl);padding:0 var(--eui-s-xs) 0 var(--eui-s-m);margin-bottom:calc(-1 * var(--eui-s-2xs));border-top:1px solid var(--eui-c-neutral-bg);text-decoration:none;width:100%}.eui-19 .eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link-start-block:empty{display:none}.eui-19 .eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{cursor:default;color:var(--eui-c-neutral-darker);font:var(--eui-f-bold);opacity:var(--eui-o-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link:hover:not(.eui-menu-item--disabled):not(.eui-menu-item__link-category){background-color:var(--eui-c-active-bg);text-decoration:none}.eui-19 .eui-menu-item__link--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-active-bg);font:var(--eui-f-m-bold)}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-link)}.eui-19 .eui-menu-item--expanded{display:flex;flex-direction:column}.eui-19 .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-3xl)}.eui-19 .eui-menu-item .eui-menu-sub .eui-menu-item__link{min-height:var(--eui-s-3xl);padding-left:var(--eui-s-xl);border-top:0}.eui-19 .eui-menu-item--bold>.eui-menu-item__content>.eui-menu-item__link{font:var(--eui-f-m-bold)}\n"] }]
|
|
163
166
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { role: [{
|
|
164
167
|
type: HostBinding,
|
|
165
168
|
args: ['attr.role']
|
|
@@ -710,7 +713,7 @@ class EuiMenuComponent {
|
|
|
710
713
|
return this.filterInput?.nativeElement?.value.length > 0;
|
|
711
714
|
}
|
|
712
715
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiMenuComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiMenuComponent, isStandalone: true, selector: "eui-menu", inputs: { items: "items", searchFilterLabel: "searchFilterLabel", externalLinkLabel: "externalLinkLabel", fragmentId: "fragmentId", filterValue: "filterValue", isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], hasTooltipOnExpanded: ["hasTooltipOnExpanded", "hasTooltipOnExpanded", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute] }, outputs: { isClick: "isClick", itemClick: "itemClick", expandToggle: "expandToggle" }, host: { listeners: { "click": "stopPropagation($event)" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef }, { propertyName: "menuItemsComponents", predicate: EuiMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasFilter) {\n <div class=\"eui-menu-filter\" [class.eui-menu-filter--collapsed]=\"isCollapsed\" (click)=\"onMenuFilterClick($event)\">\n <eui-icon-input>\n <eui-icon-svg icon=\"eui-ecl-search\" fillColor=\"neutral-lighter\" aria-label=\"Search Icon\"></eui-icon-svg>\n <input\n #filterInput\n euiInputText\n [euiClearable]=\"true\"\n (input)=\"onFilter($event)\"\n [placeholder]=\"searchFilterLabel\"\n [attr.aria-label]=\"searchFilterLabel\"\n [value]=\"filterValue\" />\n </eui-icon-input>\n </div>\n}\n\n<ul euiList class=\"eui-menu\" role=\"menubar\" aria-orientation=\"vertical\" tabindex=\"0\" (keydown)=\"onKeydown($event)\">\n @if (items) {\n @for (item of items; track item.id; let index = $index) {\n <ng-template [ngTemplateOutlet]=\"menuItemTemplateRef\" [ngTemplateOutletContext]=\"{ menuItem: item, index: index }\"></ng-template>\n }\n } @else {\n <span class=\"eui-menu--no-items\">No menu items defined</span>\n }\n</ul>\n\n<!-- describe the recursive template of the menu item -->\n<ng-template #menuItemTemplateRef let-item=\"menuItem\" let-parent=\"parent\" let-i=\"index\">\n <!-- render the menu item-->\n @if (item.filtered) {\n <eui-menu-item\n [item]=\"item\"\n [parent]=\"parent\"\n [hasIcon]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [hasTooltipOnExpanded]=\"hasTooltipOnExpanded\"\n [isCollapsed]=\"isCollapsed\"\n [hasBoldRootLevel]=\"hasBoldRootLevel\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n (expandToggle)=\"onExpandToggle($event)\"\n (itemClick)=\"onClick($event)\"\n [hasExpandIcon]=\"hasExpandIcon\">\n <!-- if the menu item has children, render the children -->\n @if (shouldRenderChild(item)) {\n <ul euiList class=\"eui-menu eui-menu-sub\" role=\"menu\" [attr.aria-label]=\"item.label\" tabindex=\"-1\">\n @for (child of item.children; track child.id; let childIndex = $index) {\n <ng-template [ngTemplateOutlet]=\"menuItemTemplateRef\" [ngTemplateOutletContext]=\"{ menuItem: child, index: childIndex, parent: item }\">\n </ng-template>\n }\n </ul>\n }\n </eui-menu-item>\n }\n</ng-template>\n", styles: [".eui-19 .eui-menu{display:flex;flex-direction:column;gap:0;list-style:none;margin-block-start:0;margin-block-end:0;margin:0;padding:0;width:100%}.eui-19 .eui-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-19 .eui-menu--collapsed .eui-menu-item__link-content-block,.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-dotted-badge{position:absolute;top:var(--eui-s-2xs);right:var(--eui-s-2xs);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-xs));transform:scale(.75);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-s-xs);font:var(--eui-f-s-bold);justify-content:center;margin-left:calc(-1 * var(--eui-s-2xs));min-width:var(--eui-s-2xl)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-s)}.eui-19 .eui-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-19 .eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-19 .eui-menu-filter--collapsed{padding:0;height:0}.eui-19 .eui-menu-filter--collapsed .eui-icon-svg{display:none}.eui-19 .eui-menu-item{display:flex;position:relative;width:100%}.eui-19 .eui-menu-item:focus-visible>.eui-menu-item__content{outline:1px solid var(--eui-c-focus-visible);outline-offset:0px}.eui-19 .eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%;border:var(--eui-bw-xs) solid transparent}.eui-19 .eui-menu-item__link{align-items:center;color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);min-height:var(--eui-s-4xl);padding:0 var(--eui-s-xs) 0 var(--eui-s-m);margin-bottom:calc(-1 * var(--eui-s-2xs));border-top:1px solid var(--eui-c-neutral-bg);text-decoration:none;width:100%}.eui-19 .eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link-start-block:empty{display:none}.eui-19 .eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{cursor:default;color:var(--eui-c-neutral-darker);font:var(--eui-f-bold);opacity:var(--eui-o-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link:hover:not(.eui-menu-item--disabled):not(.eui-menu-item__link-category){background-color:var(--eui-c-active-bg);text-decoration:none}.eui-19 .eui-menu-item__link--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-active-bg);font:var(--eui-f-m-bold)}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-link)}.eui-19 .eui-menu-item--expanded{display:flex;flex-direction:column}.eui-19 .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-3xl)}.eui-19 .eui-menu-item .eui-menu-sub .eui-menu-item__link{min-height:var(--eui-s-3xl);padding-left:var(--eui-s-xl);border-top:0}.eui-19 .eui-menu-item--bold>.eui-menu-item__content>.eui-menu-item__link{font:var(--eui-f-m-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuiMenuItemComponent, selector: "eui-menu-item", inputs: ["item", "parent", "hasExpandIcon", "hasIcon", "hasTooltip", "hasTooltipOnExpanded", "isCollapsed", "hasCollapsedInitials", "hasBoldRootLevel"], outputs: ["expandToggle", "itemClick"] }, { kind: "component", type:
|
|
716
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiMenuComponent, isStandalone: true, selector: "eui-menu", inputs: { items: "items", searchFilterLabel: "searchFilterLabel", externalLinkLabel: "externalLinkLabel", fragmentId: "fragmentId", filterValue: "filterValue", isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], hasTooltipOnExpanded: ["hasTooltipOnExpanded", "hasTooltipOnExpanded", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute] }, outputs: { isClick: "isClick", itemClick: "itemClick", expandToggle: "expandToggle" }, host: { listeners: { "click": "stopPropagation($event)" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef }, { propertyName: "menuItemsComponents", predicate: EuiMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasFilter) {\n <div class=\"eui-menu-filter\" [class.eui-menu-filter--collapsed]=\"isCollapsed\" (click)=\"onMenuFilterClick($event)\">\n <eui-icon-input>\n <eui-icon-svg icon=\"eui-ecl-search\" fillColor=\"neutral-lighter\" aria-label=\"Search Icon\"></eui-icon-svg>\n <input\n #filterInput\n euiInputText\n [euiClearable]=\"true\"\n (input)=\"onFilter($event)\"\n [placeholder]=\"searchFilterLabel\"\n [attr.aria-label]=\"searchFilterLabel\"\n [value]=\"filterValue\" />\n </eui-icon-input>\n </div>\n}\n\n<ul euiList class=\"eui-menu\" role=\"menubar\" aria-orientation=\"vertical\" tabindex=\"0\" (keydown)=\"onKeydown($event)\">\n @if (items) {\n @for (item of items; track item.id; let index = $index) {\n <ng-template [ngTemplateOutlet]=\"menuItemTemplateRef\" [ngTemplateOutletContext]=\"{ menuItem: item, index: index }\"></ng-template>\n }\n } @else {\n <span class=\"eui-menu--no-items\">No menu items defined</span>\n }\n</ul>\n\n<!-- describe the recursive template of the menu item -->\n<ng-template #menuItemTemplateRef let-item=\"menuItem\" let-parent=\"parent\" let-i=\"index\">\n <!-- render the menu item-->\n @if (item.filtered) {\n <eui-menu-item\n [item]=\"item\"\n [parent]=\"parent\"\n [hasIcon]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [hasTooltipOnExpanded]=\"hasTooltipOnExpanded\"\n [isCollapsed]=\"isCollapsed\"\n [hasBoldRootLevel]=\"hasBoldRootLevel\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n (expandToggle)=\"onExpandToggle($event)\"\n (itemClick)=\"onClick($event)\"\n [hasExpandIcon]=\"hasExpandIcon\">\n <!-- if the menu item has children, render the children -->\n @if (shouldRenderChild(item)) {\n <ul euiList class=\"eui-menu eui-menu-sub\" role=\"menu\" [attr.aria-label]=\"item.label\" tabindex=\"-1\">\n @for (child of item.children; track child.id; let childIndex = $index) {\n <ng-template [ngTemplateOutlet]=\"menuItemTemplateRef\" [ngTemplateOutletContext]=\"{ menuItem: child, index: childIndex, parent: item }\">\n </ng-template>\n }\n </ul>\n }\n </eui-menu-item>\n }\n</ng-template>\n", styles: [".eui-19 .eui-menu{display:flex;flex-direction:column;gap:0;list-style:none;margin-block-start:0;margin-block-end:0;margin:0;padding:0;width:100%}.eui-19 .eui-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-19 .eui-menu--collapsed .eui-menu-item__link-content-block,.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-dotted-badge{position:absolute;top:var(--eui-s-2xs);right:var(--eui-s-2xs);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-xs));transform:scale(.75);visibility:visible}.eui-19 .eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-s-xs);font:var(--eui-f-s-bold);justify-content:center;margin-left:calc(-1 * var(--eui-s-2xs));min-width:var(--eui-s-2xl)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-19 .eui-menu--collapsed .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-s)}.eui-19 .eui-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-19 .eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-19 .eui-menu-filter--collapsed{padding:0;height:0}.eui-19 .eui-menu-filter--collapsed .eui-icon-svg{display:none}.eui-19 .eui-menu-item{display:flex;position:relative;width:100%}.eui-19 .eui-menu-item:focus-visible>.eui-menu-item__content{outline:1px solid var(--eui-c-focus-visible);outline-offset:0px}.eui-19 .eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%;border:var(--eui-bw-xs) solid transparent}.eui-19 .eui-menu-item__link{align-items:center;color:var(--eui-c-text);cursor:pointer;display:flex;font:var(--eui-f-m);gap:var(--eui-s-xs);min-height:var(--eui-s-4xl);padding:0 var(--eui-s-xs) 0 var(--eui-s-m);margin-bottom:calc(-1 * var(--eui-s-2xs));border-top:1px solid var(--eui-c-neutral-bg);text-decoration:none;width:100%}.eui-19 .eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link-start-block:empty{display:none}.eui-19 .eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label{color:var(--eui-c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{cursor:default;color:var(--eui-c-neutral-darker);font:var(--eui-f-bold);opacity:var(--eui-o-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-19 .eui-menu-item__link:hover:not(.eui-menu-item--disabled):not(.eui-menu-item__link-category){background-color:var(--eui-c-active-bg);text-decoration:none}.eui-19 .eui-menu-item__link--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-active-bg);font:var(--eui-f-m-bold)}.eui-19 .eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-link)}.eui-19 .eui-menu-item--expanded{display:flex;flex-direction:column}.eui-19 .eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-3xl)}.eui-19 .eui-menu-item .eui-menu-sub .eui-menu-item__link{min-height:var(--eui-s-3xl);padding-left:var(--eui-s-xl);border-top:0}.eui-19 .eui-menu-item--bold>.eui-menu-item__content>.eui-menu-item__link{font:var(--eui-f-m-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuiMenuItemComponent, selector: "eui-menu-item", inputs: ["item", "parent", "hasExpandIcon", "hasIcon", "hasTooltip", "hasTooltipOnExpanded", "isCollapsed", "hasCollapsedInitials", "hasBoldRootLevel"], outputs: ["expandToggle", "itemClick"] }, { kind: "component", type: i2.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: i3$1.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i4$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
714
717
|
}
|
|
715
718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiMenuComponent, decorators: [{
|
|
716
719
|
type: Component,
|