@scion/components 22.3.0 → 22.5.0

package/fesm2022/scion-components-menu.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { untracked, inject, Injector, InjectionToken, computed, runInInjectionContext, effect, assertNotInReactiveContext, NgZone, DOCUMENT, DestroyRef, isSignal, Injectable, Pipe, input, createComponent, inputBinding, ElementRef, EnvironmentInjector, ApplicationRef, Component, model, viewChild, signal, viewChildren, linkedSignal, ViewContainerRef, afterRenderEffect, Directive } from '@angular/core';
+import { untracked, inject, Injector, InjectionToken, computed, runInInjectionContext, effect, assertNotInReactiveContext, NgZone, DOCUMENT, DestroyRef, isSignal, Injectable, Pipe, input, createComponent, inputBinding, ElementRef, EnvironmentInjector, ApplicationRef, Component, model, viewChild, signal, viewChildren, linkedSignal, ViewContainerRef, onIdle, afterRenderEffect, Directive } from '@angular/core';
 import * as i1$1 from '@scion/components/common';
 import { coerceSignal, createDestroyableInjector, SciComponentOutletDirective, SciAttributesDirective, assertInInjectionContext } from '@scion/components/common';
 import { Objects, Arrays, prune, Maps } from '@scion/toolkit/util';
@@ -1595,7 +1595,7 @@ class SciMenuComponent {
         // Wait until menu items are available, maximal until idle; may initially be empty due to asynchronous menu contributions.
         toObservable(this.menuItems)
             .pipe(filter(menuItems => !!menuItems.length), observeOn(animationFrameScheduler), // Wait until next render cycle to capture menu width.
-        raceWith(new Promise(resolve => void requestIdleCallback(resolve, { timeout: 250 }))), // fallback if no menu items are contributed
+        raceWith(onIdle({ timeout: 250 })), // Fallback if no menu items are contributed.
         take(1), takeUntilDestroyed())
             .subscribe(() => {
             this.menuSize.update(size => ({ ...size, width: `${host.getBoundingClientRect().width}px` }));
@@ -1728,7 +1728,7 @@ class SciMenuComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciMenuComponent, isStandalone: true, selector: "sci-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, glyphArea: { classPropertyName: "glyphArea", publicName: "glyphArea", isSignal: true, isRequired: false, transformFunction: null }, anchorWidth: { classPropertyName: "anchorWidth", publicName: "anchorWidth", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--\u0275sci-menu-width": "menuSize().width", "style.--\u0275sci-menu-min-width": "menuSize().minWidth", "style.--\u0275sci-menu-max-width": "menuSize().maxWidth", "style.--\u0275sci-menu-max-height": "menuSize().maxHeight", "style.--\u0275sci-menu-scrolling": "scrolling() ? `true` : null", "attr.data-glyph-area": "hasGlyphArea() ? null : `none`", "style.visibility": "popoverHidden() ? `hidden` : null", "attr.tabindex": "role === `menu` ? `-1` : null", "class": "cssClass()" } }, providers: [
             providePopoverRef(),
             provideMenuFilter(),
-        ], viewQueries: [{ propertyName: "_filterField", first: true, predicate: SciMenuFilterComponent, descendants: true, isSignal: true }, { propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }, { propertyName: "popoverViewContainerRef", first: true, predicate: ["popover_view_container_ref"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1$1.SciAttributesDirective, inputs: ["sciAttributes", "attributes"] }], ngImport: i0, template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion.search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion.components.type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion.chevron_down' : 'scion.chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <sci-viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </sci-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label, accelerator and action toolbar. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion.chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n      <!-- @let message = filter?.notFoundMessage?.() ?? '%scion.components.no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion.components.no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon>{{menuItem.checked() ? 'scion.checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host:has(>sci-viewport){padding:var(--\\275sci-menu-padding-block) 0}:host:has(>sci-viewport)>header.group-header,:host:has(>sci-viewport)>button.group-header,:host:has(>sci-viewport)>div.filter,:host:has(>sci-viewport)>hr{margin:0 var(--\\275sci-menu-padding-inline)}:host>sci-viewport{grid-column:1/-1;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box}:host>sci-viewport::part(content){grid-column:1/-1;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr);padding:2px var(--\\275sci-menu-padding-inline)}@container style(--\\275sci-menu-glyph-area: false){:host>sci-viewport::part(content){grid-template-columns:minmax(0,1fr)}}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"], dependencies: [{ kind: "component", type: SciMenuGroupComponent, selector: "sci-menu-group", inputs: ["group", "glyphArea", "disabled", "cssClass"] }, { kind: "component", type: SciMenuFilterComponent, selector: "sci-menu-filter", inputs: ["placeholder", "text"], outputs: ["textChange"] }, { kind: "component", type: SciToolbarGroupComponent, selector: "sci-toolbar-group", inputs: ["menuItems", "orientation", "disabled", "popoverViewContainerRef"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "component", type: SciMenuGroupLabelComponent, selector: "sci-menu-group-label" }, { kind: "component", type: SciMenuItemLabelComponent, selector: "sci-menu-item-label" }, { kind: "component", type: SciMenuItemIconComponent, selector: "sci-menu-item-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SciTextPipe, name: "sciText" }, { kind: "pipe", type: SciFormatAcceleratorPipe, name: "sciFormatAccelerator" }] });
+        ], viewQueries: [{ propertyName: "_filterField", first: true, predicate: SciMenuFilterComponent, descendants: true, isSignal: true }, { propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }, { propertyName: "popoverViewContainerRef", first: true, predicate: ["popover_view_container_ref"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1$1.SciAttributesDirective, inputs: ["sciAttributes", "attributes"] }], ngImport: i0, template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion.search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion.components.type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion.chevron_down' : 'scion.chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <sci-viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </sci-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label, accelerator and action toolbar. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion.chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n      <!-- @let message = filter?.notFoundMessage?.() ?? '%scion.components.no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion.components.no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon>{{menuItem.checked() ? 'scion.checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset;height:auto}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host:has(>sci-viewport){padding:var(--\\275sci-menu-padding-block) 0}:host:has(>sci-viewport)>header.group-header,:host:has(>sci-viewport)>button.group-header,:host:has(>sci-viewport)>div.filter,:host:has(>sci-viewport)>hr{margin:0 var(--\\275sci-menu-padding-inline)}:host>sci-viewport{grid-column:1/-1;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box}:host>sci-viewport::part(content){grid-column:1/-1;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr);padding:2px var(--\\275sci-menu-padding-inline)}@container style(--\\275sci-menu-glyph-area: false){:host>sci-viewport::part(content){grid-template-columns:minmax(0,1fr)}}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"], dependencies: [{ kind: "component", type: SciMenuGroupComponent, selector: "sci-menu-group", inputs: ["group", "glyphArea", "disabled", "cssClass"] }, { kind: "component", type: SciMenuFilterComponent, selector: "sci-menu-filter", inputs: ["placeholder", "text"], outputs: ["textChange"] }, { kind: "component", type: SciToolbarGroupComponent, selector: "sci-toolbar-group", inputs: ["menuItems", "orientation", "disabled", "popoverViewContainerRef"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "component", type: SciMenuGroupLabelComponent, selector: "sci-menu-group-label" }, { kind: "component", type: SciMenuItemLabelComponent, selector: "sci-menu-item-label" }, { kind: "component", type: SciMenuItemIconComponent, selector: "sci-menu-item-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SciTextPipe, name: "sciText" }, { kind: "pipe", type: SciFormatAcceleratorPipe, name: "sciFormatAccelerator" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuComponent, decorators: [{
             type: Component,
@@ -1762,7 +1762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'cssClass()',
                     }, hostDirectives: [
                         { directive: SciAttributesDirective, inputs: ['sciAttributes: attributes'] },
-                    ], template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion.search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion.components.type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion.chevron_down' : 'scion.chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <sci-viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </sci-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label, accelerator and action toolbar. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion.chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n      <!-- @let message = filter?.notFoundMessage?.() ?? '%scion.components.no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion.components.no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon>{{menuItem.checked() ? 'scion.checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host:has(>sci-viewport){padding:var(--\\275sci-menu-padding-block) 0}:host:has(>sci-viewport)>header.group-header,:host:has(>sci-viewport)>button.group-header,:host:has(>sci-viewport)>div.filter,:host:has(>sci-viewport)>hr{margin:0 var(--\\275sci-menu-padding-inline)}:host>sci-viewport{grid-column:1/-1;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box}:host>sci-viewport::part(content){grid-column:1/-1;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr);padding:2px var(--\\275sci-menu-padding-inline)}@container style(--\\275sci-menu-glyph-area: false){:host>sci-viewport::part(content){grid-template-columns:minmax(0,1fr)}}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"] }]
+                    ], template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion.search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion.components.type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion.chevron_down' : 'scion.chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <sci-viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </sci-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label, accelerator and action toolbar. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion.chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n      <!-- @let message = filter?.notFoundMessage?.() ?? '%scion.components.no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion.components.no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon>{{menuItem.checked() ? 'scion.checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset;height:auto}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host:has(>sci-viewport){padding:var(--\\275sci-menu-padding-block) 0}:host:has(>sci-viewport)>header.group-header,:host:has(>sci-viewport)>button.group-header,:host:has(>sci-viewport)>div.filter,:host:has(>sci-viewport)>hr{margin:0 var(--\\275sci-menu-padding-inline)}:host>sci-viewport{grid-column:1/-1;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box}:host>sci-viewport::part(content){grid-column:1/-1;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr);padding:2px var(--\\275sci-menu-padding-inline)}@container style(--\\275sci-menu-glyph-area: false){:host>sci-viewport::part(content){grid-template-columns:minmax(0,1fr)}}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], glyphArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphArea", required: false }] }], anchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorWidth", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], _filterField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciMenuFilterComponent), { isSignal: true }] }], _viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciViewportComponent), { isSignal: true }] }], popoverViewContainerRef: [{ type: i0.ViewChild, args: ['popover_view_container_ref', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 /**
  * Evaluates whether the given menu items (or any child groups) require a glyph area for displaying icons and checkmarks.