@siemens/element-ng 48.10.0 → 49.0.0-rc.2

package/fesm2022/siemens-element-ng-menu.mjs

@@ -2,12 +2,13 @@ import * as i0 from '@angular/core';
 import { inject, input, HostBinding, Directive, booleanAttribute, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/cdk/menu';
 import { CdkMenuBar, CdkTargetMenuAim, CdkMenuItemCheckbox, CDK_MENU, CdkMenuTrigger, CdkMenuItemRadio, CdkMenuItem, CdkMenu, CdkMenuGroup } from '@angular/cdk/menu';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import * as i1$1 from '@siemens/element-ng/link';
 import { SiLinkActionService, SiLinkModule } from '@siemens/element-ng/link';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
-import { addIcons, elementOk, SiIconComponent, elementRecordFilled, elementRight2 } from '@siemens/element-ng/icon';
+import { elementOk, elementRecordFilled, elementRight2 } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -21,11 +22,11 @@ class SiMenuBarDirective {
     /**
      * Sets the menu-bar disabled, i.e. sets tabindex="-1"
      */
-    disabled = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiMenuBarDirective, isStandalone: true, selector: "si-menu-bar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "tabindex": "this.tabIndex" }, styleAttribute: "gap: 1px", classAttribute: "d-inline-flex" }, hostDirectives: [{ directive: i1.CdkMenuBar }, { directive: i1.CdkTargetMenuAim }], ngImport: i0 });
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiMenuBarDirective, isStandalone: true, selector: "si-menu-bar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "tabindex": "this.tabIndex" }, styleAttribute: "gap: 1px", classAttribute: "d-inline-flex" }, hostDirectives: [{ directive: i1.CdkMenuBar }, { directive: i1.CdkTargetMenuAim }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuBarDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -39,17 +40,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         }], propDecorators: { tabIndex: [{
                 type: HostBinding,
                 args: ['tabindex']
-            }] } });
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiMenuDividerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiMenuDividerDirective, isStandalone: true, selector: "si-menu-divider", host: { classAttribute: "d-block dropdown-divider" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiMenuDividerDirective, isStandalone: true, selector: "si-menu-divider", host: { classAttribute: "d-block dropdown-divider" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuDividerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuDividerDirective, decorators: [{
             type: Directive,
             args: [{
                     // violating eslint rule, to a have clean API
@@ -77,10 +78,10 @@ class SiMenuFactoryItemGuardDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuFactoryItemGuardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiMenuFactoryItemGuardDirective, isStandalone: true, selector: "[siMenuFactoryItemGuard]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuFactoryItemGuardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiMenuFactoryItemGuardDirective, isStandalone: true, selector: "[siMenuFactoryItemGuard]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuFactoryItemGuardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuFactoryItemGuardDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[siMenuFactoryItemGuard]' }]
         }] });
@@ -90,10 +91,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiMenuHeaderDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiMenuHeaderDirective, isStandalone: true, selector: "si-menu-header", host: { classAttribute: "dropdown-item-text dropdown-header" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiMenuHeaderDirective, isStandalone: true, selector: "si-menu-header", host: { classAttribute: "dropdown-item-text dropdown-header" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     // violating eslint rule, to a have clean API
@@ -110,23 +111,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiMenuItemBase {
-    badge = input();
+    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
     /**
      * @defaultValue 'secondary'
      */
-    badgeColor = input('secondary');
-    icon = input();
+    badgeColor = input('secondary', ...(ngDevMode ? [{ debugName: "badgeColor" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     /** @defaultValue false */
-    iconBadgeDot = input(false);
+    iconBadgeDot = input(false, ...(ngDevMode ? [{ debugName: "iconBadgeDot" }] : []));
     /** @defaultValue false */
-    disabled = input(false, { transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     badgeDotHasContent = computed(() => {
         return typeof this.iconBadgeDot() === 'string' || typeof this.iconBadgeDot() === 'number';
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiMenuItemBase, isStandalone: true, inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconBadgeDot: { classPropertyName: "iconBadgeDot", publicName: "iconBadgeDot", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" }, classAttribute: "dropdown-item d-flex focus-inside" }, ngImport: i0 });
+    }, ...(ngDevMode ? [{ debugName: "badgeDotHasContent" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiMenuItemBase, isStandalone: true, inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconBadgeDot: { classPropertyName: "iconBadgeDot", publicName: "iconBadgeDot", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" }, classAttribute: "dropdown-item d-flex focus-inside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemBase, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -134,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[class.disabled]': 'disabled()'
                     }
                 }]
-        }] });
+        }], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconBadgeDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBadgeDot", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -147,19 +148,19 @@ class SiMenuItemCheckboxComponent extends SiMenuItemBase {
     get checked() {
         return this.cdkMenuItemCheckbox.checked;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiMenuItemCheckboxComponent, isStandalone: true, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]", usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "checked", "cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: i1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [ngClass]=\"'bg-' + badgeColor()\">{{ badge() }}</span>\n    }\n    @if (checked && !hideCheckmark) {\n      <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMenuItemCheckboxComponent, isStandalone: true, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]", usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "checked", "cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: i1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [class]=\"`bg-${badgeColor()}`\">{{ badge() }}</span>\n    }\n    @if (checked && !hideCheckmark) {\n      <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-menu-item-checkbox, button[si-menu-item-checkbox]', imports: [NgClass, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'si-menu-item-checkbox, button[si-menu-item-checkbox]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: CdkMenuItemCheckbox,
                             inputs: ['cdkMenuItemChecked: checked', 'cdkMenuItemDisabled: disabled'],
                             outputs: ['cdkMenuItemTriggered: triggered']
                         },
                         CdkMenuTrigger
-                    ], template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [ngClass]=\"'bg-' + badgeColor()\">{{ badge() }}</span>\n    }\n    @if (checked && !hideCheckmark) {\n      <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
+                    ], template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [class]=\"`bg-${badgeColor()}`\">{{ badge() }}</span>\n    }\n    @if (checked && !hideCheckmark) {\n      <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
         }] });
 
 /**
@@ -172,19 +173,19 @@ class SiMenuItemRadioComponent extends SiMenuItemBase {
     get checked() {
         return this.cdkMenuItemRadio.checked;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiMenuItemRadioComponent, isStandalone: true, selector: "si-menu-item-radio", usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItemRadio, inputs: ["cdkMenuItemChecked", "checked", "cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: i1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [ngClass]=\"'bg-' + badgeColor()\">{{ badge() }}</span>\n    }\n    @if (checked) {\n      <si-icon class=\"icon-small me-1\" [icon]=\"icons.elementRecordFilled\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMenuItemRadioComponent, isStandalone: true, selector: "si-menu-item-radio", usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItemRadio, inputs: ["cdkMenuItemChecked", "checked", "cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: i1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [class]=\"`bg-${badgeColor()}`\">{{ badge() }}</span>\n    }\n    @if (checked) {\n      <si-icon class=\"icon-sm me-1\" [icon]=\"icons.elementRecordFilled\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-menu-item-radio', imports: [NgClass, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'si-menu-item-radio', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: CdkMenuItemRadio,
                             inputs: ['cdkMenuItemChecked: checked', 'cdkMenuItemDisabled: disabled'],
                             outputs: ['cdkMenuItemTriggered: triggered']
                         },
                         CdkMenuTrigger
-                    ], template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [ngClass]=\"'bg-' + badgeColor()\">{{ badge() }}</span>\n    }\n    @if (checked) {\n      <si-icon class=\"icon-small me-1\" [icon]=\"icons.elementRecordFilled\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
+                    ], template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [class]=\"`bg-${badgeColor()}`\">{{ badge() }}</span>\n    }\n    @if (checked) {\n      <si-icon class=\"icon-sm me-1\" [icon]=\"icons.elementRecordFilled\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
         }] });
 
 /**
@@ -197,18 +198,18 @@ class SiMenuItemComponent extends SiMenuItemBase {
     get hasSubmenu() {
         return !!this.menuTrigger?.menuTemplateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiMenuItemComponent, isStandalone: true, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]", usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [ngClass]=\"'bg-' + badgeColor()\">{{ badge() }}</span>\n    }\n    <ng-content select=\".end\" />\n    @if (hasSubmenu) {\n      <si-icon class=\"icon submenu\" [icon]=\"icons.elementRight2\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMenuItemComponent, isStandalone: true, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]", usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [class]=\"`bg-${badgeColor()}`\">{{ badge() }}</span>\n    }\n    <ng-content select=\".end\" />\n    @if (hasSubmenu) {\n      <si-icon class=\"icon submenu\" [icon]=\"icons.elementRight2\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-menu-item, a[si-menu-item], button[si-menu-item]', imports: [NgClass, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'si-menu-item, a[si-menu-item], button[si-menu-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: CdkMenuItem,
                             inputs: ['cdkMenuItemDisabled: disabled'],
                             outputs: ['cdkMenuItemTriggered: triggered']
                         }
-                    ], template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [ngClass]=\"'bg-' + badgeColor()\">{{ badge() }}</span>\n    }\n    <ng-content select=\".end\" />\n    @if (hasSubmenu) {\n      <si-icon class=\"icon submenu\" [icon]=\"icons.elementRight2\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
+                    ], template: "<div class=\"item-wrapper\">\n  @let iconValue = icon();\n  @if (iconValue && !badgeDotHasContent()) {\n    <si-icon class=\"icon\" [class.badge-dot]=\"iconBadgeDot()\" [icon]=\"iconValue\" />\n  } @else if (iconValue && badgeDotHasContent()) {\n    <si-icon class=\"icon badge-dot\" [icon]=\"iconValue\" />\n    <span class=\"badge-text\">{{ iconBadgeDot() }}</span>\n  }\n  <span class=\"item-title\">\n    <ng-content />\n  </span>\n  <div class=\"item-end ms-2 d-flex me-n3 gap-1\">\n    @if (badge()) {\n      <span class=\"mx-0 badge\" [class]=\"`bg-${badgeColor()}`\">{{ badge() }}</span>\n    }\n    <ng-content select=\".end\" />\n    @if (hasSubmenu) {\n      <si-icon class=\"icon submenu\" [icon]=\"icons.elementRight2\" />\n    }\n  </div>\n</div>\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
         }] });
 
 /**
@@ -216,10 +217,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiMenuDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiMenuDirective, isStandalone: true, selector: "si-menu", host: { classAttribute: "d-block dropdown-menu position-static" }, hostDirectives: [{ directive: i1.CdkMenu }, { directive: i1.CdkTargetMenuAim }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiMenuDirective, isStandalone: true, selector: "si-menu", host: { classAttribute: "d-block dropdown-menu position-static" }, hostDirectives: [{ directive: i1.CdkMenu }, { directive: i1.CdkTargetMenuAim }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     // violating eslint rule, to a have clean API
@@ -237,8 +238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiMenuFactoryComponent {
-    items = input();
-    actionParam = input();
+    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
     linkActionService = inject(SiLinkActionService, { optional: true });
     menuActionService = inject(SiMenuActionService, { optional: true });
     isNewItemStyle(item) {
@@ -263,10 +264,10 @@ class SiMenuFactoryComponent {
             this.menuActionService?.actionTriggered(item, this.actionParam());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuFactoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiMenuFactoryComponent, isStandalone: true, selector: "si-menu-factory", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<si-menu>\n  @for (item of items(); track item) {\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n  }\n  <ng-template #itemTemplate let-item siMenuFactoryItemGuard>\n    @if (isNewItemStyle(item)) {\n      @switch (item.type) {\n        @case ('group') {\n          <si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [cdkMenuTriggerFor]=\"submenu\"\n            [cdkMenuTriggerData]=\"{ $implicit: item.children }\"\n            >{{ item.label | translate }}\n          </si-menu-item>\n          <ng-template #submenu>\n            <si-menu-factory [items]=\"item.children\" [actionParam]=\"actionParam()\" />\n          </ng-template>\n        }\n        @case ('action') {\n          <si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item>\n        }\n        @case ('router-link') {\n          <a\n            si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n            >{{ item.label | translate }}\n          </a>\n        }\n        @case ('link') {\n          <a\n            si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [href]=\"item.href\"\n            [target]=\"item.target\"\n            >{{ item.label | translate }}\n          </a>\n        }\n        @case ('radio-group') {\n          <div cdkMenuGroup>\n            @for (radioItem of item.children; track radioItem) {\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: radioItem }\" />\n            }\n          </div>\n        }\n        @case ('radio') {\n          <si-menu-item-radio\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [checked]=\"item.checked\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item-radio>\n        }\n        @case ('checkbox') {\n          <si-menu-item-checkbox\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [checked]=\"item.checked\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item-checkbox>\n        }\n        @case ('header') {\n          <si-menu-header>{{ item.label | translate }}</si-menu-header>\n        }\n        @case ('divider') {\n          <si-menu-divider />\n        }\n      }\n    } @else if (isLegacyItemStyle(item)) {\n      @switch (item.type) {\n        @case ('radio') {\n          <si-menu-item-radio\n            [attr.data-id]=\"item.id\"\n            [checked]=\"item.selectionState === 'radio'\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [icon]=\"item.icon\"\n            [disabled]=\"item.disabled\"\n            [iconBadgeDot]=\"item.badgeDot\"\n            (triggered)=\"radioOrCheckboxTriggered(item)\"\n          >\n            {{ item.title | translate }}\n          </si-menu-item-radio>\n        }\n        @case ('check') {\n          <si-menu-item-checkbox\n            [attr.data-id]=\"item.id\"\n            [checked]=\"item.selectionState === 'check'\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [icon]=\"item.icon\"\n            [disabled]=\"item.disabled\"\n            [iconBadgeDot]=\"item.badgeDot\"\n            (triggered)=\"radioOrCheckboxTriggered(item)\"\n          >\n            {{ item.title | translate }}\n          </si-menu-item-checkbox>\n        }\n        @default {\n          @if (item.isHeading) {\n            <div class=\"dropdown-item-text dropdown-header\">\n              {{ item.title | translate }}\n            </div>\n          } @else {\n            @if (item.title !== '-') {\n              <a\n                si-menu-item\n                activeClass=\"active\"\n                [attr.data-id]=\"item.id\"\n                [badge]=\"item.badge\"\n                [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n                [icon]=\"item.icon\"\n                [disabled]=\"item.disabled\"\n                [siLink]=\"item\"\n                [iconBadgeDot]=\"item.badgeDot\"\n                [actionParam]=\"actionParam()\"\n                [cdkMenuTriggerFor]=\"item.items ? submenu : null\"\n                [cdkMenuTriggerData]=\"item\"\n              >\n                {{ item.title | translate }}\n              </a>\n              <ng-template #submenu>\n                <si-menu-factory [items]=\"item.items!\" [actionParam]=\"actionParam()\" />\n              </ng-template>\n            } @else {\n              <div class=\"dropdown-divider\"></div>\n            }\n          }\n        }\n      }\n    }\n  </ng-template>\n</si-menu>\n", dependencies: [{ kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "component", type: SiMenuItemRadioComponent, selector: "si-menu-item-radio" }, { kind: "component", type: SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "directive", type: SiMenuHeaderDirective, selector: "si-menu-header" }, { kind: "directive", type: SiMenuDividerDirective, selector: "si-menu-divider" }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i1$1.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: CdkMenuGroup, selector: "[cdkMenuGroup]", exportAs: ["cdkMenuGroup"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SiMenuFactoryItemGuardDirective, selector: "[siMenuFactoryItemGuard]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuFactoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMenuFactoryComponent, isStandalone: true, selector: "si-menu-factory", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<si-menu>\n  @for (item of items(); track item) {\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n  }\n  <ng-template #itemTemplate let-item siMenuFactoryItemGuard>\n    @if (isNewItemStyle(item)) {\n      @switch (item.type) {\n        @case ('group') {\n          <si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [cdkMenuTriggerFor]=\"submenu\"\n            [cdkMenuTriggerData]=\"{ $implicit: item.children }\"\n            >{{ item.label | translate }}\n          </si-menu-item>\n          <ng-template #submenu>\n            <si-menu-factory [items]=\"item.children\" [actionParam]=\"actionParam()\" />\n          </ng-template>\n        }\n        @case ('action') {\n          <si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item>\n        }\n        @case ('router-link') {\n          <a\n            si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n            >{{ item.label | translate }}\n          </a>\n        }\n        @case ('link') {\n          <a\n            si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [href]=\"item.href\"\n            [target]=\"item.target\"\n            >{{ item.label | translate }}\n          </a>\n        }\n        @case ('radio-group') {\n          <div cdkMenuGroup>\n            @for (radioItem of item.children; track radioItem) {\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: radioItem }\" />\n            }\n          </div>\n        }\n        @case ('radio') {\n          <si-menu-item-radio\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [checked]=\"item.checked\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item-radio>\n        }\n        @case ('checkbox') {\n          <si-menu-item-checkbox\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [checked]=\"item.checked\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item-checkbox>\n        }\n        @case ('header') {\n          <si-menu-header>{{ item.label | translate }}</si-menu-header>\n        }\n        @case ('divider') {\n          <si-menu-divider />\n        }\n      }\n    } @else if (isLegacyItemStyle(item)) {\n      @switch (item.type) {\n        @case ('radio') {\n          <si-menu-item-radio\n            [attr.data-id]=\"item.id\"\n            [checked]=\"item.selectionState === 'radio'\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [icon]=\"item.icon\"\n            [disabled]=\"item.disabled\"\n            [iconBadgeDot]=\"item.badgeDot\"\n            (triggered)=\"radioOrCheckboxTriggered(item)\"\n          >\n            {{ item.title | translate }}\n          </si-menu-item-radio>\n        }\n        @case ('check') {\n          <si-menu-item-checkbox\n            [attr.data-id]=\"item.id\"\n            [checked]=\"item.selectionState === 'check'\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [icon]=\"item.icon\"\n            [disabled]=\"item.disabled\"\n            [iconBadgeDot]=\"item.badgeDot\"\n            (triggered)=\"radioOrCheckboxTriggered(item)\"\n          >\n            {{ item.title | translate }}\n          </si-menu-item-checkbox>\n        }\n        @default {\n          @if (item.isHeading) {\n            <div class=\"dropdown-item-text dropdown-header\">\n              {{ item.title | translate }}\n            </div>\n          } @else {\n            @if (item.title !== '-') {\n              <a\n                si-menu-item\n                activeClass=\"active\"\n                [attr.data-id]=\"item.id\"\n                [badge]=\"item.badge\"\n                [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n                [icon]=\"item.icon\"\n                [disabled]=\"item.disabled\"\n                [siLink]=\"item\"\n                [iconBadgeDot]=\"item.badgeDot\"\n                [actionParam]=\"actionParam()\"\n                [cdkMenuTriggerFor]=\"item.items ? submenu : null\"\n                [cdkMenuTriggerData]=\"item\"\n              >\n                {{ item.title | translate }}\n              </a>\n              <ng-template #submenu>\n                <si-menu-factory [items]=\"item.items!\" [actionParam]=\"actionParam()\" />\n              </ng-template>\n            } @else {\n              <div class=\"dropdown-divider\"></div>\n            }\n          }\n        }\n      }\n    }\n  </ng-template>\n</si-menu>\n", dependencies: [{ kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "component", type: SiMenuItemRadioComponent, selector: "si-menu-item-radio" }, { kind: "component", type: SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "directive", type: SiMenuHeaderDirective, selector: "si-menu-header" }, { kind: "directive", type: SiMenuDividerDirective, selector: "si-menu-divider" }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i1$1.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenuGroup, selector: "[cdkMenuGroup]", exportAs: ["cdkMenuGroup"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SiMenuFactoryItemGuardDirective, selector: "[siMenuFactoryItemGuard]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuFactoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuFactoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-menu-factory', imports: [
                         SiMenuDirective,
@@ -283,15 +284,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         RouterLink,
                         SiMenuFactoryItemGuardDirective
                     ], template: "<si-menu>\n  @for (item of items(); track item) {\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n  }\n  <ng-template #itemTemplate let-item siMenuFactoryItemGuard>\n    @if (isNewItemStyle(item)) {\n      @switch (item.type) {\n        @case ('group') {\n          <si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [cdkMenuTriggerFor]=\"submenu\"\n            [cdkMenuTriggerData]=\"{ $implicit: item.children }\"\n            >{{ item.label | translate }}\n          </si-menu-item>\n          <ng-template #submenu>\n            <si-menu-factory [items]=\"item.children\" [actionParam]=\"actionParam()\" />\n          </ng-template>\n        }\n        @case ('action') {\n          <si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item>\n        }\n        @case ('router-link') {\n          <a\n            si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n            >{{ item.label | translate }}\n          </a>\n        }\n        @case ('link') {\n          <a\n            si-menu-item\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [href]=\"item.href\"\n            [target]=\"item.target\"\n            >{{ item.label | translate }}\n          </a>\n        }\n        @case ('radio-group') {\n          <div cdkMenuGroup>\n            @for (radioItem of item.children; track radioItem) {\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: radioItem }\" />\n            }\n          </div>\n        }\n        @case ('radio') {\n          <si-menu-item-radio\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [checked]=\"item.checked\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item-radio>\n        }\n        @case ('checkbox') {\n          <si-menu-item-checkbox\n            [attr.data-id]=\"item.id\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [disabled]=\"item.disabled\"\n            [icon]=\"item.icon\"\n            [iconBadgeDot]=\"item.iconBadge\"\n            [checked]=\"item.checked\"\n            (triggered)=\"runAction(item)\"\n            >{{ item.label | translate }}\n          </si-menu-item-checkbox>\n        }\n        @case ('header') {\n          <si-menu-header>{{ item.label | translate }}</si-menu-header>\n        }\n        @case ('divider') {\n          <si-menu-divider />\n        }\n      }\n    } @else if (isLegacyItemStyle(item)) {\n      @switch (item.type) {\n        @case ('radio') {\n          <si-menu-item-radio\n            [attr.data-id]=\"item.id\"\n            [checked]=\"item.selectionState === 'radio'\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [icon]=\"item.icon\"\n            [disabled]=\"item.disabled\"\n            [iconBadgeDot]=\"item.badgeDot\"\n            (triggered)=\"radioOrCheckboxTriggered(item)\"\n          >\n            {{ item.title | translate }}\n          </si-menu-item-radio>\n        }\n        @case ('check') {\n          <si-menu-item-checkbox\n            [attr.data-id]=\"item.id\"\n            [checked]=\"item.selectionState === 'check'\"\n            [badge]=\"item.badge\"\n            [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n            [icon]=\"item.icon\"\n            [disabled]=\"item.disabled\"\n            [iconBadgeDot]=\"item.badgeDot\"\n            (triggered)=\"radioOrCheckboxTriggered(item)\"\n          >\n            {{ item.title | translate }}\n          </si-menu-item-checkbox>\n        }\n        @default {\n          @if (item.isHeading) {\n            <div class=\"dropdown-item-text dropdown-header\">\n              {{ item.title | translate }}\n            </div>\n          } @else {\n            @if (item.title !== '-') {\n              <a\n                si-menu-item\n                activeClass=\"active\"\n                [attr.data-id]=\"item.id\"\n                [badge]=\"item.badge\"\n                [badgeColor]=\"item.badgeColor ?? 'secondary'\"\n                [icon]=\"item.icon\"\n                [disabled]=\"item.disabled\"\n                [siLink]=\"item\"\n                [iconBadgeDot]=\"item.badgeDot\"\n                [actionParam]=\"actionParam()\"\n                [cdkMenuTriggerFor]=\"item.items ? submenu : null\"\n                [cdkMenuTriggerData]=\"item\"\n              >\n                {{ item.title | translate }}\n              </a>\n              <ng-template #submenu>\n                <si-menu-factory [items]=\"item.items!\" [actionParam]=\"actionParam()\" />\n              </ng-template>\n            } @else {\n              <div class=\"dropdown-divider\"></div>\n            }\n          }\n        }\n      }\n    }\n  </ng-template>\n</si-menu>\n" }]
-        }] });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiMenuModule, imports: [SiMenuBarDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiMenuModule, imports: [SiMenuBarDirective,
             SiMenuDirective,
             SiMenuDividerDirective,
             SiMenuFactoryComponent,
@@ -306,12 +307,12 @@ class SiMenuModule {
             SiMenuItemCheckboxComponent,
             SiMenuItemComponent,
             SiMenuItemRadioComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuModule, imports: [SiMenuFactoryComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuModule, imports: [SiMenuFactoryComponent,
             SiMenuItemCheckboxComponent,
             SiMenuItemComponent,
             SiMenuItemRadioComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [