npm - @scion/components - Versions diffs - 22.3.0 → 22.4.0 - Mend

@scion/components 22.3.0 → 22.4.0

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 (11) hide show

package/_index.scss +37 -18
package/design/icons/_scion-icon-font.scss +2 -2
package/fesm2022/scion-components-icon.mjs +3 -56
package/fesm2022/scion-components-icon.mjs.map +1 -1
package/fesm2022/scion-components-menu.mjs +10 -4
package/fesm2022/scion-components-menu.mjs.map +1 -1
package/fesm2022/scion-components-table.mjs +272 -200
package/fesm2022/scion-components-table.mjs.map +1 -1
package/package.json +2 -2
package/types/scion-components-icon.d.ts +3 -56
package/types/scion-components-table.d.ts +115 -97

package/_index.scss CHANGED Viewed

@@ -89,61 +89,80 @@
  * ## SCION Icon Font
  * This module provides the standard icon font used by SCION components.
  *
- * By default, SCION icons are loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/components/resources/scion-icons.
+ * By default, SCION icons are loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/icons.
  *
  * ### Content Security Policy (CSP)
  * Applications enforcing a Content Security Policy must whitelist the CDN using the `font-src` directive.
  *
  * ```
- * Content-Security-Policy: font-src 'self' https://cdn.jsdelivr.net/npm/@scion/components/;
+ * Content-Security-Policy: font-src 'self' https://cdn.jsdelivr.net/npm/@scion/icons/;
  * ```
  *
  * ### Self-Hosting the SCION Icon Font
- * As an alternative to loading SCION icons from the CDN, the application can host the SCION icon font.
+ * As an alternative to loading SCION icons from the CDN, you can host the SCION icon font directly within your application.
  *
- * To host the icon font locally:
- * 1. Download the icon font from `https://cdn.jsdelivr.net/npm/@scion/components/resources/scion-icons/scion-icons.zip`.
- * 2. Extract the font files into the application's public assets folder (e.g., `/public/scion-icons`).
- * 3. Configure the path in the `@scion/components` SCSS module:
+ * To self-host the SCION icon font:
+ *
+ * 1. Install the `@scion/icons` NPM module:
+ *    ```
+ *    npm install @scion/icons
+ *    ```
+ * 2. Register the icon font files in `assets` in `angular.json`.
+ *    ```
+ *    "assets": [
+ *      {
+ *        "glob": "**\/*",
+ *        "input": "node_modules/@scion/icons",
+ *        "output": "/scion-icons"
+ *      }
+ *    ]
+ *    ```
+ * 3. Configure `@scion/components` SCSS module to load the icon font from `/scion-icons` (leading slash required):
  *    ```scss
  *    @use '@scion/components' with (
  *      $icon-font: (
- *        directory: '/scion-icons' // must start with a leading slash
+ *        directory: '/scion-icons'
  *      )
  *    );
  *    ```
  *
+ * As an alternative to steps 1 and 2, you can manually download the icon font files from the CDN and place them directly into your application's public assets folder (`public/scion-icons/`):
+ * - https://cdn.jsdelivr.net/npm/@scion/icons/scion-icons.ttf
+ * - https://cdn.jsdelivr.net/npm/@scion/icons/scion-icons.svg
+ * - https://cdn.jsdelivr.net/npm/@scion/icons/scion-icons.woff
+ *
  * ### Loading Self-Hosted Icon Font Relative to Document Base
- * Applications deployed in a subdirectory must configure the `@scion/components` SCSS module to load the self-hosted icon font relative to the document base URL (defined by the `<base>` HTML tag)
- * and exclude the font files from the application build.
+ * Applications deployed in a subdirectory must configure the `@scion/components` SCSS module to load the self-hosted icon font relative to the document base URL (defined by the `<base>` HTML tag) and exclude the icon font files from the application build.
  *
  * Different steps are required depending on whether building the application with esbuild or Webpack.
  *
  * **Using `@angular/build:application` (esbuild, default since Angular 20)**
  *
- * 1. Remove the leading slash from the directory configuration:
+ * 1. Configure `@scion/components` SCSS module to load the icon font from `scion-icons` (no leading slash to be relative to the document base URL):
  *    ```scss
  *    @use '@scion/components' with (
  *      $icon-font: (
- *        directory: 'scion-icons' // relative to document base URL
+ *        directory: 'scion-icons'
  *      )
  *    );
  *    ```
