npm - @eui/components - Versions diffs - 18.0.0-next.49 → 18.0.0-next.50 - Mend

@eui/components 18.0.0-next.49 → 18.0.0-next.50

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.

Files changed (270) hide show

package/fesm2022/eui-components-eui-menu.mjs CHANGED Viewed

@@ -125,195 +125,281 @@ var EuiMenuItemComponent = class _EuiMenuItemComponent {
    */
   getCssClasses() {
     return [
-      this.baseStatesDirective.getCssClasses("eui-menu-item"),
-      this.isLabelLowercase ? "eui-menu-item--lowercase" : ""
+      this.baseStatesDirective.getCssClasses("eui-menu-item")
+      // this.isLabelLowercase ? 'eui-menu-item--lowercase': '',
     ].join(" ").trim();
   }
   static {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: _EuiMenuItemComponent, deps: [{ token: i1.BaseStatesDirective }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.6", type: _EuiMenuItemComponent, selector: "eui-menu-item", inputs: { item: "item", parent: "parent", hasIcon: ["hasIcon", "hasIcon", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isLabelLowercase: ["isLabelLowercase", "isLabelLowercase", 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" } }, hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i0, template: `<li
-    *ngIf="isLabelItem && item.visible && item.filtered"
-    role="none"
-    id="{{item.id}}"
-    class="eui-menu-item eui-menu-item__category"
-    [attr.data-e2e]="item.e2eAttr"
-    [class.eui-menu-item--disabled]="item.disabled"
-    [attr.aria-disabled]="item.disabled"
-    [euiTooltip]="menuItemTooltip"
-    tabindex="-1"
-    position="after">
-    <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-    <span class="eui-menu-item__category-label">
-        <span class="eui-menu-item__label">{{ item.label }}</span>
-    </span>
-</li>
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.6", type: _EuiMenuItemComponent, selector: "eui-menu-item", inputs: { item: "item", parent: "parent", hasIcon: ["hasIcon", "hasIcon", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isLabelLowercase: ["isLabelLowercase", "isLabelLowercase", 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" } }, hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i0, template: `@if (item.visible && item.filtered) {
+    @if (isLabelItem) {
+        <li
+            role="none"
+            id="{{item.id}}"
+            class="eui-menu-item__content"
+            [attr.data-e2e]="item.e2eAttr"
+            [class.eui-menu-item--disabled]="item.disabled"
+            [attr.aria-disabled]="item.disabled"
+            [euiTooltip]="menuItemTooltip"
+            tabindex="-1"
+            position="after">
-<li
-    *ngIf="isUrlItem && item.visible && item.filtered"
-    role="none"
-    id="{{item.id}}"
-    [attr.data-e2e]="item.e2eAttr"
-    class="eui-menu-item"
-    [class.eui-menu-item--expanded]="item.expanded">
-    <a
-        (click)="onClick($event)"
-        tabindex="-1"
-        [routerLink]="item.url ? item.url : null"
-        class="eui-menu-item__link"
-        [class.eui-menu-item--disabled]="item.disabled"
-        [routerLinkActive]="item.url ? 'eui-menu-item__link--active' : ''"
-        [class.eui-menu-item__link--active]="item.active"
-        [euiTooltip]="menuItemTooltip"
-        position="after">
-        <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-    </a>
+            <a
+                (click)="onClick($event)"
+                tabindex="-1"
+                class="eui-menu-item__link eui-menu-item__link-category"
+                [class.eui-menu-item__link--disabled]="item.disabled"
+                [class.eui-menu-item__link--active]="item.active"
+                [class.eui-menu-item__link--has-sub]="item.children?.length > 0"
+                href="javascript:void(0)"
+                [euiTooltip]="menuItemTooltip"
+                position="after">
-    <ng-template *ngTemplateOutlet="content"></ng-template>
-</li>
+                <div class="eui-menu-item__link-start-block">
+                    <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                </div>
-<li
-    *ngIf="isLinkItem && item.visible && item.filtered"
-    role="none"
-    id="{{item.id}}"
-    [attr.data-e2e]="item.e2eAttr"
-    class="eui-menu-item"
-    [class.eui-menu-item--expanded]="item.expanded">
-    <a
-        (click)="onClick($event)"
-        tabindex="-1"
-        class="eui-menu-item__link"
-        [class.eui-menu-item--disabled]="item.disabled"
-        [class.eui-menu-item__link--active]="item.active"
-        href="javascript:void(0)"
-        [euiTooltip]="menuItemTooltip"
-        position="after">
-        <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-    </a>
+                <div class="eui-menu-item__link-content-block">
+                    <div class="eui-menu-item__link-label-container">
+                        <span class="eui-menu-item__link-label-category" [class.eui-menu-item__link-label--lowercase]="isLabelLowercase">{{ item.label }}</span>
+                    </div>
+                </div>
-    <ng-template *ngTemplateOutlet="content"></ng-template>
-</li>
+                <div class="eui-menu-item__link-end-block">
+                    <ng-template *ngTemplateOutlet="itemEndContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                </div>
+            </a>
+        </li>
+    }
-<ng-template #linkContent>
-    <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+    @if (isUrlItem) {
+        <li
+            role="none"
+            id="{{item.id}}"
+            [attr.data-e2e]="item.e2eAttr"
+            class="eui-menu-item__content"
+            [class.eui-menu-item--disabled]="item.disabled"
+            [class.eui-menu-item--expanded]="item.expanded"
+            [attr.aria-disabled]="item.disabled">
+            <a
+                (click)="onClick($event)"
+                class="eui-menu-item__link"
+                [class.eui-menu-item__link--disabled]="item.disabled"
+                [class.eui-menu-item__link--active]="item.active"
+                [class.eui-menu-item__link--has-sub]="item.children?.length > 0"
+                [routerLink]="item.url ? item.url : null"
+                [routerLinkActive]="item.url ? 'eui-menu-item__link--active' : ''"
+                [euiTooltip]="menuItemTooltip"
+                position="after"
+                tabindex="-1">
+                <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+            </a>
-    <eui-icon-svg
-        *ngIf="item.hasMarker && !hasCollapsedInitials"
-        class="eui-menu-item__link-marker eui-menu-item__link-marker--default"
-        fillColor="{{ item?.markerTypeClass }}"
-        icon="eui-ellipse"
-        size="xs"
-        [aria-label]="item.markerTypeClass + ' ' + 'marker'">
-    </eui-icon-svg>
+            <ng-template *ngTemplateOutlet="content"></ng-template>
+        </li>
+    }
-    <span class="eui-menu-item__link-label" [class.eui-menu-item--disabled]="item.disabled" [attr.aria-disabled]="item.disabled">
-        <span class="eui-menu-item__label">{{ item.label }}</span>
+    @if (isLinkItem) {
+        <li
+            role="none"
+            id="{{item.id}}"
+            [attr.data-e2e]="item.e2eAttr"
+            class="eui-menu-item__content"
+            [class.eui-menu-item--disabled]="item.disabled"
+            [class.eui-menu-item--expanded]="item.expanded"
+            [attr.aria-disabled]="item.disabled">
+            <a
+                (click)="onClick($event)"
+                tabindex="-1"
+                class="eui-menu-item__link"
+                [class.eui-menu-item__link--disabled]="item.disabled"
+                [class.eui-menu-item__link--active]="item.active"
+                [class.eui-menu-item__link--has-sub]="item.children?.length > 0"
+                href="javascript:void(0)"
+                [euiTooltip]="menuItemTooltip"
+                position="after">
+                <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+            </a>
-        <eui-icon-svg
-            *ngIf="item.urlExternal && item.urlExternalTarget === '_blank'"
-            class="eui-menu-item__label-external"
-            icon="eui-ecl-external"
-            size="2xs"
-            aria-label="external link icon">
-        </eui-icon-svg>
-    </span>
+            <ng-template *ngTemplateOutlet="content"></ng-template>
+        </li>
+    }
+}
-    <div class="eui-menu-item__link-right-content">
-        <eui-chip *ngIf="item.tagLabel" euiSizeXS euiOutline class="eui-menu-item__link-tag-label eui-chip--{{ item.tagTypeClass }}" [ariaLabel]="item.tagLabel">
-            <span euiLabel class="eui-label">{{ item.tagLabel }}</span>
-        </eui-chip>
+<ng-template #linkContent>
+    <div class="eui-menu-item__link-start-block">
+        <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+    </div>
-        <button
-            *ngIf="item.actionIcon"
-            euiButton
-            euiRounded
-            euiIconButton
-            euiSizeS
-            euiBasicButton
-            type="button"
-            tabindex="-1"
-            (keydown)="onActionIconKeyDown($event)"
-            (focusout)="onActionIconFocusOut()"
-            (focus)="focusActionIcon()"
-            class="eui-menu-item__link-action-icon"
-            [euiDisabled]="item.disabled"
-            [attr.aria-label]="item.actionIcon?.label"
-            (click)="onActionIconClick($event)">
-            <eui-icon-svg [icon]="item.actionIcon?.icon" [fillColor]="item.actionIcon?.color"></eui-icon-svg>
-        </button>
+    <div class="eui-menu-item__link-content-block">
+        <div class="eui-menu-item__link-label-container">
+            <span class="eui-menu-item__link-label" [class.eui-menu-item__link-label--lowercase]="isLabelLowercase">{{ item.label }}</span>
+            <eui-icon-svg
+                *ngIf="item.urlExternal && item.urlExternalTarget === '_blank'"
+                class="eui-menu-item__label-external"
+                icon="eui-ecl-external"
+                size="2xs"
+                aria-label="external link icon"
+                euiEnd>
+            </eui-icon-svg>
+        </div>
+    </div>
-        <button
-            *ngIf="item.children?.length > 0"
-            euiButton
-            euiRounded
-            euiIconButton
-            euiSizeS
-            euiBasicButton
-            euiSecondary
-            type="button"
-            [euiDisabled]="item.disabled"
-            class="eui-menu-item__link-toggle"
-            tabindex="-1"
-            [attr.aria-label]="item.expanded ? collapseMenuLabel : expandMenuLabel"
-            (click)="onExpandToggle($event)">
-            <eui-icon-svg *ngIf="item.expanded" icon="eui-chevron-up"></eui-icon-svg>
-            <eui-icon-svg *ngIf="!item.expanded" icon="eui-chevron-down"></eui-icon-svg>
-        </button>
+    <div class="eui-menu-item__link-end-block">
+        <ng-template *ngTemplateOutlet="itemEndContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
     </div>
 </ng-template>
+<!-- PROJECTED CONTENT BLOCK -->
 <ng-template #content>
     <ng-content></ng-content>
 </ng-template>
+<!-- PROJECTED START BLOCK -->
 <ng-template #itemIconContent>
     @if (!isCollapsed) {
-        <eui-icon-svg
-            *ngIf="hasIcon && item.iconSvgName && !item.iconClass"
-            class="eui-menu-item__link-icon"
-            icon="{{ item.iconSvgName }}"
-            fillColor="{{ item.iconTypeClass }}"
-            size="s">
-        </eui-icon-svg>
-        <span *ngIf="hasIcon && item.iconClass && !item.iconSvgName" [attr.aria-label]="item.iconLabel"
-            class="eui-menu-item__link-icon eui-icon {{item.iconClass}}">
-        </span>
-    } @else {
-        @if (hasCollapsedInitials) {
-            <span class="eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}">
-                {{ item.initials }}
-            </span>
-        } @else {
-            @if (hasIcon) {
+        @if (hasIcon) {
+            @if (item.iconSvgName && !item.iconClass) {
+                <!-- SVG -->
                 <eui-icon-svg
-                    *ngIf="item.iconSvgName"
+                    class="eui-menu-item__link-icon"
                     icon="{{ item.iconSvgName }}"
                     fillColor="{{ item.iconTypeClass }}"
                     size="s">
                 </eui-icon-svg>
+            } @else if (item.iconClass && !item.iconSvgName) {
+                <!-- WEBFONT -->
+                <span class="eui-menu-item__link-icon eui-icon {{item.iconClass}}" [attr.aria-label]="item.iconLabel"></span>
+            } @else if (item.hasMarker) {
+                <!-- MARKER -->
+                <eui-icon-svg
+                    class="eui-menu-item__link-marker"
+                    fillColor="{{ item?.markerTypeClass }}"
+                    icon="eui-ellipse"
+                    size="xs"
+                    [aria-label]="item.markerTypeClass + ' ' + 'marker'">
+                </eui-icon-svg>
+            }
+            @else {
+                <!-- DEFAULT -->
                 <eui-icon-svg
-                    *ngIf="!item.iconSvgName && !item.hasMarker"
-                    class="eui-menu-item__category-icon--default"
+                    class="eui-menu-item__link-icon"
                     icon="eui-ellipse"
                     fillColor="neutral-light"
                     size="xs">
                 </eui-icon-svg>
+            }
+        } @else if (item.hasMarker) {
+            <eui-icon-svg
+                class="eui-menu-item__link-marker"
+                fillColor="{{ item?.markerTypeClass }}"
+                icon="eui-ellipse"
+                size="xs"
+                [aria-label]="item.markerTypeClass + ' ' + 'marker'">
+            </eui-icon-svg>
+        }
+    } @else {
+        @if (hasCollapsedInitials) {
+            <span class="eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}">
+                {{ item.initials }}
+            </span>
+        } @else {
+            @if (hasIcon) {
+                @if (item.iconSvgName && !item.iconClass) {
+                    <!-- SVG -->
+                    <eui-icon-svg
+                        class="eui-menu-item__link-icon"
+                        icon="{{ item.iconSvgName }}"
+                        fillColor="{{ item.iconTypeClass }}"
+                        size="s">
+                    </eui-icon-svg>
+                } @else if (item.iconClass && !item.iconSvgName) {
+                    <!-- WEBFONT -->
+                    <span class="eui-menu-item__link-icon eui-icon {{item.iconClass}}" [attr.aria-label]="item.iconLabel"></span>
+                } @else if (item.hasMarker) {
+                    <!-- MARKER -->
+                    <eui-icon-svg
+                        class="eui-menu-item__link-marker"
+                        fillColor="{{ item?.markerTypeClass }}"
+                        icon="eui-ellipse"
+                        size="s"
+                        [aria-label]="item.markerTypeClass + ' ' + 'marker'">
+                    </eui-icon-svg>
+                } @else {
+                    <!-- DEFAULT -->
+                    <eui-icon-svg
+                        class="eui-menu-item__link-icon"
+                        icon="eui-ellipse"
+                        fillColor="neutral-light"
+                        size="s"
+                        [aria-label]="item.iconLabel">
+                    </eui-icon-svg>
+                }
             } @else {
                 <eui-icon-svg
-                    *ngIf="!item.hasMarker"
-                    class="eui-menu-item__link-icon--default"
+                    class="eui-menu-item__link-icon"
                     icon="eui-ellipse"
-                    size="xs"
-                    [aria-label]="item.iconLabel">
+                    fillColor="neutral-light"
+                    size="s">
                 </eui-icon-svg>
             }
         }
     }
 </ng-template>
-`, styles: ['.eui-menu,.eui-menu-wrapper{display:flex;flex-direction:column;flex-shrink:0;width:100%;list-style:none;margin-bottom:0;margin-top:0;padding:0}.eui-menu--no-items,.eui-menu-wrapper--no-items{color:var(--eui-c-neutral-lightest);display:block;text-align:center}.eui-menu:focus:not([readonly]),.eui-menu-wrapper:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]),.eui-menu-wrapper:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]),.eui-menu-wrapper [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content{margin:0;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-toggle{display:inherit;position:absolute;right:0;transform:scale(.65);visibility:visible}.eui-menu-filter{margin:var(--eui-s-m) 0;padding:0 var(--eui-s-m);position:relative}.eui-menu-item{display:flex;flex-direction:column;position:relative;width:100%;border:1px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-item{align-items:center;display:flex;flex-direction:column}.eui-menu-item__category{align-items:center;color:var(--eui-c-neutral-light);display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) var(--eui-s-m);text-decoration:none;text-transform:uppercase;font:var(--eui-f-s-bold)}.eui-page-column__body .eui-menu-item__category{text-transform:inherit}.eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--none)+.eui-menu-item__category-label,.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--default)+.eui-menu-item__category-label{padding-left:var(--eui-s-xs)}.eui-menu-item__category-icon--none{padding:0}.eui-menu-item__category-icon--default{align-items:center;display:flex;justify-content:center;width:100%}.ff.eui-menu--collapsed .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__category-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__category-label{display:none}.eui-menu-item__category .eui-menu-item__link-icon{margin-right:var(--eui-s-xs)}.eui-menu-item a.eui-menu-item__link{border-bottom:none}.eui-menu-item__link{align-items:center;border-top:1px solid var(--eui-c-neutral-bg);color:var(--eui-c-text)!important;cursor:pointer;display:flex;justify-content:center;padding:calc(.5 * var(--eui-s-xs)) var(--eui-s-s);text-decoration:none;text-transform:uppercase;white-space:nowrap;width:100%}.eui-page-column__body .eui-menu-item__link{text-transform:inherit}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none!important}.eui-menu-item__link:hover:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none;font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-item__link-icon--with-badge .eui-chip{display:flex;height:var(--eui-s-m);left:-12px;position:absolute;top:-4px}.eui-menu-item__link-icon--none{padding:0}.eui-menu-item__link-icon--none+.eui-menu-item__category-label{margin-left:calc(-1 * var(--eui-s-s))}.eui-menu-item__link-icon--default{align-items:center;display:flex;flex-direction:column;font-size:var(--eui-f-size-xs);justify-content:inherit;width:100%}.ff.eui-menu--collapsed .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__link-label{display:none}.eui-page-column__body .eui-menu-item__link-label{font:var(--eui-f-m)}.eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-tag-label{display:flex;margin-left:var(--eui-s-xs);transform:scale(1)}.eui-menu--collapsed .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875)}.eui-menu-item__link-toggle{margin-left:var(--eui-s-2xs);margin-right:calc(-1 * var(--eui-s-xs));transition:all .3s linear}.eui-menu--collapsed .eui-menu-item__link-toggle{display:none;transition:none}.eui-menu-item__link-action-icon{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border-radius:var(--eui-s-xs);min-width:var(--eui-s-2xl);text-align:center;justify-content:center;border:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-s-bold)}.eui-menu-item__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__label-external{color:var(--eui-c-neutral-lighter);margin-left:var(--eui-s-xs);font:var(--eui-f-s)}.eui-menu-item__label-external .eui-icon-svg{fill:var(--eui-c-neutral-light);height:var(--eui-s-s);width:var(--eui-s-s)}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-app.ff.sidebar--close .eui-menu-item__link-tag-label{right:0}.eui-menu-item--expanded .eui-menu-item__category{display:flex}.eui-menu-item--disabled{background-image:none;box-shadow:none;cursor:default;opacity:.65;pointer-events:none}.eui-menu-item--lowercase .eui-menu-item__link,.eui-menu-item--lowercase .eui-menu-item__label,.eui-menu-item--lowercase .eui-menu-item__category,.eui-menu-item--lowercase .eui-menu-item__category-label{text-transform:initial!important}.eui-menu-item--lowercase .eui-menu-item__link-label{font-size:var(--eui-f-size)}.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon--default,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon--default{display:none}.eui-menu-sub{text-decoration:none}.eui-menu-sub .eui-menu-item__category{align-items:center;display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xl);text-decoration:none;text-transform:uppercase}.eui-page-column__body .eui-menu-sub .eui-menu-item__category{text-transform:inherit}.eui-menu-sub .eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-sub .eui-menu-item__category-icon--default{color:var(--eui-c-info)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__category-label .eui-menu-item__label{display:block;border-bottom:1px solid var(--eui-c-neutral-lightest);padding-bottom:var(--eui-s-2xs);font:var(--eui-f-s-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category{padding-left:0}.eui-menu-sub .eui-menu-item__link{border:none;height:calc(2.25 * var(--eui-s-m));padding-left:var(--eui-s-xl);text-transform:initial}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xs);padding-right:0}.eui-menu-sub .eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-sub .eui-menu-item__link-icon--default{font-size:var(--eui-f-size-xs);margin:0}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__link-icon--none{display:none}.eui-menu-sub .eui-menu-item__link-marker{display:flex;justify-content:center;position:relative}.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--none+.eui-menu-item__link-label,.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--default+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-marker{margin-left:calc(-1 * var(--eui-s-2xs))}.eui-menu-sub .eui-menu-item__link-label{height:auto;padding-top:var(--eui-s-3xs);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content{margin-left:var(--eui-s-2xs)}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-sub .eui-menu-item{padding-left:calc(1 * var(--eui-s-m))}.eui-menu--collapsed .eui-menu--no-icons .eui-menu-sub .eui-menu-item__link{margin-left:calc(-1 * var(--eui-s-m))}\n'], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+<!-- PROJECTED END BLOCK -->
+<ng-template #itemEndContent>
+    <eui-chip *ngIf="item.tagLabel" euiSizeXS euiOutline class="eui-menu-item__link-tag-label eui-chip--{{ item.tagTypeClass }}" [ariaLabel]="item.tagLabel">
+        <span euiLabel class="eui-label">{{ item.tagLabel }}</span>
+    </eui-chip>
+    <button
+        *ngIf="item.actionIcon"
+        euiButton
+        euiRounded
+        euiIconButton
+        euiSizeS
+        euiBasicButton
+        type="button"
+        tabindex="-1"
+        (keydown)="onActionIconKeyDown($event)"
+        (focusout)="onActionIconFocusOut()"
+        (focus)="focusActionIcon()"
+        class="eui-menu-item__link-action-icon"
+        [euiDisabled]="item.disabled"
+        [attr.aria-label]="item.actionIcon?.label"
+        (click)="onActionIconClick($event)">
+        <eui-icon-svg [icon]="item.actionIcon?.icon" [fillColor]="item.actionIcon?.color"></eui-icon-svg>
+    </button>
+    <button
+        *ngIf="item.children?.length > 0"
+        euiButton
+        euiRounded
+        euiIconButton
+        euiSizeS
+        euiBasicButton
+        euiSecondary
+        type="button"
+        [euiDisabled]="item.disabled"
+        class="eui-menu-item__link-toggle"
+        tabindex="-1"
+        [attr.aria-label]="item.expanded ? collapseMenuLabel : expandMenuLabel"
+        (click)="onExpandToggle($event)">
+        <eui-icon-svg *ngIf="item.expanded" icon="eui-chevron-up"></eui-icon-svg>
+        <eui-icon-svg *ngIf="!item.expanded" icon="eui-chevron-down"></eui-icon-svg>
+    </button>
+</ng-template>
+`, styles: ['.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-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-menu--collapsed .eui-menu-item__link-content-block,.eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-s));transform:scale(.75);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:1px solid var(--eui-c-neutral-lightest);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-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link,.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-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-menu-item{display:flex;position:relative;width:100%;border:2px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%}.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);padding:var(--eui-s-xs) var(--eui-s-2xs) calc(var(--eui-s-xs) - 2px) var(--eui-s-s);text-decoration:none;width:100%}.eui-menu-item__link.eui-menu-item__link-category{cursor:default}.eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.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-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{font:var(--eui-f-m-bold);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none}.eui-menu-item__link--disabled{opacity:var(--eui-base-disabled-opacity);pointer-events:none}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--has-sub{border-top:1px solid var(--eui-c-neutral-bg)}.eui-menu-item__link-label--lowercase{text-transform:initial}.eui-menu-item--expanded{display:flex;flex-direction:column}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xl)}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link--has-sub{font-weight:initial;text-transform:initial}.eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-5xl)}.eui-menu-item--expanded .eui-menu-item__link--has-sub:not(:first-child){border-bottom:1px solid var(--eui-c-neutral-bg)}\n'], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i0, type: EuiMenuItemComponent, decorators: [{
@@ -322,187 +408,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
     {
       directive: BaseStatesDirective
     }
-  ], encapsulation: ViewEncapsulation.None, template: `<li
-    *ngIf="isLabelItem && item.visible && item.filtered"
-    role="none"
-    id="{{item.id}}"
-    class="eui-menu-item eui-menu-item__category"
-    [attr.data-e2e]="item.e2eAttr"
-    [class.eui-menu-item--disabled]="item.disabled"
-    [attr.aria-disabled]="item.disabled"
-    [euiTooltip]="menuItemTooltip"
-    tabindex="-1"
-    position="after">
-    <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-    <span class="eui-menu-item__category-label">
-        <span class="eui-menu-item__label">{{ item.label }}</span>
-    </span>
-</li>
+  ], encapsulation: ViewEncapsulation.None, template: `@if (item.visible && item.filtered) {
+    @if (isLabelItem) {
+        <li
+            role="none"
+            id="{{item.id}}"
+            class="eui-menu-item__content"
+            [attr.data-e2e]="item.e2eAttr"
+            [class.eui-menu-item--disabled]="item.disabled"
+            [attr.aria-disabled]="item.disabled"
+            [euiTooltip]="menuItemTooltip"
+            tabindex="-1"
+            position="after">
-<li
-    *ngIf="isUrlItem && item.visible && item.filtered"
-    role="none"
-    id="{{item.id}}"
-    [attr.data-e2e]="item.e2eAttr"
-    class="eui-menu-item"
-    [class.eui-menu-item--expanded]="item.expanded">
-    <a
-        (click)="onClick($event)"
-        tabindex="-1"
-        [routerLink]="item.url ? item.url : null"
-        class="eui-menu-item__link"
-        [class.eui-menu-item--disabled]="item.disabled"
-        [routerLinkActive]="item.url ? 'eui-menu-item__link--active' : ''"
-        [class.eui-menu-item__link--active]="item.active"
-        [euiTooltip]="menuItemTooltip"
-        position="after">
-        <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-    </a>
+            <a
+                (click)="onClick($event)"
+                tabindex="-1"
+                class="eui-menu-item__link eui-menu-item__link-category"
+                [class.eui-menu-item__link--disabled]="item.disabled"
+                [class.eui-menu-item__link--active]="item.active"
+                [class.eui-menu-item__link--has-sub]="item.children?.length > 0"
+                href="javascript:void(0)"
+                [euiTooltip]="menuItemTooltip"
+                position="after">
-    <ng-template *ngTemplateOutlet="content"></ng-template>
-</li>
+                <div class="eui-menu-item__link-start-block">
+                    <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                </div>
-<li
-    *ngIf="isLinkItem && item.visible && item.filtered"
-    role="none"
-    id="{{item.id}}"
-    [attr.data-e2e]="item.e2eAttr"
-    class="eui-menu-item"
-    [class.eui-menu-item--expanded]="item.expanded">
-    <a
-        (click)="onClick($event)"
-        tabindex="-1"
-        class="eui-menu-item__link"
-        [class.eui-menu-item--disabled]="item.disabled"
-        [class.eui-menu-item__link--active]="item.active"
-        href="javascript:void(0)"
-        [euiTooltip]="menuItemTooltip"
-        position="after">
-        <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-    </a>
+                <div class="eui-menu-item__link-content-block">
+                    <div class="eui-menu-item__link-label-container">
+                        <span class="eui-menu-item__link-label-category" [class.eui-menu-item__link-label--lowercase]="isLabelLowercase">{{ item.label }}</span>
+                    </div>
+                </div>
-    <ng-template *ngTemplateOutlet="content"></ng-template>
-</li>
+                <div class="eui-menu-item__link-end-block">
+                    <ng-template *ngTemplateOutlet="itemEndContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+                </div>
+            </a>
+        </li>
+    }
-<ng-template #linkContent>
-    <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+    @if (isUrlItem) {
+        <li
+            role="none"
+            id="{{item.id}}"
+            [attr.data-e2e]="item.e2eAttr"
+            class="eui-menu-item__content"
+            [class.eui-menu-item--disabled]="item.disabled"
+            [class.eui-menu-item--expanded]="item.expanded"
+            [attr.aria-disabled]="item.disabled">
+            <a
+                (click)="onClick($event)"
+                class="eui-menu-item__link"
+                [class.eui-menu-item__link--disabled]="item.disabled"
+                [class.eui-menu-item__link--active]="item.active"
+                [class.eui-menu-item__link--has-sub]="item.children?.length > 0"
+                [routerLink]="item.url ? item.url : null"
+                [routerLinkActive]="item.url ? 'eui-menu-item__link--active' : ''"
+                [euiTooltip]="menuItemTooltip"
+                position="after"
+                tabindex="-1">
+                <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+            </a>
-    <eui-icon-svg
-        *ngIf="item.hasMarker && !hasCollapsedInitials"
-        class="eui-menu-item__link-marker eui-menu-item__link-marker--default"
-        fillColor="{{ item?.markerTypeClass }}"
-        icon="eui-ellipse"
-        size="xs"
-        [aria-label]="item.markerTypeClass + ' ' + 'marker'">
-    </eui-icon-svg>
+            <ng-template *ngTemplateOutlet="content"></ng-template>
+        </li>
+    }
-    <span class="eui-menu-item__link-label" [class.eui-menu-item--disabled]="item.disabled" [attr.aria-disabled]="item.disabled">
-        <span class="eui-menu-item__label">{{ item.label }}</span>
+    @if (isLinkItem) {
+        <li
+            role="none"
+            id="{{item.id}}"
+            [attr.data-e2e]="item.e2eAttr"
+            class="eui-menu-item__content"
+            [class.eui-menu-item--disabled]="item.disabled"
+            [class.eui-menu-item--expanded]="item.expanded"
+            [attr.aria-disabled]="item.disabled">
+            <a
+                (click)="onClick($event)"
+                tabindex="-1"
+                class="eui-menu-item__link"
+                [class.eui-menu-item__link--disabled]="item.disabled"
+                [class.eui-menu-item__link--active]="item.active"
+                [class.eui-menu-item__link--has-sub]="item.children?.length > 0"
+                href="javascript:void(0)"
+                [euiTooltip]="menuItemTooltip"
+                position="after">
+                <ng-template *ngTemplateOutlet="linkContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+            </a>
-        <eui-icon-svg
-            *ngIf="item.urlExternal && item.urlExternalTarget === '_blank'"
-            class="eui-menu-item__label-external"
-            icon="eui-ecl-external"
-            size="2xs"
-            aria-label="external link icon">
-        </eui-icon-svg>
-    </span>
+            <ng-template *ngTemplateOutlet="content"></ng-template>
+        </li>
+    }
+}
-    <div class="eui-menu-item__link-right-content">
-        <eui-chip *ngIf="item.tagLabel" euiSizeXS euiOutline class="eui-menu-item__link-tag-label eui-chip--{{ item.tagTypeClass }}" [ariaLabel]="item.tagLabel">
-            <span euiLabel class="eui-label">{{ item.tagLabel }}</span>
-        </eui-chip>
+<ng-template #linkContent>
+    <div class="eui-menu-item__link-start-block">
+        <ng-template *ngTemplateOutlet="itemIconContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+    </div>
-        <button
-            *ngIf="item.actionIcon"
-            euiButton
-            euiRounded
-            euiIconButton
-            euiSizeS
-            euiBasicButton
-            type="button"
-            tabindex="-1"
-            (keydown)="onActionIconKeyDown($event)"
-            (focusout)="onActionIconFocusOut()"
-            (focus)="focusActionIcon()"
-            class="eui-menu-item__link-action-icon"
-            [euiDisabled]="item.disabled"
-            [attr.aria-label]="item.actionIcon?.label"
-            (click)="onActionIconClick($event)">
-            <eui-icon-svg [icon]="item.actionIcon?.icon" [fillColor]="item.actionIcon?.color"></eui-icon-svg>
-        </button>
+    <div class="eui-menu-item__link-content-block">
+        <div class="eui-menu-item__link-label-container">
+            <span class="eui-menu-item__link-label" [class.eui-menu-item__link-label--lowercase]="isLabelLowercase">{{ item.label }}</span>
+            <eui-icon-svg
+                *ngIf="item.urlExternal && item.urlExternalTarget === '_blank'"
+                class="eui-menu-item__label-external"
+                icon="eui-ecl-external"
+                size="2xs"
+                aria-label="external link icon"
+                euiEnd>
+            </eui-icon-svg>
+        </div>
+    </div>
-        <button
-            *ngIf="item.children?.length > 0"
-            euiButton
-            euiRounded
-            euiIconButton
-            euiSizeS
-            euiBasicButton
-            euiSecondary
-            type="button"
-            [euiDisabled]="item.disabled"
-            class="eui-menu-item__link-toggle"
-            tabindex="-1"
-            [attr.aria-label]="item.expanded ? collapseMenuLabel : expandMenuLabel"
-            (click)="onExpandToggle($event)">
-            <eui-icon-svg *ngIf="item.expanded" icon="eui-chevron-up"></eui-icon-svg>
-            <eui-icon-svg *ngIf="!item.expanded" icon="eui-chevron-down"></eui-icon-svg>
-        </button>
+    <div class="eui-menu-item__link-end-block">
+        <ng-template *ngTemplateOutlet="itemEndContent" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
     </div>
 </ng-template>
+<!-- PROJECTED CONTENT BLOCK -->
 <ng-template #content>
     <ng-content></ng-content>
 </ng-template>
+<!-- PROJECTED START BLOCK -->
 <ng-template #itemIconContent>
     @if (!isCollapsed) {
-        <eui-icon-svg
-            *ngIf="hasIcon && item.iconSvgName && !item.iconClass"
-            class="eui-menu-item__link-icon"
-            icon="{{ item.iconSvgName }}"
-            fillColor="{{ item.iconTypeClass }}"
-            size="s">
-        </eui-icon-svg>
-        <span *ngIf="hasIcon && item.iconClass && !item.iconSvgName" [attr.aria-label]="item.iconLabel"
-            class="eui-menu-item__link-icon eui-icon {{item.iconClass}}">
-        </span>
-    } @else {
-        @if (hasCollapsedInitials) {
-            <span class="eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}">
-                {{ item.initials }}
-            </span>
-        } @else {
-            @if (hasIcon) {
+        @if (hasIcon) {
+            @if (item.iconSvgName && !item.iconClass) {
+                <!-- SVG -->
                 <eui-icon-svg
-                    *ngIf="item.iconSvgName"
+                    class="eui-menu-item__link-icon"
                     icon="{{ item.iconSvgName }}"
                     fillColor="{{ item.iconTypeClass }}"
                     size="s">
                 </eui-icon-svg>
+            } @else if (item.iconClass && !item.iconSvgName) {
+                <!-- WEBFONT -->
+                <span class="eui-menu-item__link-icon eui-icon {{item.iconClass}}" [attr.aria-label]="item.iconLabel"></span>
+            } @else if (item.hasMarker) {
+                <!-- MARKER -->
                 <eui-icon-svg
-                    *ngIf="!item.iconSvgName && !item.hasMarker"
-                    class="eui-menu-item__category-icon--default"
+                    class="eui-menu-item__link-marker"
+                    fillColor="{{ item?.markerTypeClass }}"
+                    icon="eui-ellipse"
+                    size="xs"
+                    [aria-label]="item.markerTypeClass + ' ' + 'marker'">
+                </eui-icon-svg>
+            }
+            @else {
+                <!-- DEFAULT -->
+                <eui-icon-svg
+                    class="eui-menu-item__link-icon"
                     icon="eui-ellipse"
                     fillColor="neutral-light"
                     size="xs">
                 </eui-icon-svg>
+            }
+        } @else if (item.hasMarker) {
+            <eui-icon-svg
+                class="eui-menu-item__link-marker"
+                fillColor="{{ item?.markerTypeClass }}"
+                icon="eui-ellipse"
+                size="xs"
+                [aria-label]="item.markerTypeClass + ' ' + 'marker'">
+            </eui-icon-svg>
+        }
+    } @else {
+        @if (hasCollapsedInitials) {
+            <span class="eui-menu-item__link-initials eui-u-c-bg-{{item.iconTypeClass}}">
+                {{ item.initials }}
+            </span>
+        } @else {
+            @if (hasIcon) {
+                @if (item.iconSvgName && !item.iconClass) {
+                    <!-- SVG -->
+                    <eui-icon-svg
+                        class="eui-menu-item__link-icon"
+                        icon="{{ item.iconSvgName }}"
+                        fillColor="{{ item.iconTypeClass }}"
+                        size="s">
+                    </eui-icon-svg>
+                } @else if (item.iconClass && !item.iconSvgName) {
+                    <!-- WEBFONT -->
+                    <span class="eui-menu-item__link-icon eui-icon {{item.iconClass}}" [attr.aria-label]="item.iconLabel"></span>
+                } @else if (item.hasMarker) {
+                    <!-- MARKER -->
+                    <eui-icon-svg
+                        class="eui-menu-item__link-marker"
+                        fillColor="{{ item?.markerTypeClass }}"
+                        icon="eui-ellipse"
+                        size="s"
+                        [aria-label]="item.markerTypeClass + ' ' + 'marker'">
+                    </eui-icon-svg>
+                } @else {
+                    <!-- DEFAULT -->
+                    <eui-icon-svg
+                        class="eui-menu-item__link-icon"
+                        icon="eui-ellipse"
+                        fillColor="neutral-light"
+                        size="s"
+                        [aria-label]="item.iconLabel">
+                    </eui-icon-svg>
+                }
             } @else {
                 <eui-icon-svg
-                    *ngIf="!item.hasMarker"
-                    class="eui-menu-item__link-icon--default"
+                    class="eui-menu-item__link-icon"
                     icon="eui-ellipse"
-                    size="xs"
-                    [aria-label]="item.iconLabel">
+                    fillColor="neutral-light"
+                    size="s">
                 </eui-icon-svg>
             }
         }
     }
 </ng-template>
-`, styles: ['.eui-menu,.eui-menu-wrapper{display:flex;flex-direction:column;flex-shrink:0;width:100%;list-style:none;margin-bottom:0;margin-top:0;padding:0}.eui-menu--no-items,.eui-menu-wrapper--no-items{color:var(--eui-c-neutral-lightest);display:block;text-align:center}.eui-menu:focus:not([readonly]),.eui-menu-wrapper:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]),.eui-menu-wrapper:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]),.eui-menu-wrapper [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content{margin:0;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-toggle{display:inherit;position:absolute;right:0;transform:scale(.65);visibility:visible}.eui-menu-filter{margin:var(--eui-s-m) 0;padding:0 var(--eui-s-m);position:relative}.eui-menu-item{display:flex;flex-direction:column;position:relative;width:100%;border:1px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-item{align-items:center;display:flex;flex-direction:column}.eui-menu-item__category{align-items:center;color:var(--eui-c-neutral-light);display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) var(--eui-s-m);text-decoration:none;text-transform:uppercase;font:var(--eui-f-s-bold)}.eui-page-column__body .eui-menu-item__category{text-transform:inherit}.eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--none)+.eui-menu-item__category-label,.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--default)+.eui-menu-item__category-label{padding-left:var(--eui-s-xs)}.eui-menu-item__category-icon--none{padding:0}.eui-menu-item__category-icon--default{align-items:center;display:flex;justify-content:center;width:100%}.ff.eui-menu--collapsed .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__category-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__category-label{display:none}.eui-menu-item__category .eui-menu-item__link-icon{margin-right:var(--eui-s-xs)}.eui-menu-item a.eui-menu-item__link{border-bottom:none}.eui-menu-item__link{align-items:center;border-top:1px solid var(--eui-c-neutral-bg);color:var(--eui-c-text)!important;cursor:pointer;display:flex;justify-content:center;padding:calc(.5 * var(--eui-s-xs)) var(--eui-s-s);text-decoration:none;text-transform:uppercase;white-space:nowrap;width:100%}.eui-page-column__body .eui-menu-item__link{text-transform:inherit}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none!important}.eui-menu-item__link:hover:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none;font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-item__link-icon--with-badge .eui-chip{display:flex;height:var(--eui-s-m);left:-12px;position:absolute;top:-4px}.eui-menu-item__link-icon--none{padding:0}.eui-menu-item__link-icon--none+.eui-menu-item__category-label{margin-left:calc(-1 * var(--eui-s-s))}.eui-menu-item__link-icon--default{align-items:center;display:flex;flex-direction:column;font-size:var(--eui-f-size-xs);justify-content:inherit;width:100%}.ff.eui-menu--collapsed .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__link-label{display:none}.eui-page-column__body .eui-menu-item__link-label{font:var(--eui-f-m)}.eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-tag-label{display:flex;margin-left:var(--eui-s-xs);transform:scale(1)}.eui-menu--collapsed .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875)}.eui-menu-item__link-toggle{margin-left:var(--eui-s-2xs);margin-right:calc(-1 * var(--eui-s-xs));transition:all .3s linear}.eui-menu--collapsed .eui-menu-item__link-toggle{display:none;transition:none}.eui-menu-item__link-action-icon{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border-radius:var(--eui-s-xs);min-width:var(--eui-s-2xl);text-align:center;justify-content:center;border:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-s-bold)}.eui-menu-item__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__label-external{color:var(--eui-c-neutral-lighter);margin-left:var(--eui-s-xs);font:var(--eui-f-s)}.eui-menu-item__label-external .eui-icon-svg{fill:var(--eui-c-neutral-light);height:var(--eui-s-s);width:var(--eui-s-s)}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-app.ff.sidebar--close .eui-menu-item__link-tag-label{right:0}.eui-menu-item--expanded .eui-menu-item__category{display:flex}.eui-menu-item--disabled{background-image:none;box-shadow:none;cursor:default;opacity:.65;pointer-events:none}.eui-menu-item--lowercase .eui-menu-item__link,.eui-menu-item--lowercase .eui-menu-item__label,.eui-menu-item--lowercase .eui-menu-item__category,.eui-menu-item--lowercase .eui-menu-item__category-label{text-transform:initial!important}.eui-menu-item--lowercase .eui-menu-item__link-label{font-size:var(--eui-f-size)}.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon--default,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon--default{display:none}.eui-menu-sub{text-decoration:none}.eui-menu-sub .eui-menu-item__category{align-items:center;display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xl);text-decoration:none;text-transform:uppercase}.eui-page-column__body .eui-menu-sub .eui-menu-item__category{text-transform:inherit}.eui-menu-sub .eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-sub .eui-menu-item__category-icon--default{color:var(--eui-c-info)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__category-label .eui-menu-item__label{display:block;border-bottom:1px solid var(--eui-c-neutral-lightest);padding-bottom:var(--eui-s-2xs);font:var(--eui-f-s-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category{padding-left:0}.eui-menu-sub .eui-menu-item__link{border:none;height:calc(2.25 * var(--eui-s-m));padding-left:var(--eui-s-xl);text-transform:initial}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xs);padding-right:0}.eui-menu-sub .eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-sub .eui-menu-item__link-icon--default{font-size:var(--eui-f-size-xs);margin:0}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__link-icon--none{display:none}.eui-menu-sub .eui-menu-item__link-marker{display:flex;justify-content:center;position:relative}.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--none+.eui-menu-item__link-label,.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--default+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-marker{margin-left:calc(-1 * var(--eui-s-2xs))}.eui-menu-sub .eui-menu-item__link-label{height:auto;padding-top:var(--eui-s-3xs);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content{margin-left:var(--eui-s-2xs)}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-sub .eui-menu-item{padding-left:calc(1 * var(--eui-s-m))}.eui-menu--collapsed .eui-menu--no-icons .eui-menu-sub .eui-menu-item__link{margin-left:calc(-1 * var(--eui-s-m))}\n'] }]
+<!-- PROJECTED END BLOCK -->
+<ng-template #itemEndContent>
+    <eui-chip *ngIf="item.tagLabel" euiSizeXS euiOutline class="eui-menu-item__link-tag-label eui-chip--{{ item.tagTypeClass }}" [ariaLabel]="item.tagLabel">
+        <span euiLabel class="eui-label">{{ item.tagLabel }}</span>
+    </eui-chip>
+    <button
+        *ngIf="item.actionIcon"
+        euiButton
+        euiRounded
+        euiIconButton
+        euiSizeS
+        euiBasicButton
+        type="button"
+        tabindex="-1"
+        (keydown)="onActionIconKeyDown($event)"
+        (focusout)="onActionIconFocusOut()"
+        (focus)="focusActionIcon()"
+        class="eui-menu-item__link-action-icon"
+        [euiDisabled]="item.disabled"
+        [attr.aria-label]="item.actionIcon?.label"
+        (click)="onActionIconClick($event)">
+        <eui-icon-svg [icon]="item.actionIcon?.icon" [fillColor]="item.actionIcon?.color"></eui-icon-svg>
+    </button>
+    <button
+        *ngIf="item.children?.length > 0"
+        euiButton
+        euiRounded
+        euiIconButton
+        euiSizeS
+        euiBasicButton
+        euiSecondary
+        type="button"
+        [euiDisabled]="item.disabled"
+        class="eui-menu-item__link-toggle"
+        tabindex="-1"
+        [attr.aria-label]="item.expanded ? collapseMenuLabel : expandMenuLabel"
+        (click)="onExpandToggle($event)">
+        <eui-icon-svg *ngIf="item.expanded" icon="eui-chevron-up"></eui-icon-svg>
+        <eui-icon-svg *ngIf="!item.expanded" icon="eui-chevron-down"></eui-icon-svg>
+    </button>
+</ng-template>
+`, styles: ['.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-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-menu--collapsed .eui-menu-item__link-content-block,.eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-s));transform:scale(.75);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:1px solid var(--eui-c-neutral-lightest);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-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link,.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-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-menu-item{display:flex;position:relative;width:100%;border:2px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%}.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);padding:var(--eui-s-xs) var(--eui-s-2xs) calc(var(--eui-s-xs) - 2px) var(--eui-s-s);text-decoration:none;width:100%}.eui-menu-item__link.eui-menu-item__link-category{cursor:default}.eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.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-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{font:var(--eui-f-m-bold);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none}.eui-menu-item__link--disabled{opacity:var(--eui-base-disabled-opacity);pointer-events:none}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--has-sub{border-top:1px solid var(--eui-c-neutral-bg)}.eui-menu-item__link-label--lowercase{text-transform:initial}.eui-menu-item--expanded{display:flex;flex-direction:column}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xl)}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link--has-sub{font-weight:initial;text-transform:initial}.eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-5xl)}.eui-menu-item--expanded .eui-menu-item__link--has-sub:not(:first-child){border-bottom:1px solid var(--eui-c-neutral-bg)}\n'] }]
 }], ctorParameters: () => [{ type: i1.BaseStatesDirective }, { type: i0.ElementRef }], propDecorators: { role: [{
   type: HostBinding,
   args: ["attr.role"]
@@ -569,7 +741,7 @@ import * as i52 from "@eui/components/eui-input-text";
 var EuiMenuComponent = class _EuiMenuComponent {
   get cssClasses() {
     return [
-      this.baseStatesDirective.getCssClasses("eui-menu-wrapper"),
+      this.baseStatesDirective.getCssClasses("eui-menu"),
       this.isCollapsed ? "eui-menu--collapsed" : "",
       !this.hasIcons ? "eui-menu--no-icons" : "",
       this.isFlat ? "eui-menu--flat" : ""
@@ -766,7 +938,9 @@ var EuiMenuComponent = class _EuiMenuComponent {
     this.focusKeyManager.updateActiveItem(focusedItem);
   }
   onExpandToggle(item) {
-    this.onExpandToggled(item, this.items);
+    if (item.children) {
+      this.onExpandToggled(item, this.items);
+    }
   }
   onMenuFilterClick(event) {
     consumeEvent2(event);
@@ -953,7 +1127,7 @@ var EuiMenuComponent = class _EuiMenuComponent {
     this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i02, type: _EuiMenuComponent, deps: [{ token: i12.Router }, { token: i12.ActivatedRoute }, { token: i22.BaseStatesDirective }, { token: i02.ChangeDetectorRef }], target: i02.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i02.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.6", type: _EuiMenuComponent, selector: "eui-menu", inputs: { items: "items", searchFilterLabel: "searchFilterLabel", externalLinkLabel: "externalLinkLabel", fragmentId: "fragmentId", filterValue: "filterValue", isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute2], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute2], hasFilter: ["hasFilter", "hasFilter", booleanAttribute2], hasIcons: ["hasIcons", "hasIcons", booleanAttribute2], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute2], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute2], isFlat: ["isFlat", "isFlat", booleanAttribute2], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute2], hasLowercaseItems: ["hasLowercaseItems", "hasLowercaseItems", booleanAttribute2] }, outputs: { isClick: "isClick", itemClick: "itemClick" }, host: { listeners: { "click": "stopPropagation($event)" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "focusableItems", predicate: EuiMenuItemComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i22.BaseStatesDirective }], ngImport: i02, template: '<div *ngIf="hasFilter && !isCollapsed" class="eui-menu-filter" (click)="onMenuFilterClick($event)">\n    <eui-icon-input>\n        <eui-icon-svg icon="eui-search" fillColor="neutral-lighter" aria-label="Search Icon"></eui-icon-svg>\n        <input\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<ul euiList class="eui-menu" role="menubar" aria-orientation="vertical" tabindex="0" (keydown)="onKeydown($event)">\n    <span *ngIf="!items" class="eui-menu--no-items">No menu items defined</span>\n    <ng-template ngFor let-item let-index [ngForOf]="items">\n        <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: item, index: index }"> </ng-template>\n    </ng-template>\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    <eui-menu-item\n        *ngIf="item.filtered"\n        [item]="item"\n        [parent]="parent"\n        [hasIcon]="hasIcons"\n        [hasTooltip]="hasTooltip"\n        [isCollapsed]="isCollapsed"\n        [hasCollapsedInitials]="hasCollapsedInitials"\n        [isLabelLowercase]="hasLowercaseItems"\n        (expandToggle)="onExpandToggle($event)"\n        (itemClick)="onClick($event)">\n        <!-- if the menu item has children, render the children -->\n        <ul euiList *ngIf="item.children && item.expanded" class="eui-menu eui-menu-sub" role="menu" [attr.aria-label]="item.label" tabindex="-1">\n            <ng-container *ngFor="let child of item.children; let childIndex = index">\n                <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: child, index: childIndex, parent: item }">\n                </ng-template>\n            </ng-container>\n        </ul>\n    </eui-menu-item>\n</ng-template>\n', styles: ['.eui-menu,.eui-menu-wrapper{display:flex;flex-direction:column;flex-shrink:0;width:100%;list-style:none;margin-bottom:0;margin-top:0;padding:0}.eui-menu--no-items,.eui-menu-wrapper--no-items{color:var(--eui-c-neutral-lightest);display:block;text-align:center}.eui-menu:focus:not([readonly]),.eui-menu-wrapper:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]),.eui-menu-wrapper:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]),.eui-menu-wrapper [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content{margin:0;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-toggle{display:inherit;position:absolute;right:0;transform:scale(.65);visibility:visible}.eui-menu-filter{margin:var(--eui-s-m) 0;padding:0 var(--eui-s-m);position:relative}.eui-menu-item{display:flex;flex-direction:column;position:relative;width:100%;border:1px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-item{align-items:center;display:flex;flex-direction:column}.eui-menu-item__category{align-items:center;color:var(--eui-c-neutral-light);display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) var(--eui-s-m);text-decoration:none;text-transform:uppercase;font:var(--eui-f-s-bold)}.eui-page-column__body .eui-menu-item__category{text-transform:inherit}.eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--none)+.eui-menu-item__category-label,.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--default)+.eui-menu-item__category-label{padding-left:var(--eui-s-xs)}.eui-menu-item__category-icon--none{padding:0}.eui-menu-item__category-icon--default{align-items:center;display:flex;justify-content:center;width:100%}.ff.eui-menu--collapsed .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__category-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__category-label{display:none}.eui-menu-item__category .eui-menu-item__link-icon{margin-right:var(--eui-s-xs)}.eui-menu-item a.eui-menu-item__link{border-bottom:none}.eui-menu-item__link{align-items:center;border-top:1px solid var(--eui-c-neutral-bg);color:var(--eui-c-text)!important;cursor:pointer;display:flex;justify-content:center;padding:calc(.5 * var(--eui-s-xs)) var(--eui-s-s);text-decoration:none;text-transform:uppercase;white-space:nowrap;width:100%}.eui-page-column__body .eui-menu-item__link{text-transform:inherit}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none!important}.eui-menu-item__link:hover:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none;font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-item__link-icon--with-badge .eui-chip{display:flex;height:var(--eui-s-m);left:-12px;position:absolute;top:-4px}.eui-menu-item__link-icon--none{padding:0}.eui-menu-item__link-icon--none+.eui-menu-item__category-label{margin-left:calc(-1 * var(--eui-s-s))}.eui-menu-item__link-icon--default{align-items:center;display:flex;flex-direction:column;font-size:var(--eui-f-size-xs);justify-content:inherit;width:100%}.ff.eui-menu--collapsed .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__link-label{display:none}.eui-page-column__body .eui-menu-item__link-label{font:var(--eui-f-m)}.eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-tag-label{display:flex;margin-left:var(--eui-s-xs);transform:scale(1)}.eui-menu--collapsed .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875)}.eui-menu-item__link-toggle{margin-left:var(--eui-s-2xs);margin-right:calc(-1 * var(--eui-s-xs));transition:all .3s linear}.eui-menu--collapsed .eui-menu-item__link-toggle{display:none;transition:none}.eui-menu-item__link-action-icon{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border-radius:var(--eui-s-xs);min-width:var(--eui-s-2xl);text-align:center;justify-content:center;border:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-s-bold)}.eui-menu-item__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__label-external{color:var(--eui-c-neutral-lighter);margin-left:var(--eui-s-xs);font:var(--eui-f-s)}.eui-menu-item__label-external .eui-icon-svg{fill:var(--eui-c-neutral-light);height:var(--eui-s-s);width:var(--eui-s-s)}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-app.ff.sidebar--close .eui-menu-item__link-tag-label{right:0}.eui-menu-item--expanded .eui-menu-item__category{display:flex}.eui-menu-item--disabled{background-image:none;box-shadow:none;cursor:default;opacity:.65;pointer-events:none}.eui-menu-item--lowercase .eui-menu-item__link,.eui-menu-item--lowercase .eui-menu-item__label,.eui-menu-item--lowercase .eui-menu-item__category,.eui-menu-item--lowercase .eui-menu-item__category-label{text-transform:initial!important}.eui-menu-item--lowercase .eui-menu-item__link-label{font-size:var(--eui-f-size)}.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon--default,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon--default{display:none}.eui-menu-sub{text-decoration:none}.eui-menu-sub .eui-menu-item__category{align-items:center;display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xl);text-decoration:none;text-transform:uppercase}.eui-page-column__body .eui-menu-sub .eui-menu-item__category{text-transform:inherit}.eui-menu-sub .eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-sub .eui-menu-item__category-icon--default{color:var(--eui-c-info)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__category-label .eui-menu-item__label{display:block;border-bottom:1px solid var(--eui-c-neutral-lightest);padding-bottom:var(--eui-s-2xs);font:var(--eui-f-s-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category{padding-left:0}.eui-menu-sub .eui-menu-item__link{border:none;height:calc(2.25 * var(--eui-s-m));padding-left:var(--eui-s-xl);text-transform:initial}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xs);padding-right:0}.eui-menu-sub .eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-sub .eui-menu-item__link-icon--default{font-size:var(--eui-f-size-xs);margin:0}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__link-icon--none{display:none}.eui-menu-sub .eui-menu-item__link-marker{display:flex;justify-content:center;position:relative}.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--none+.eui-menu-item__link-label,.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--default+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-marker{margin-left:calc(-1 * var(--eui-s-2xs))}.eui-menu-sub .eui-menu-item__link-label{height:auto;padding-top:var(--eui-s-3xs);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content{margin-left:var(--eui-s-2xs)}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-sub .eui-menu-item{padding-left:calc(1 * var(--eui-s-m))}.eui-menu--collapsed .eui-menu--no-icons .eui-menu-sub .eui-menu-item__link{margin-left:calc(-1 * var(--eui-s-m))}\n'], dependencies: [{ kind: "directive", type: i32.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i32.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i42.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i42.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i52.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: EuiMenuItemComponent, selector: "eui-menu-item", inputs: ["item", "parent", "hasIcon", "hasTooltip", "isCollapsed", "hasCollapsedInitials", "isLabelLowercase"], outputs: ["expandToggle", "itemClick"] }], encapsulation: i02.ViewEncapsulation.None });
+    this.ɵcmp = i02.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.6", type: _EuiMenuComponent, selector: "eui-menu", inputs: { items: "items", searchFilterLabel: "searchFilterLabel", externalLinkLabel: "externalLinkLabel", fragmentId: "fragmentId", filterValue: "filterValue", isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute2], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute2], hasFilter: ["hasFilter", "hasFilter", booleanAttribute2], hasIcons: ["hasIcons", "hasIcons", booleanAttribute2], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute2], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute2], isFlat: ["isFlat", "isFlat", booleanAttribute2], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute2], hasLowercaseItems: ["hasLowercaseItems", "hasLowercaseItems", booleanAttribute2] }, outputs: { isClick: "isClick", itemClick: "itemClick" }, host: { listeners: { "click": "stopPropagation($event)" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "focusableItems", predicate: EuiMenuItemComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i22.BaseStatesDirective }], ngImport: i02, template: '@if (hasFilter && !isCollapsed) {\n    <div class="eui-menu-filter" (click)="onMenuFilterClick($event)">\n        <eui-icon-input>\n            <eui-icon-svg icon="eui-search" fillColor="neutral-lighter" aria-label="Search Icon"></eui-icon-svg>\n            <input\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        <ng-template ngFor let-item let-index [ngForOf]="items">\n            <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: item, index: index }"> </ng-template>\n        </ng-template>\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    <eui-menu-item\n        *ngIf="item.filtered"\n        [item]="item"\n        [parent]="parent"\n        [hasIcon]="hasIcons"\n        [hasTooltip]="hasTooltip"\n        [isCollapsed]="isCollapsed"\n        [hasCollapsedInitials]="hasCollapsedInitials"\n        [isLabelLowercase]="hasLowercaseItems"\n        (expandToggle)="onExpandToggle($event)"\n        (itemClick)="onClick($event)">\n        <!-- if the menu item has children, render the children -->\n        <ul euiList *ngIf="item.children && item.expanded" class="eui-menu eui-menu-sub" role="menu" [attr.aria-label]="item.label" tabindex="-1">\n            <ng-container *ngFor="let child of item.children; let childIndex = index">\n                <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: child, index: childIndex, parent: item }">\n                </ng-template>\n            </ng-container>\n        </ul>\n    </eui-menu-item>\n</ng-template>\n', styles: ['.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-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-menu--collapsed .eui-menu-item__link-content-block,.eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-s));transform:scale(.75);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:1px solid var(--eui-c-neutral-lightest);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-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link,.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-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-menu-item{display:flex;position:relative;width:100%;border:2px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%}.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);padding:var(--eui-s-xs) var(--eui-s-2xs) calc(var(--eui-s-xs) - 2px) var(--eui-s-s);text-decoration:none;width:100%}.eui-menu-item__link.eui-menu-item__link-category{cursor:default}.eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.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-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{font:var(--eui-f-m-bold);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none}.eui-menu-item__link--disabled{opacity:var(--eui-base-disabled-opacity);pointer-events:none}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--has-sub{border-top:1px solid var(--eui-c-neutral-bg)}.eui-menu-item__link-label--lowercase{text-transform:initial}.eui-menu-item--expanded{display:flex;flex-direction:column}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xl)}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link--has-sub{font-weight:initial;text-transform:initial}.eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-5xl)}.eui-menu-item--expanded .eui-menu-item__link--has-sub:not(:first-child){border-bottom:1px solid var(--eui-c-neutral-bg)}\n'], dependencies: [{ kind: "directive", type: i32.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i32.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i32.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i42.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i42.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i52.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: EuiMenuItemComponent, selector: "eui-menu-item", inputs: ["item", "parent", "hasIcon", "hasTooltip", "isCollapsed", "hasCollapsedInitials", "isLabelLowercase"], outputs: ["expandToggle", "itemClick"] }], encapsulation: i02.ViewEncapsulation.None });
   }
 };
 i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6", ngImport: i02, type: EuiMenuComponent, decorators: [{
@@ -962,7 +1136,7 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.6",
     {
       directive: BaseStatesDirective3
     }
-  ], encapsulation: ViewEncapsulation3.None, template: '<div *ngIf="hasFilter && !isCollapsed" class="eui-menu-filter" (click)="onMenuFilterClick($event)">\n    <eui-icon-input>\n        <eui-icon-svg icon="eui-search" fillColor="neutral-lighter" aria-label="Search Icon"></eui-icon-svg>\n        <input\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<ul euiList class="eui-menu" role="menubar" aria-orientation="vertical" tabindex="0" (keydown)="onKeydown($event)">\n    <span *ngIf="!items" class="eui-menu--no-items">No menu items defined</span>\n    <ng-template ngFor let-item let-index [ngForOf]="items">\n        <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: item, index: index }"> </ng-template>\n    </ng-template>\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    <eui-menu-item\n        *ngIf="item.filtered"\n        [item]="item"\n        [parent]="parent"\n        [hasIcon]="hasIcons"\n        [hasTooltip]="hasTooltip"\n        [isCollapsed]="isCollapsed"\n        [hasCollapsedInitials]="hasCollapsedInitials"\n        [isLabelLowercase]="hasLowercaseItems"\n        (expandToggle)="onExpandToggle($event)"\n        (itemClick)="onClick($event)">\n        <!-- if the menu item has children, render the children -->\n        <ul euiList *ngIf="item.children && item.expanded" class="eui-menu eui-menu-sub" role="menu" [attr.aria-label]="item.label" tabindex="-1">\n            <ng-container *ngFor="let child of item.children; let childIndex = index">\n                <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: child, index: childIndex, parent: item }">\n                </ng-template>\n            </ng-container>\n        </ul>\n    </eui-menu-item>\n</ng-template>\n', styles: ['.eui-menu,.eui-menu-wrapper{display:flex;flex-direction:column;flex-shrink:0;width:100%;list-style:none;margin-bottom:0;margin-top:0;padding:0}.eui-menu--no-items,.eui-menu-wrapper--no-items{color:var(--eui-c-neutral-lightest);display:block;text-align:center}.eui-menu:focus:not([readonly]),.eui-menu-wrapper:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]),.eui-menu-wrapper:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]),.eui-menu-wrapper [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content{margin:0;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-menu-item__link-toggle{display:inherit;position:absolute;right:0;transform:scale(.65);visibility:visible}.eui-menu-filter{margin:var(--eui-s-m) 0;padding:0 var(--eui-s-m);position:relative}.eui-menu-item{display:flex;flex-direction:column;position:relative;width:100%;border:1px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-item{align-items:center;display:flex;flex-direction:column}.eui-menu-item__category{align-items:center;color:var(--eui-c-neutral-light);display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) var(--eui-s-m);text-decoration:none;text-transform:uppercase;font:var(--eui-f-s-bold)}.eui-page-column__body .eui-menu-item__category{text-transform:inherit}.eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--none)+.eui-menu-item__category-label,.eui-menu-item__category-icon:not(.eui-menu-item__category-icon--default)+.eui-menu-item__category-label{padding-left:var(--eui-s-xs)}.eui-menu-item__category-icon--none{padding:0}.eui-menu-item__category-icon--default{align-items:center;display:flex;justify-content:center;width:100%}.ff.eui-menu--collapsed .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__category-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__category-label{display:none}.eui-menu-item__category .eui-menu-item__link-icon{margin-right:var(--eui-s-xs)}.eui-menu-item a.eui-menu-item__link{border-bottom:none}.eui-menu-item__link{align-items:center;border-top:1px solid var(--eui-c-neutral-bg);color:var(--eui-c-text)!important;cursor:pointer;display:flex;justify-content:center;padding:calc(.5 * var(--eui-s-xs)) var(--eui-s-s);text-decoration:none;text-transform:uppercase;white-space:nowrap;width:100%}.eui-page-column__body .eui-menu-item__link{text-transform:inherit}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none!important}.eui-menu-item__link:hover:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none;font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-item__link-icon--with-badge .eui-chip{display:flex;height:var(--eui-s-m);left:-12px;position:absolute;top:-4px}.eui-menu-item__link-icon--none{padding:0}.eui-menu-item__link-icon--none+.eui-menu-item__category-label{margin-left:calc(-1 * var(--eui-s-s))}.eui-menu-item__link-icon--default{align-items:center;display:flex;flex-direction:column;font-size:var(--eui-f-size-xs);justify-content:inherit;width:100%}.ff.eui-menu--collapsed .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-label{position:relative;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-item__link-label{display:none}.eui-page-column__body .eui-menu-item__link-label{font:var(--eui-f-m)}.eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-tag-label{display:flex;margin-left:var(--eui-s-xs);transform:scale(1)}.eui-menu--collapsed .eui-menu-item__link-tag-label{position:absolute;right:1px;top:0;transform:scale(.875)}.eui-menu-item__link-toggle{margin-left:var(--eui-s-2xs);margin-right:calc(-1 * var(--eui-s-xs));transition:all .3s linear}.eui-menu--collapsed .eui-menu-item__link-toggle{display:none;transition:none}.eui-menu-item__link-action-icon{margin-left:var(--eui-s-2xs)}.eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border-radius:var(--eui-s-xs);min-width:var(--eui-s-2xl);text-align:center;justify-content:center;border:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-s-bold)}.eui-menu-item__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__label-external{color:var(--eui-c-neutral-lighter);margin-left:var(--eui-s-xs);font:var(--eui-f-s)}.eui-menu-item__label-external .eui-icon-svg{fill:var(--eui-c-neutral-light);height:var(--eui-s-s);width:var(--eui-s-s)}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-button.eui-menu-item__link-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-app.ff.sidebar--close .eui-menu-item__link-tag-label{right:0}.eui-menu-item--expanded .eui-menu-item__category{display:flex}.eui-menu-item--disabled{background-image:none;box-shadow:none;cursor:default;opacity:.65;pointer-events:none}.eui-menu-item--lowercase .eui-menu-item__link,.eui-menu-item--lowercase .eui-menu-item__label,.eui-menu-item--lowercase .eui-menu-item__category,.eui-menu-item--lowercase .eui-menu-item__category-label{text-transform:initial!important}.eui-menu-item--lowercase .eui-menu-item__link-label{font-size:var(--eui-f-size)}.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__category-icon--default,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon,.eui-menu--no-icons:not(.eui-menu--collapsed) .eui-menu-item__link-icon--default{display:none}.eui-menu-sub{text-decoration:none}.eui-menu-sub .eui-menu-item__category{align-items:center;display:flex;flex-direction:row;justify-content:center;padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xl);text-decoration:none;text-transform:uppercase}.eui-page-column__body .eui-menu-sub .eui-menu-item__category{text-transform:inherit}.eui-menu-sub .eui-menu-item__category:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-neutral-bg-light);cursor:default;text-decoration:none}.eui-menu-sub .eui-menu-item__category-icon--default{color:var(--eui-c-info)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__category-label .eui-menu-item__label{display:block;border-bottom:1px solid var(--eui-c-neutral-lightest);padding-bottom:var(--eui-s-2xs);font:var(--eui-f-s-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__category{padding-left:0}.eui-menu-sub .eui-menu-item__link{border:none;height:calc(2.25 * var(--eui-s-m));padding-left:var(--eui-s-xl);text-transform:initial}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xs);padding-right:0}.eui-menu-sub .eui-menu-item__link-icon+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.eui-menu-sub .eui-menu-item__link-icon--default{font-size:var(--eui-f-size-xs);margin:0}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-icon--default{margin-left:var(--eui-s-2xs)}.eui-menu-sub .eui-menu-item__link-icon--none{display:none}.eui-menu-sub .eui-menu-item__link-marker{display:flex;justify-content:center;position:relative}.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--none+.eui-menu-item__link-label,.eui-menu-sub .eui-menu-item__link-marker.eui-menu-item__link-marker--default+.eui-menu-item__link-label{padding-left:var(--eui-s-xs)}.ff.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-marker{margin-left:calc(-1 * var(--eui-s-2xs))}.eui-menu-sub .eui-menu-item__link-label{height:auto;padding-top:var(--eui-s-3xs);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-item__link-right-content{align-items:center;display:flex;height:calc(2.5 * var(--eui-s-m));margin-left:auto}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content{margin-left:var(--eui-s-2xs)}.eui-menu--collapsed .eui-menu-sub .eui-menu-item__link-right-content .eui-chip .eui-chip__content-container>span{display:inline-block;max-width:var(--eui-s-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-sub .eui-menu-sub .eui-menu-item{padding-left:calc(1 * var(--eui-s-m))}.eui-menu--collapsed .eui-menu--no-icons .eui-menu-sub .eui-menu-item__link{margin-left:calc(-1 * var(--eui-s-m))}\n'] }]
+  ], encapsulation: ViewEncapsulation3.None, template: '@if (hasFilter && !isCollapsed) {\n    <div class="eui-menu-filter" (click)="onMenuFilterClick($event)">\n        <eui-icon-input>\n            <eui-icon-svg icon="eui-search" fillColor="neutral-lighter" aria-label="Search Icon"></eui-icon-svg>\n            <input\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        <ng-template ngFor let-item let-index [ngForOf]="items">\n            <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: item, index: index }"> </ng-template>\n        </ng-template>\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    <eui-menu-item\n        *ngIf="item.filtered"\n        [item]="item"\n        [parent]="parent"\n        [hasIcon]="hasIcons"\n        [hasTooltip]="hasTooltip"\n        [isCollapsed]="isCollapsed"\n        [hasCollapsedInitials]="hasCollapsedInitials"\n        [isLabelLowercase]="hasLowercaseItems"\n        (expandToggle)="onExpandToggle($event)"\n        (itemClick)="onClick($event)">\n        <!-- if the menu item has children, render the children -->\n        <ul euiList *ngIf="item.children && item.expanded" class="eui-menu eui-menu-sub" role="menu" [attr.aria-label]="item.label" tabindex="-1">\n            <ng-container *ngFor="let child of item.children; let childIndex = index">\n                <ng-template [ngTemplateOutlet]="menuItemTemplateRef" [ngTemplateOutletContext]="{ menuItem: child, index: childIndex, parent: item }">\n                </ng-template>\n            </ng-container>\n        </ul>\n    </eui-menu-item>\n</ng-template>\n', styles: ['.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-menu:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu--collapsed .eui-menu-filter{transition:none;visibility:hidden}.eui-menu--collapsed .eui-menu-item__link{padding-left:var(--eui-s-m)}.eui-menu--collapsed .eui-menu-item__link-start-block{gap:0}.eui-menu--collapsed .eui-menu-item__link-content-block,.eui-menu--collapsed .eui-menu-item__link-end-block{visibility:hidden}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-action-icon{display:none}.eui-menu--collapsed .eui-menu-item__link-end-block .eui-menu-item__link-toggle{display:inherit;position:absolute;right:calc(-1 * var(--eui-s-s));transform:scale(.75);visibility:visible}.eui-menu--collapsed .eui-menu-item__link-initials{display:flex;background-color:var(--eui-c-neutral-bg-light);border:1px solid var(--eui-c-neutral-lightest);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-menu--collapsed .eui-menu-item--expanded:first-child{border-bottom:none;padding-bottom:0}.eui-menu--collapsed .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link,.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-menu--no-items{color:var(--eui-c-neutral-lighter);text-align:center}.eui-menu-filter{display:flex;padding:var(--eui-s-m);position:relative;width:100%}.eui-menu-item{display:flex;position:relative;width:100%;border:2px solid transparent}.eui-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-menu-item .eui-menu-item__content{align-items:center;display:flex;position:relative;width:100%}.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);padding:var(--eui-s-xs) var(--eui-s-2xs) calc(var(--eui-s-xs) - 2px) var(--eui-s-s);text-decoration:none;width:100%}.eui-menu-item__link.eui-menu-item__link-category{cursor:default}.eui-menu-item__link-start-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link-content-block{display:flex;flex-direction:column;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-content-block .eui-menu-item__link-label-container{align-items:center;display:flex;position:relative;width:100%}.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-menu-item__link-content-block .eui-menu-item__link-label-container .eui-menu-item__link-label-category{font:var(--eui-f-m-bold);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-menu-item__link-end-block{align-items:center;display:flex;gap:var(--eui-s-xs)}.eui-menu-item__link:hover:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);text-decoration:none}.eui-menu-item__link--disabled{opacity:var(--eui-base-disabled-opacity);pointer-events:none}.eui-menu-item__link--active:not(.eui-menu-item--disabled){background-color:var(--eui-c-primary-bg);font:var(--eui-f-m-bold)}.eui-menu-item__link--active:not(.eui-menu-item--disabled) .eui-menu-item__link-label{color:var(--eui-c-primary)}.eui-menu-item__link--has-sub{border-top:1px solid var(--eui-c-neutral-bg)}.eui-menu-item__link-label--lowercase{text-transform:initial}.eui-menu-item--expanded{display:flex;flex-direction:column}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-2xl)}.eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link--has-sub{font-weight:initial;text-transform:initial}.eui-menu-item--expanded .eui-menu-item--expanded .eui-menu-sub .eui-menu-item__link{padding-left:var(--eui-s-5xl)}.eui-menu-item--expanded .eui-menu-item__link--has-sub:not(:first-child){border-bottom:1px solid var(--eui-c-neutral-bg)}\n'] }]
 }], ctorParameters: () => [{ type: i12.Router }, { type: i12.ActivatedRoute }, { type: i22.BaseStatesDirective }, { type: i02.ChangeDetectorRef }], propDecorators: { focusableItems: [{
   type: ViewChildren,
   args: [EuiMenuItemComponent]