- * 2. Exclude the font files from the application build via `externalDependencies` in `angular.json`:
- *    ```json
+ * 2. Exclude the icon font files from the application build via `externalDependencies` in `angular.json`:
+ *    ```
  *    "externalDependencies": [
- *      "scion-icons/scion-icons.*"
+ *      "scion-icons/*"
  *    ]
  *    ```
  *
- * **Using `@angular-devkit/build-angular:browser` (Webpack)**
+ * **Using `@angular-devkit/build-angular:browser` (Webpack, deprecated since Angular 22)**
+ *
+ * Configure `@scion/components` SCSS module to load the icon font from `^scion-icons` (no leading slash to be relative to the document base URL):
  *
- * Configure the directory path with a leading caret (`^`), instructing Webpack to exclude the font files from the application build:
+ * The leading caret (`^`) instructs Webpack to exclude the icon font files from the application build.
  *
  * ```scss
  * @use '@scion/components' with (
  *   $icon-font: (
- *     directory: '^scion-icons' // leading caret excludes the font files from Webpack build
+ *     directory: '^scion-icons'
  *   )
  * );
  * ```

package/design/icons/_scion-icon-font.scss CHANGED Viewed

@@ -14,14 +14,14 @@
 $-version: 1;
 /**
- * By default, the icon font is loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/components/resources/scion-icons
+ * By default, the icon font is loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/icons
  */
 $-icon-font-defaults: (
   // NOTE: If self-hosting SCION icons, the font path must be "root-relative" or excluded from the application build.
   // Otherwise, the build fails because the builder cannot resolve the font files relative to "this" SASS file.
   // For esbuild, register excluded assets as `externalDependencies` in angular.json.
   // For webpack, exclude assets by prefixing their path with a leading caret (^).
-  directory: 'https://cdn.jsdelivr.net/npm/@scion/components/resources/scion-icons',
+  directory: 'https://cdn.jsdelivr.net/npm/@scion/icons',
   filename: 'scion-icons',
   version: $-version,
 );

package/fesm2022/scion-components-icon.mjs CHANGED Viewed

@@ -103,7 +103,7 @@ class IconProviders {
     _iconProviders = [
         // Provide app-specific icons.
         ...inject(SCI_ICON_PROVIDER, { optional: true }) ?? [],
-        // Provide built-in icons.
+        // Provide SCION icons.
         scionIconProvider,
         // Provide material icons.
         materialIconProvider,
@@ -286,61 +286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..24,400,0&display=block');
  * ```
  *
- * SCION uses the following built-in icons:
- * - scion.add               : Add an item
- * - scion.add_large         : Add an item (large)
- * - scion.bin               : Bin symbol
- * - scion.checkmark         : Indicates a selected option
- * - scion.chevron_down      : Chevron down symbol
- * - scion.chevron_left      : Chevron left symbol
- * - scion.chevron_right     : Chevron right symbol
- * - scion.chevron_up        : Chevron up symbol
- * - scion.clear             : Clear items
- * - scion.close             : Close a popover
- * - scion.collapse_all      : Collapse all items
- * - scion.copy              : Copy an item
- * - scion.delete            : Delete an item
- * - scion.dirty             : Indicates unsaved data
- * - scion.drag_handle       : Drag or move an item
- * - scion.duplicate         : Duplicate an item
- * - scion.edit              : Edit an item
- * - scion.emdash            : Em dash symbol
- * - scion.envelope          : Envelope symbol
- * - scion.envelope_closed   : Indicates a closed envelope
- * - scion.envelope_opened   : Indicates an opened envelope
- * - scion.expand_all        : Expand an item
- * - scion.external_link     : Open link in a new tab
- * - scion.filter            : Set or change a filter
- * - scion.find              : Find an item
- * - scion.folder            : Directory symbol
- * - scion.help              : Indicates help, support, or documentation
- * - scion.hide              : Hide a panel
- * - scion.magnifier         : Magnifier symbol
- * - scion.minimize          : Minimize a panel
- * - scion.minus             : Minus sign
- * - scion.modified          : Indicates modified data
- * - scion.more_horizontal   : Show a popover to the left or right
- * - scion.more_vertical     : Show a popover above or below
- * - scion.new               : Create an item
- * - scion.new_large         : Create an item (large)
- * - scion.paste             : Paste from clipboard
- * - scion.pen               : Pen symbol
- * - scion.pin               : Pin an item
- * - scion.pinned            : Indicates a pinned item
- * - scion.placeholder_frame : Placeholder symbol
- * - scion.placeholder_image : Placeholder symbol for an image
- * - scion.plus              : Plus sign
- * - scion.plus_large        : Plus sign (large)
- * - scion.remove            : Remove an item (x)
- * - scion.remove_minus      : Remove an item (-)
- * - scion.reset             : Reset a form
- * - scion.search            : Search for an item
- * - scion.sort_ascending    : Sort items in ascending order (A-Z, 0-9)
- * - scion.sort_by           : Change sort order
- * - scion.sort_descending   : Sort items in descending order (Z-A, 9-0)
- * - scion.user              : User symbol
- *
- * To not replace built-in icons, the icon provider can return `undefined` for icons starting with the `scion.` prefix.
+ * Built-in SCION icons start with the `scion.` prefix. To not replace SCION icons, the icon provider can return `undefined` for icons starting with the `scion.` prefix.
+ * Refer to https://icons.scion.vercel.app for available SCION icons.
  *
  * The function can call `inject` to get any required dependencies.
  *

package/fesm2022/scion-components-icon.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scion-components-icon.mjs","sources":["../../../../projects/scion/components/icon/src/material-icon-provider.ts","../../../../projects/scion/components/icon/src/scion-icon-provider.ts","../../../../projects/scion/components/icon/src/icon-providers.ts","../../../../projects/scion/components/icon/src/icon.component.ts","../../../../projects/scion/components/icon/src/icon.component.html","../../../../projects/scion/components/icon/src/icon.provider.ts","../../../../projects/scion/components/icon/src/public_api.ts","../../../../projects/scion/components/icon/src/scion-components-icon.ts"],"sourcesContent":["/\n Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, input, inputBinding} from '@angular/core';\nimport {SciIconProviderFn} from './icon.provider';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Provides Material icons for non-scion icons.\n /\nexport const materialIconProvider: SciIconProviderFn = (ligature: string): SciComponentDescriptor \| undefined => {\n if (ligature.startsWith('scion.')) {\n return undefined; // delegate to next provider\n }\n\n return {component: MaterialIconComponent, bindings: [inputBinding('ligature', () => ligature)]};\n};\n\n/\n Renders a Material icon based on its ligature.\n \n This component requires a Material icon font to be included in the HTML.\n \n Supported fonts:\n * - https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded\n * - https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\n * - https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp\n * - https://fonts.googleapis.com/css?family=Material+Icons\|Material+Icons+Outlined\|Material+Icons+Round\|Material+Icons+Sharp\n /\n@Component({\n selector: 'sci-material-icon',\n template: '{{ligature()}}',\n styles: `\n :host {\n font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', 'Material Symbols Sharp', 'Material Icons', 'Material Icons Outlined', 'Material Icons Round', 'Material Icons Sharp';\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased;\n }\n `,\n})\nexport class MaterialIconComponent {\n /\n Specifies the ligature of the Material icon.\n /\n public readonly ligature = input.required<string>();\n}\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, input, inputBinding} from '@angular/core';\nimport {SciIconProviderFn} from './icon.provider';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Provides icons used in SCION libraries.\n \n Register this provider as the last icon provider, enabling replacement of built-in SCION icons.\n /\nexport const scionIconProvider: SciIconProviderFn = (icon: string): SciComponentDescriptor \| undefined => {\n const ligature = icon.startsWith('scion.') ? icon.substring('scion.'.length) : undefined;\n if (ligature) {\n return {component: SciIconFontGlyphComponent, bindings: [inputBinding('ligature', () => ligature)]};\n }\n return undefined;\n};\n\n/\n Renders the icon for a ligature of the SCION icon font.\n \n This component requires the SCION icon font 'scion-icons' to be included in the HTML.\n /\n@Component({\n selector: 'sci-icon-font-glyph',\n template: '{{ligature()}}',\n styles: `\n :host {\n font-family: 'scion-icons';\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n\n / Enable Ligatures /\n letter-spacing: 0;\n font-feature-settings: \"liga\";\n font-variant-ligatures: discretionary-ligatures;\n\n / Better Font Rendering /\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n `,\n})\nexport class SciIconFontGlyphComponent {\n\n /\n Specifies the ligature of the icon.\n /\n public readonly ligature = input.required<string>();\n}\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {inject, Injectable, InjectionToken, Injector, runInInjectionContext} from '@angular/core';\nimport {materialIconProvider} from './material-icon-provider';\nimport {scionIconProvider} from './scion-icon-provider';\nimport {SciIconProviderFn} from './icon.provider';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Provides icons based on registered icon providers.\n /\n@Injectable({providedIn: 'root'})\nexport class IconProviders {\n\n private readonly _iconProviders: SciIconProviderFn[] = [\n // Provide app-specific icons.\n ...inject(SCI_ICON_PROVIDER, {optional: true}) ?? [],\n // Provide built-in icons.\n scionIconProvider,\n // Provide material icons.\n materialIconProvider,\n ];\n private readonly _injector = inject(Injector);\n\n /\n Provides the icon descriptor for the given icon based on icon providers registered under the {@link SCI_ICON_PROVIDER} DI token.\n \n Icon providers are called in registration order. If a provider does not provide the icon, the next provider is called, and so on.\n /\n public provide(icon: string \| undefined): SciComponentDescriptor \| undefined {\n if (!icon) {\n return undefined;\n }\n\n if (!this._iconProviders.length) {\n return undefined;\n }\n\n for (const iconProvider of this._iconProviders) {\n const componentOrDescriptor = runInInjectionContext(this._injector, () => iconProvider(icon));\n if (componentOrDescriptor) {\n return typeof componentOrDescriptor === 'function' ? {component: componentOrDescriptor} : componentOrDescriptor;\n }\n }\n return undefined;\n }\n}\n\n/\n Multi-DI token for injecting icon providers.\n \n @see provideIconProvider\n * @see SciIconProviderFn\n /\nexport const SCI_ICON_PROVIDER = new InjectionToken<SciIconProviderFn[]>('SCI_ICON_PROVIDER');\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, computed, Directive, effect, inject, signal, Signal, TemplateRef, untracked, viewChild} from '@angular/core';\nimport {coerceSignal, SciComponentDescriptor, SciComponentOutletDirective} from '@scion/components/common';\nimport {IconProviders} from './icon-providers';\nimport {fromMutation$} from '@scion/toolkit/observable';\nimport {concatWith, map, MonoTypeOperatorFunction, of} from 'rxjs';\n\n/\n Renders an icon based on registered icon providers.\n \n Set the icon name as the slotted content of the `<sci-icon>` component.\n \n Example:\n * ```html\n * <sci-icon>home</sci-icon>\n * ```\n \n An icon provider can be registered using {@link provideIconProvider}.\n \n Providers are called in registration order. If a provider does not provide the icon, the next provider is called, and so on.\n * If no provider provides the icon, defaults to a Material icon provider, interpreting the icon as a Material icon font ligature.\n * Refer to https://fonts.google.com/icons for available Material icons and instructions on including the Material icon font.\n \n By default, the icon size is `1em`. To change the size, set the font-size on the `<sci-icon>` element or use the `--sci-icon-size` CSS variable.\n \n ```scss\n * sci-icon {\n * --sci-icon-size: 16px;\n * }\n * ```\n \n @see provideIconProvider\n \n TODO [Angular 23] Consider changing encapsulation to `IsolatedShadowDom` when stable. See branch: issue/icon-shadow-dom.\n /\n@Component({\n selector: 'sci-icon',\n templateUrl: './icon.component.html',\n styleUrl: './icon.component.scss',\n imports: [\n SciComponentOutletDirective,\n ],\n})\nexport class SciIconComponent {\n\n private readonly _slottedContent = viewChild.required<TemplateRef<void>>('slotted_content');\n\n protected readonly icon = this.computeIcon();\n\n /\n Reads the icon from slotted content and passes it to registered icon providers for resolution.\n /\n private computeIcon(): Signal<SciComponentDescriptor \| undefined> {\n const icon = signal<SciComponentDescriptor \| undefined>(undefined);\n const iconProviders = inject(IconProviders);\n\n effect(onCleanup => {\n const slottedContent = this._slottedContent();\n\n untracked(() => {\n // Instantiate template to \"read\" slotted content.\n const view = slottedContent.createEmbeddedView(undefined);\n onCleanup(() => view.destroy());\n\n // Return if empty, i.e., no icon to render.\n if (!view.rootNodes.length) {\n icon.set(undefined);\n return;\n }\n\n // Ensure only text is provided as slotted content.\n if (view.rootNodes.length > 1 \|\| (view.rootNodes[0] as Element).nodeType !== Node.TEXT_NODE) {\n throw Error('[InvalidInputError] Only text (ligature) is allowed in slotted content of <sci-icon>.');\n }\n\n // Watch slotted content.\n const textNode = view.rootNodes[0] as Text;\n const subscription = of(textNode.textContent)\n .pipe(\n concatWith(fromMutation$(textNode, {characterData: true}).pipe(map(() => textNode.textContent))),\n map(slottedContent => iconProviders.provide(slottedContent.trim() \|\| undefined)),\n augmentIconDescriptor(),\n )\n .subscribe(iconDescriptor => icon.set(iconDescriptor));\n\n onCleanup(() => subscription.unsubscribe());\n });\n });\n\n return icon;\n }\n}\n\n/\n Augments the icon descriptor:\n \n - Prevents the browser from translating the icon.\n * - Sets the icon's font size to 'var(--sci-icon-size, 1em)', required to inherit the location's font size for icons with a fixed font size.\n * For example, Material sets a fixed font size of 24px.\n /\nfunction augmentIconDescriptor(): MonoTypeOperatorFunction<SciComponentDescriptor \| undefined> {\n return map((icon: SciComponentDescriptor \| undefined) => icon && {\n ...icon,\n attributes: computed(() => ({\n ...coerceSignal(icon.attributes)?.(),\n translate: 'no',\n })),\n directives: [\n ...icon.directives ?? [],\n IconFontSizeDirective,\n ],\n } satisfies SciComponentDescriptor);\n}\n\n/\n Sets the font size to 'var(--sci-icon-size, 1em)', required to inherit the location's font size for icons with a fixed font size.\n * For example, Material sets a fixed font size of 24px.\n /\n@Directive({host: {'[style.font-size]': `'var(--sci-icon-size, 1em)'`}})\nclass IconFontSizeDirective {\n}\n","<ng-container sciComponentOutlet=\"icon()\"/>\n\n<!--Template to capture slotted content. -->\n<ng-template #slotted_content>\n <ng-content/>\n</ng-template>\n","/\n Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {EnvironmentProviders, makeEnvironmentProviders} from '@angular/core';\nimport {SCI_ICON_PROVIDER} from './icon-providers';\nimport {ComponentType} from '@angular/cdk/portal';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Enables contribution or replacement of icons used in SCION.\n \n An icon provider is a function that returns a component for an icon. The component renders the icon.\n \n Multiple icon providers can be registered. Providers are called in registration order. If a provider does not provide the icon,\n * the next provider is called, and so on.\n \n Defaults to a Material icon provider, interpreting the icon as a Material icon ligature.\n \n Refer to https://fonts.google.com/icons for available Material icons and https://developers.google.com/fonts/docs/material_symbols#use_in_web\n * for instructions on including the Material icon font.\n \n @example - Importing the Material icon font in `styles.scss`\n * ```scss\n * @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..24,400,0&display=block');\n * ```\n \n SCION uses the following built-in icons:\n * - scion.add : Add an item\n * - scion.add_large : Add an item (large)\n * - scion.bin : Bin symbol\n * - scion.checkmark : Indicates a selected option\n * - scion.chevron_down : Chevron down symbol\n * - scion.chevron_left : Chevron left symbol\n * - scion.chevron_right : Chevron right symbol\n * - scion.chevron_up : Chevron up symbol\n * - scion.clear : Clear items\n * - scion.close : Close a popover\n * - scion.collapse_all : Collapse all items\n * - scion.copy : Copy an item\n * - scion.delete : Delete an item\n * - scion.dirty : Indicates unsaved data\n * - scion.drag_handle : Drag or move an item\n * - scion.duplicate : Duplicate an item\n * - scion.edit : Edit an item\n * - scion.emdash : Em dash symbol\n * - scion.envelope : Envelope symbol\n * - scion.envelope_closed : Indicates a closed envelope\n * - scion.envelope_opened : Indicates an opened envelope\n * - scion.expand_all : Expand an item\n * - scion.external_link : Open link in a new tab\n * - scion.filter : Set or change a filter\n * - scion.find : Find an item\n * - scion.folder : Directory symbol\n * - scion.help : Indicates help, support, or documentation\n * - scion.hide : Hide a panel\n * - scion.magnifier : Magnifier symbol\n * - scion.minimize : Minimize a panel\n * - scion.minus : Minus sign\n * - scion.modified : Indicates modified data\n * - scion.more_horizontal : Show a popover to the left or right\n * - scion.more_vertical : Show a popover above or below\n * - scion.new : Create an item\n * - scion.new_large : Create an item (large)\n * - scion.paste : Paste from clipboard\n * - scion.pen : Pen symbol\n * - scion.pin : Pin an item\n * - scion.pinned : Indicates a pinned item\n * - scion.placeholder_frame : Placeholder symbol\n * - scion.placeholder_image : Placeholder symbol for an image\n * - scion.plus : Plus sign\n * - scion.plus_large : Plus sign (large)\n * - scion.remove : Remove an item (x)\n * - scion.remove_minus : Remove an item (-)\n * - scion.reset : Reset a form\n * - scion.search : Search for an item\n * - scion.sort_ascending : Sort items in ascending order (A-Z, 0-9)\n * - scion.sort_by : Change sort order\n * - scion.sort_descending : Sort items in descending order (Z-A, 9-0)\n * - scion.user : User symbol\n \n To not replace built-in icons, the icon provider can return `undefined` for icons starting with the `scion.` prefix.\n \n The function can call `inject` to get any required dependencies.\n \n @see SciIconProviderFn\n * @see SciIconComponent\n /\nexport function provideIconProvider(iconProviderFn: SciIconProviderFn \| undefined): EnvironmentProviders {\n return makeEnvironmentProviders(iconProviderFn ? [\n {\n provide: SCI_ICON_PROVIDER,\n useValue: iconProviderFn,\n multi: true,\n },\n ] : []);\n}\n\n/\n Signature of a function to provide icons.\n \n An icon provider is a function that returns the component for an icon. The component renders the icon.\n \n Alternatively, the icon provider can return a descriptor, allowing for additional configuration such as inputs.\n * Inputs are available as input properties in the component. The component can use the inputs to render the icon.\n \n Icon keys used by SCION start with the `scion.` prefix. To not replace built-in icons, the icon provider can\n * return `undefined` for icons starting with the `scion.` prefix.\n \n An icon provider can be registered via {@link provideIconProvider} function.\n \n The function can call `inject` to get any required dependencies.\n \n @param icon - The key of the icon for which to provide the icon component.\n * @returns ComponentType or {@link SciComponentDescriptor} to render the icon, or `undefined` if not provided by the icon provider.\n /\nexport type SciIconProviderFn = (icon: string) => ComponentType<unknown> \| SciComponentDescriptor \| undefined;\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/icon'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciIconComponent} from './icon.component';\nexport {provideIconProvider, type SciIconProviderFn} from './icon.provider';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"scion-components-icon.mjs","sources":["../../../../projects/scion/components/icon/src/material-icon-provider.ts","../../../../projects/scion/components/icon/src/scion-icon-provider.ts","../../../../projects/scion/components/icon/src/icon-providers.ts","../../../../projects/scion/components/icon/src/icon.component.ts","../../../../projects/scion/components/icon/src/icon.component.html","../../../../projects/scion/components/icon/src/icon.provider.ts","../../../../projects/scion/components/icon/src/public_api.ts","../../../../projects/scion/components/icon/src/scion-components-icon.ts"],"sourcesContent":["/\n Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, input, inputBinding} from '@angular/core';\nimport {SciIconProviderFn} from './icon.provider';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Provides Material icons for non-scion icons.\n /\nexport const materialIconProvider: SciIconProviderFn = (ligature: string): SciComponentDescriptor \| undefined => {\n if (ligature.startsWith('scion.')) {\n return undefined; // delegate to next provider\n }\n\n return {component: MaterialIconComponent, bindings: [inputBinding('ligature', () => ligature)]};\n};\n\n/\n Renders a Material icon based on its ligature.\n \n This component requires a Material icon font to be included in the HTML.\n \n Supported fonts:\n * - https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded\n * - https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\n * - https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp\n * - https://fonts.googleapis.com/css?family=Material+Icons\|Material+Icons+Outlined\|Material+Icons+Round\|Material+Icons+Sharp\n /\n@Component({\n selector: 'sci-material-icon',\n template: '{{ligature()}}',\n styles: `\n :host {\n font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', 'Material Symbols Sharp', 'Material Icons', 'Material Icons Outlined', 'Material Icons Round', 'Material Icons Sharp';\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased;\n }\n `,\n})\nexport class MaterialIconComponent {\n /\n Specifies the ligature of the Material icon.\n /\n public readonly ligature = input.required<string>();\n}\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, input, inputBinding} from '@angular/core';\nimport {SciIconProviderFn} from './icon.provider';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Provides icons used in SCION libraries.\n \n Register this provider as the last icon provider, enabling replacement of built-in SCION icons.\n /\nexport const scionIconProvider: SciIconProviderFn = (icon: string): SciComponentDescriptor \| undefined => {\n const ligature = icon.startsWith('scion.') ? icon.substring('scion.'.length) : undefined;\n if (ligature) {\n return {component: SciIconFontGlyphComponent, bindings: [inputBinding('ligature', () => ligature)]};\n }\n return undefined;\n};\n\n/\n Renders the icon for a ligature of the SCION icon font.\n \n This component requires the SCION icon font 'scion-icons' to be included in the HTML.\n /\n@Component({\n selector: 'sci-icon-font-glyph',\n template: '{{ligature()}}',\n styles: `\n :host {\n font-family: 'scion-icons';\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n\n / Enable Ligatures /\n letter-spacing: 0;\n font-feature-settings: \"liga\";\n font-variant-ligatures: discretionary-ligatures;\n\n / Better Font Rendering /\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n `,\n})\nexport class SciIconFontGlyphComponent {\n\n /\n Specifies the ligature of the icon.\n /\n public readonly ligature = input.required<string>();\n}\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {inject, Injectable, InjectionToken, Injector, runInInjectionContext} from '@angular/core';\nimport {materialIconProvider} from './material-icon-provider';\nimport {scionIconProvider} from './scion-icon-provider';\nimport {SciIconProviderFn} from './icon.provider';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Provides icons based on registered icon providers.\n /\n@Injectable({providedIn: 'root'})\nexport class IconProviders {\n\n private readonly _iconProviders: SciIconProviderFn[] = [\n // Provide app-specific icons.\n ...inject(SCI_ICON_PROVIDER, {optional: true}) ?? [],\n // Provide SCION icons.\n scionIconProvider,\n // Provide material icons.\n materialIconProvider,\n ];\n private readonly _injector = inject(Injector);\n\n /\n Provides the icon descriptor for the given icon based on icon providers registered under the {@link SCI_ICON_PROVIDER} DI token.\n \n Icon providers are called in registration order. If a provider does not provide the icon, the next provider is called, and so on.\n /\n public provide(icon: string \| undefined): SciComponentDescriptor \| undefined {\n if (!icon) {\n return undefined;\n }\n\n if (!this._iconProviders.length) {\n return undefined;\n }\n\n for (const iconProvider of this._iconProviders) {\n const componentOrDescriptor = runInInjectionContext(this._injector, () => iconProvider(icon));\n if (componentOrDescriptor) {\n return typeof componentOrDescriptor === 'function' ? {component: componentOrDescriptor} : componentOrDescriptor;\n }\n }\n return undefined;\n }\n}\n\n/\n Multi-DI token for injecting icon providers.\n \n @see provideIconProvider\n * @see SciIconProviderFn\n /\nexport const SCI_ICON_PROVIDER = new InjectionToken<SciIconProviderFn[]>('SCI_ICON_PROVIDER');\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, computed, Directive, effect, inject, signal, Signal, TemplateRef, untracked, viewChild} from '@angular/core';\nimport {coerceSignal, SciComponentDescriptor, SciComponentOutletDirective} from '@scion/components/common';\nimport {IconProviders} from './icon-providers';\nimport {fromMutation$} from '@scion/toolkit/observable';\nimport {concatWith, map, MonoTypeOperatorFunction, of} from 'rxjs';\n\n/\n Renders an icon based on registered icon providers.\n \n Set the icon name as the slotted content of the `<sci-icon>` component.\n \n Example:\n * ```html\n * <sci-icon>home</sci-icon>\n * ```\n \n An icon provider can be registered using {@link provideIconProvider}.\n \n Providers are called in registration order. If a provider does not provide the icon, the next provider is called, and so on.\n * If no provider provides the icon, defaults to a Material icon provider, interpreting the icon as a Material icon font ligature.\n * Refer to https://fonts.google.com/icons for available Material icons and instructions on including the Material icon font.\n \n By default, the icon size is `1em`. To change the size, set the font-size on the `<sci-icon>` element or use the `--sci-icon-size` CSS variable.\n \n ```scss\n * sci-icon {\n * --sci-icon-size: 16px;\n * }\n * ```\n \n @see provideIconProvider\n \n TODO [Angular 23] Consider changing encapsulation to `IsolatedShadowDom` when stable. See branch: issue/icon-shadow-dom.\n /\n@Component({\n selector: 'sci-icon',\n templateUrl: './icon.component.html',\n styleUrl: './icon.component.scss',\n imports: [\n SciComponentOutletDirective,\n ],\n})\nexport class SciIconComponent {\n\n private readonly _slottedContent = viewChild.required<TemplateRef<void>>('slotted_content');\n\n protected readonly icon = this.computeIcon();\n\n /\n Reads the icon from slotted content and passes it to registered icon providers for resolution.\n /\n private computeIcon(): Signal<SciComponentDescriptor \| undefined> {\n const icon = signal<SciComponentDescriptor \| undefined>(undefined);\n const iconProviders = inject(IconProviders);\n\n effect(onCleanup => {\n const slottedContent = this._slottedContent();\n\n untracked(() => {\n // Instantiate template to \"read\" slotted content.\n const view = slottedContent.createEmbeddedView(undefined);\n onCleanup(() => view.destroy());\n\n // Return if empty, i.e., no icon to render.\n if (!view.rootNodes.length) {\n icon.set(undefined);\n return;\n }\n\n // Ensure only text is provided as slotted content.\n if (view.rootNodes.length > 1 \|\| (view.rootNodes[0] as Element).nodeType !== Node.TEXT_NODE) {\n throw Error('[InvalidInputError] Only text (ligature) is allowed in slotted content of <sci-icon>.');\n }\n\n // Watch slotted content.\n const textNode = view.rootNodes[0] as Text;\n const subscription = of(textNode.textContent)\n .pipe(\n concatWith(fromMutation$(textNode, {characterData: true}).pipe(map(() => textNode.textContent))),\n map(slottedContent => iconProviders.provide(slottedContent.trim() \|\| undefined)),\n augmentIconDescriptor(),\n )\n .subscribe(iconDescriptor => icon.set(iconDescriptor));\n\n onCleanup(() => subscription.unsubscribe());\n });\n });\n\n return icon;\n }\n}\n\n/\n Augments the icon descriptor:\n \n - Prevents the browser from translating the icon.\n * - Sets the icon's font size to 'var(--sci-icon-size, 1em)', required to inherit the location's font size for icons with a fixed font size.\n * For example, Material sets a fixed font size of 24px.\n /\nfunction augmentIconDescriptor(): MonoTypeOperatorFunction<SciComponentDescriptor \| undefined> {\n return map((icon: SciComponentDescriptor \| undefined) => icon && {\n ...icon,\n attributes: computed(() => ({\n ...coerceSignal(icon.attributes)?.(),\n translate: 'no',\n })),\n directives: [\n ...icon.directives ?? [],\n IconFontSizeDirective,\n ],\n } satisfies SciComponentDescriptor);\n}\n\n/\n Sets the font size to 'var(--sci-icon-size, 1em)', required to inherit the location's font size for icons with a fixed font size.\n * For example, Material sets a fixed font size of 24px.\n /\n@Directive({host: {'[style.font-size]': `'var(--sci-icon-size, 1em)'`}})\nclass IconFontSizeDirective {\n}\n","<ng-container sciComponentOutlet=\"icon()\"/>\n\n<!--Template to capture slotted content. -->\n<ng-template #slotted_content>\n <ng-content/>\n</ng-template>\n","/\n Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {EnvironmentProviders, makeEnvironmentProviders} from '@angular/core';\nimport {SCI_ICON_PROVIDER} from './icon-providers';\nimport {ComponentType} from '@angular/cdk/portal';\nimport {SciComponentDescriptor} from '@scion/components/common';\n\n/\n Enables contribution or replacement of icons used in SCION.\n \n An icon provider is a function that returns a component for an icon. The component renders the icon.\n \n Multiple icon providers can be registered. Providers are called in registration order. If a provider does not provide the icon,\n * the next provider is called, and so on.\n \n Defaults to a Material icon provider, interpreting the icon as a Material icon ligature.\n \n Refer to https://fonts.google.com/icons for available Material icons and https://developers.google.com/fonts/docs/material_symbols#use_in_web\n * for instructions on including the Material icon font.\n \n @example - Importing the Material icon font in `styles.scss`\n * ```scss\n * @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..24,400,0&display=block');\n * ```\n \n Built-in SCION icons start with the `scion.` prefix. To not replace SCION icons, the icon provider can return `undefined` for icons starting with the `scion.` prefix.\n * Refer to https://icons.scion.vercel.app for available SCION icons.\n \n The function can call `inject` to get any required dependencies.\n \n @see SciIconProviderFn\n * @see SciIconComponent\n /\nexport function provideIconProvider(iconProviderFn: SciIconProviderFn \| undefined): EnvironmentProviders {\n return makeEnvironmentProviders(iconProviderFn ? [\n {\n provide: SCI_ICON_PROVIDER,\n useValue: iconProviderFn,\n multi: true,\n },\n ] : []);\n}\n\n/\n Signature of a function to provide icons.\n \n An icon provider is a function that returns the component for an icon. The component renders the icon.\n \n Alternatively, the icon provider can return a descriptor, allowing for additional configuration such as inputs.\n * Inputs are available as input properties in the component. The component can use the inputs to render the icon.\n \n Icon keys used by SCION start with the `scion.` prefix. To not replace SCION icons, the icon provider can\n * return `undefined` for icons starting with the `scion.` prefix.\n \n An icon provider can be registered via {@link provideIconProvider} function.\n \n The function can call `inject` to get any required dependencies.\n \n @param icon - The key of the icon for which to provide the icon component.\n * @returns ComponentType or {@link SciComponentDescriptor} to render the icon, or `undefined` if not provided by the icon provider.\n /\nexport type SciIconProviderFn = (icon: string) => ComponentType<unknown> \| SciComponentDescriptor \| undefined;\n","/\n * Copyright (c) 2018-2026 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/icon'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciIconComponent} from './icon.component';\nexport {provideIconProvider, type SciIconProviderFn} from './icon.provider';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -1595,8 +1595,14 @@ 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
-        take(1), takeUntilDestroyed())
+        raceWith(new Promise(resolve => {
+            if (typeof requestIdleCallback === 'function') {
+                requestIdleCallback(resolve, { timeout: 250 });
+            }
+            else {
+                setTimeout(resolve, 250); // Fallback if browser does not support `requestIdleCallback`, e.g., Safari
+            }
+        })), take(1), takeUntilDestroyed())
             .subscribe(() => {
             this.menuSize.update(size => ({ ...size, width: `${host.getBoundingClientRect().width}px` }));
         });
@@ -1728,7 +1734,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 +1768,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.