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

package/fesm2022/siemens-element-ng-content-action-bar.mjs

@@ -3,13 +3,15 @@ import { CdkMenuBar, CdkMenuModule } from '@angular/cdk/menu';
 import * as i0 from '@angular/core';
 import { input, ChangeDetectionStrategy, Component, booleanAttribute, viewChild, ElementRef, computed, linkedSignal, inject, NgModule } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { elementOptionsVertical, elementCancel } from '@siemens/element-icons';
 import * as i3 from '@siemens/element-ng/auto-collapsable-list';
 import { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';
-import { SiIconComponent, addIcons, elementOptionsVertical, elementCancel } from '@siemens/element-ng/icon';
+import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
 import * as i4 from '@siemens/element-ng/link';
 import { SiLinkModule } from '@siemens/element-ng/link';
 import * as i1 from '@siemens/element-ng/menu';
 import { SiMenuActionService, SiMenuModule } from '@siemens/element-ng/menu';
+import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
@@ -17,14 +19,14 @@ import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
  * SPDX-License-Identifier: MIT
  */
 class SiContentActionBarToggleComponent {
-    icon = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiContentActionBarToggleComponent, isStandalone: true, selector: "[si-content-action-bar-toggle]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dropdown-item flex-grow-0 focus-inside" }, ngImport: i0, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\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: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiContentActionBarToggleComponent, isStandalone: true, selector: "[si-content-action-bar-toggle]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dropdown-item flex-grow-0 focus-inside" }, ngImport: i0, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\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: SiContentActionBarToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[si-content-action-bar-toggle]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'dropdown-item flex-grow-0 focus-inside' }, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\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"] }]
-        }] });
+            args: [{ selector: '[si-content-action-bar-toggle]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'dropdown-item flex-grow-0 focus-inside' }, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\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"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -34,23 +36,23 @@ class SiContentActionBarComponent {
     /**
      * List of primary actions. Supports up to **4** actions and omits additional ones.
      */
-    primaryActions = input();
+    primaryActions = input(...(ngDevMode ? [undefined, { debugName: "primaryActions" }] : []));
     /**
      * List of secondary actions.
      */
-    secondaryActions = input();
+    secondaryActions = input(...(ngDevMode ? [undefined, { debugName: "secondaryActions" }] : []));
     /**
      * A param that will be passed to the `action` in the primary/secondary actions.
      * This allows to re-use the same primary/secondary action arrays across rows
      * in a table.
      */
-    actionParam = input();
+    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
     /**
      * Selection of view type as 'collapsible', 'expanded' or 'mobile'.
      *
      * @defaultValue 'expanded'
      */
-    viewType = input('expanded');
+    viewType = input('expanded', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
     /**
      * Toggle icon aria-label, required for a11y
      *
@@ -59,7 +61,7 @@ class SiContentActionBarComponent {
      * t(() => $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`)
      * ```
      */
-    toggleItemLabel = input(t(() => $localize `:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`));
+    toggleItemLabel = input(t(() => $localize `:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : []));
     /**
      * Option to remove all icons from dropdown menus of the content action bar.
      *
@@ -72,17 +74,15 @@ class SiContentActionBarComponent {
      *
      * @defaultValue false
      */
-    preventIconsInDropdownMenus = input(false, { transform: booleanAttribute });
+    preventIconsInDropdownMenus = input(false, { ...(ngDevMode ? { debugName: "preventIconsInDropdownMenus" } : {}), transform: booleanAttribute });
     /**
      * Disables the whole content-action-bar.
      *
      * @defaultValue false
      */
-    disabled = input(false, { transform: booleanAttribute });
-    expandElement = viewChild('expandElement', { read: ElementRef });
-    menuBarElement = viewChild(CdkMenuBar, {
-        read: ElementRef
-    });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    expandElement = viewChild('expandElement', { ...(ngDevMode ? { debugName: "expandElement" } : {}), read: ElementRef });
+    menuBarElement = viewChild(CdkMenuBar, { ...(ngDevMode ? { debugName: "menuBarElement" } : {}), read: ElementRef });
     mobileActions = computed(() => {
         const primaryActions = this.primaryActions();
         const secondaryActions = this.secondaryActions();
@@ -104,7 +104,7 @@ class SiContentActionBarComponent {
             }));
         }
         return actions;
-    });
+    }, ...(ngDevMode ? [{ debugName: "mobileActions" }] : []));
     secondaryActionsInternal = computed(() => {
         let secondaryActions = this.secondaryActions();
         if (this.preventIconsInDropdownMenus()) {
@@ -114,9 +114,9 @@ class SiContentActionBarComponent {
             }));
         }
         return secondaryActions;
-    });
+    }, ...(ngDevMode ? [{ debugName: "secondaryActionsInternal" }] : []));
     icons = addIcons({ elementCancel, elementOptionsVertical });
-    expanded = linkedSignal(() => this.viewType() === 'expanded');
+    expanded = linkedSignal(() => this.viewType() === 'expanded', ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     parentElement;
     elementRef = inject(ElementRef);
     menuActionService = inject(SiMenuActionService, { optional: true });
@@ -146,10 +146,10 @@ class SiContentActionBarComponent {
             this.menuActionService?.actionTriggered(item, this.actionParam());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiContentActionBarComponent, isStandalone: true, selector: "si-content-action-bar", inputs: { primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, preventIconsInDropdownMenus: { classPropertyName: "preventIconsInDropdownMenus", publicName: "preventIconsInDropdownMenus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "viewType()" } }, viewQueries: [{ propertyName: "expandElement", first: true, predicate: ["expandElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "menuBarElement", first: true, predicate: CdkMenuBar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"], dependencies: [{ kind: "ngmodule", type: SiMenuModule }, { kind: "directive", type: i1.SiMenuBarDirective, selector: "si-menu-bar", inputs: ["disabled"] }, { kind: "component", type: i1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: i1.SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "component", type: i1.SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i2.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i3.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i3.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i3.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i4.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiContentActionBarToggleComponent, selector: "[si-content-action-bar-toggle]", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiContentActionBarComponent, isStandalone: true, selector: "si-content-action-bar", inputs: { primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, preventIconsInDropdownMenus: { classPropertyName: "preventIconsInDropdownMenus", publicName: "preventIconsInDropdownMenus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "viewType()" } }, viewQueries: [{ propertyName: "expandElement", first: true, predicate: ["expandElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "menuBarElement", first: true, predicate: CdkMenuBar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"], dependencies: [{ kind: "ngmodule", type: SiMenuModule }, { kind: "directive", type: i1.SiMenuBarDirective, selector: "si-menu-bar", inputs: ["disabled"] }, { kind: "component", type: i1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: i1.SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "component", type: i1.SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i2.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i3.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i3.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i3.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i4.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiContentActionBarToggleComponent, selector: "[si-content-action-bar-toggle]", inputs: ["icon"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-content-action-bar', imports: [
                         SiMenuModule,
@@ -158,22 +158,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiTranslatePipe,
                         SiLinkModule,
                         SiContentActionBarToggleComponent,
+                        SiTooltipDirective,
                         RouterLink
                     ], host: {
                         '[class]': 'viewType()'
-                    }, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"] }]
-        }] });
+                    }, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"] }]
+        }], propDecorators: { primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], preventIconsInDropdownMenus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventIconsInDropdownMenus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expandElement: [{ type: i0.ViewChild, args: ['expandElement', { ...{ read: ElementRef }, isSignal: true }] }], menuBarElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuBar), { ...{
+                            read: ElementRef
+                        }, isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiContentActionBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarModule, imports: [SiContentActionBarComponent], exports: [SiContentActionBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarModule, imports: [SiContentActionBarComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, imports: [SiContentActionBarComponent], exports: [SiContentActionBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, imports: [SiContentActionBarComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiContentActionBarComponent],

package/fesm2022/siemens-element-ng-content-action-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-content-action-bar.mjs","sources":["../../../../projects/element-ng/content-action-bar/si-content-action-bar-toggle.component.ts","../../../../projects/element-ng/content-action-bar/si-content-action-bar-toggle.component.html","../../../../projects/element-ng/content-action-bar/si-content-action-bar.component.ts","../../../../projects/element-ng/content-action-bar/si-content-action-bar.component.html","../../../../projects/element-ng/content-action-bar/si-content-action-bar.module.ts","../../../../projects/element-ng/content-action-bar/index.ts","../../../../projects/element-ng/content-action-bar/siemens-element-ng-content-action-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: '[si-content-action-bar-toggle]',\n  imports: [SiIconComponent],\n  templateUrl: './si-content-action-bar-toggle.component.html',\n  styleUrl: '../menu/si-menu-item.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'dropdown-item flex-grow-0 focus-inside' }\n})\nexport class SiContentActionBarToggleComponent {\n  readonly icon = input.required<string>();\n}\n","<si-icon class=\"icon\" [icon]=\"icon()\" />\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkMenuBar, CdkMenuModule } from '@angular/cdk/menu';\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  viewChild\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport { addIcons, elementCancel, elementOptionsVertical } from '@siemens/element-ng/icon';\nimport { SiLinkModule } from '@siemens/element-ng/link';\nimport {\n  MenuItem,\n  MenuItemAction,\n  MenuItemCheckbox,\n  MenuItemRadio,\n  SiMenuActionService,\n  SiMenuModule\n} from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nimport { SiContentActionBarToggleComponent } from './si-content-action-bar-toggle.component';\nimport { ContentActionBarMainItem, ViewType } from './si-content-action-bar.model';\n\n@Component({\n  selector: 'si-content-action-bar',\n  imports: [\n    SiMenuModule,\n    CdkMenuModule,\n    SiAutoCollapsableListModule,\n    SiTranslatePipe,\n    SiLinkModule,\n    SiContentActionBarToggleComponent,\n    RouterLink\n  ],\n  templateUrl: './si-content-action-bar.component.html',\n  styleUrl: './si-content-action-bar.component.scss',\n  host: {\n    '[class]': 'viewType()'\n  }\n})\nexport class SiContentActionBarComponent implements AfterViewInit {\n  /**\n   * List of primary actions. Supports up to **4** actions and omits additional ones.\n   */\n  readonly primaryActions = input<readonly (MenuItemLegacy | ContentActionBarMainItem)[]>();\n  /**\n   * List of secondary actions.\n   */\n  readonly secondaryActions = input<readonly (MenuItemLegacy | MenuItem)[]>();\n  /**\n   * A param that will be passed to the `action` in the primary/secondary actions.\n   * This allows to re-use the same primary/secondary action arrays across rows\n   * in a table.\n   */\n  readonly actionParam = input<any>();\n  /**\n   * Selection of view type as 'collapsible', 'expanded' or 'mobile'.\n   *\n   * @defaultValue 'expanded'\n   */\n  readonly viewType = input<ViewType>('expanded');\n  /**\n   * Toggle icon aria-label, required for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`)\n   * ```\n   */\n  readonly toggleItemLabel = input(t(() => $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`));\n  /**\n   * Option to remove all icons from dropdown menus of the content action bar.\n   *\n   * Some apps provide only few actions with icons, located in the set of primary actions.\n   * The icons are visible in the `collapsible` and `expanded` view type. On reduced space,\n   * primary actions are relocated in the same dropdown menu as the secondary actions. The\n   * dropdown menu can look unbalanced, if a large number of secondary actions without\n   * icons are presented with few actions with icons. This option balances the look and feel\n   * by removing all icons from actions in the dropdown menu.\n   *\n   * @defaultValue false\n   */\n  readonly preventIconsInDropdownMenus = input(false, { transform: booleanAttribute });\n  /**\n   * Disables the whole content-action-bar.\n   *\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  private readonly expandElement = viewChild<\n    SiContentActionBarToggleComponent,\n    ElementRef<HTMLElement>\n  >('expandElement', { read: ElementRef });\n  private readonly menuBarElement = viewChild<CdkMenuBar, ElementRef<HTMLDivElement>>(CdkMenuBar, {\n    read: ElementRef\n  });\n\n  protected readonly mobileActions = computed(() => {\n    const primaryActions = this.primaryActions();\n    const secondaryActions = this.secondaryActions();\n    const preventIcons = this.preventIconsInDropdownMenus();\n    let actions: readonly (MenuItemLegacy | MenuItem)[] = [];\n    if (primaryActions?.length && secondaryActions?.length) {\n      actions = [...primaryActions, { title: '-' }, ...secondaryActions];\n    } else if (primaryActions?.length) {\n      actions = primaryActions;\n    } else if (secondaryActions?.length) {\n      actions = secondaryActions;\n    }\n    if (preventIcons) {\n      actions = actions.map(action => ({\n        ...action,\n        icon: undefined\n      }));\n    }\n    return actions;\n  });\n  protected readonly secondaryActionsInternal = computed(() => {\n    let secondaryActions = this.secondaryActions();\n    if (this.preventIconsInDropdownMenus()) {\n      secondaryActions = secondaryActions?.map(action => ({\n        ...action,\n        icon: undefined\n      }));\n    }\n    return secondaryActions;\n  });\n  protected readonly icons = addIcons({ elementCancel, elementOptionsVertical });\n  protected readonly expanded = linkedSignal(() => this.viewType() === 'expanded');\n  protected parentElement?: HTMLElement | null;\n\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private menuActionService = inject(SiMenuActionService, { optional: true });\n\n  ngAfterViewInit(): void {\n    setTimeout(() => {\n      if (this.parentElement !== this.elementRef.nativeElement.parentElement) {\n        this.parentElement = this.elementRef.nativeElement.parentElement;\n      }\n    });\n  }\n\n  protected expand(): void {\n    this.expanded.set(true);\n    setTimeout(() => this.menuBarElement()?.nativeElement.focus());\n  }\n\n  protected collapse(): void {\n    this.expanded.set(false);\n    setTimeout(() => this.expandElement()?.nativeElement.focus());\n  }\n\n  protected isNewItemStyle(\n    item: MenuItemLegacy | ContentActionBarMainItem\n  ): item is ContentActionBarMainItem {\n    return 'label' in item;\n  }\n\n  protected runAction(item: MenuItemAction | MenuItemRadio | MenuItemCheckbox): void {\n    if (typeof item.action === 'function') {\n      item.action(this.actionParam(), item as any); // typescript cannot level down the item type properly\n    }\n\n    if (typeof item.action === 'string') {\n      this.menuActionService?.actionTriggered(item, this.actionParam());\n    }\n  }\n}\n","@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiContentActionBarComponent } from './si-content-action-bar.component';\n\n@NgModule({\n  imports: [SiContentActionBarComponent],\n  exports: [SiContentActionBarComponent]\n})\nexport class SiContentActionBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-content-action-bar.component';\nexport * from './si-content-action-bar.module';\nexport * from './si-content-action-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-content-action-bar.mjs","sources":["../../../../projects/element-ng/content-action-bar/si-content-action-bar-toggle.component.ts","../../../../projects/element-ng/content-action-bar/si-content-action-bar-toggle.component.html","../../../../projects/element-ng/content-action-bar/si-content-action-bar.component.ts","../../../../projects/element-ng/content-action-bar/si-content-action-bar.component.html","../../../../projects/element-ng/content-action-bar/si-content-action-bar.module.ts","../../../../projects/element-ng/content-action-bar/index.ts","../../../../projects/element-ng/content-action-bar/siemens-element-ng-content-action-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: '[si-content-action-bar-toggle]',\n  imports: [SiIconComponent],\n  templateUrl: './si-content-action-bar-toggle.component.html',\n  styleUrl: '../menu/si-menu-item.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'dropdown-item flex-grow-0 focus-inside' }\n})\nexport class SiContentActionBarToggleComponent {\n  readonly icon = input.required<string>();\n}\n","<si-icon class=\"icon\" [icon]=\"icon()\" />\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkMenuBar, CdkMenuModule } from '@angular/cdk/menu';\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  viewChild\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { elementCancel, elementOptionsVertical } from '@siemens/element-icons';\nimport { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport { addIcons } from '@siemens/element-ng/icon';\nimport { SiLinkModule } from '@siemens/element-ng/link';\nimport {\n  MenuItem,\n  MenuItemAction,\n  MenuItemCheckbox,\n  MenuItemRadio,\n  SiMenuActionService,\n  SiMenuModule\n} from '@siemens/element-ng/menu';\nimport { SiTooltipDirective } from '@siemens/element-ng/tooltip';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nimport { SiContentActionBarToggleComponent } from './si-content-action-bar-toggle.component';\nimport { ContentActionBarMainItem, ViewType } from './si-content-action-bar.model';\n\n@Component({\n  selector: 'si-content-action-bar',\n  imports: [\n    SiMenuModule,\n    CdkMenuModule,\n    SiAutoCollapsableListModule,\n    SiTranslatePipe,\n    SiLinkModule,\n    SiContentActionBarToggleComponent,\n    SiTooltipDirective,\n    RouterLink\n  ],\n  templateUrl: './si-content-action-bar.component.html',\n  styleUrl: './si-content-action-bar.component.scss',\n  host: {\n    '[class]': 'viewType()'\n  }\n})\nexport class SiContentActionBarComponent implements AfterViewInit {\n  /**\n   * List of primary actions. Supports up to **4** actions and omits additional ones.\n   */\n  readonly primaryActions = input<readonly (MenuItemLegacy | ContentActionBarMainItem)[]>();\n  /**\n   * List of secondary actions.\n   */\n  readonly secondaryActions = input<readonly (MenuItemLegacy | MenuItem)[]>();\n  /**\n   * A param that will be passed to the `action` in the primary/secondary actions.\n   * This allows to re-use the same primary/secondary action arrays across rows\n   * in a table.\n   */\n  readonly actionParam = input<any>();\n  /**\n   * Selection of view type as 'collapsible', 'expanded' or 'mobile'.\n   *\n   * @defaultValue 'expanded'\n   */\n  readonly viewType = input<ViewType>('expanded');\n  /**\n   * Toggle icon aria-label, required for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`)\n   * ```\n   */\n  readonly toggleItemLabel = input(t(() => $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`));\n  /**\n   * Option to remove all icons from dropdown menus of the content action bar.\n   *\n   * Some apps provide only few actions with icons, located in the set of primary actions.\n   * The icons are visible in the `collapsible` and `expanded` view type. On reduced space,\n   * primary actions are relocated in the same dropdown menu as the secondary actions. The\n   * dropdown menu can look unbalanced, if a large number of secondary actions without\n   * icons are presented with few actions with icons. This option balances the look and feel\n   * by removing all icons from actions in the dropdown menu.\n   *\n   * @defaultValue false\n   */\n  readonly preventIconsInDropdownMenus = input(false, { transform: booleanAttribute });\n  /**\n   * Disables the whole content-action-bar.\n   *\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  private readonly expandElement = viewChild<\n    SiContentActionBarToggleComponent,\n    ElementRef<HTMLElement>\n  >('expandElement', { read: ElementRef });\n  private readonly menuBarElement = viewChild<CdkMenuBar, ElementRef<HTMLDivElement>>(CdkMenuBar, {\n    read: ElementRef\n  });\n\n  protected readonly mobileActions = computed(() => {\n    const primaryActions = this.primaryActions();\n    const secondaryActions = this.secondaryActions();\n    const preventIcons = this.preventIconsInDropdownMenus();\n    let actions: readonly (MenuItemLegacy | MenuItem)[] = [];\n    if (primaryActions?.length && secondaryActions?.length) {\n      actions = [...primaryActions, { title: '-' }, ...secondaryActions];\n    } else if (primaryActions?.length) {\n      actions = primaryActions;\n    } else if (secondaryActions?.length) {\n      actions = secondaryActions;\n    }\n    if (preventIcons) {\n      actions = actions.map(action => ({\n        ...action,\n        icon: undefined\n      }));\n    }\n    return actions;\n  });\n  protected readonly secondaryActionsInternal = computed(() => {\n    let secondaryActions = this.secondaryActions();\n    if (this.preventIconsInDropdownMenus()) {\n      secondaryActions = secondaryActions?.map(action => ({\n        ...action,\n        icon: undefined\n      }));\n    }\n    return secondaryActions;\n  });\n  protected readonly icons = addIcons({ elementCancel, elementOptionsVertical });\n  protected readonly expanded = linkedSignal(() => this.viewType() === 'expanded');\n  protected parentElement?: HTMLElement | null;\n\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private menuActionService = inject(SiMenuActionService, { optional: true });\n\n  ngAfterViewInit(): void {\n    setTimeout(() => {\n      if (this.parentElement !== this.elementRef.nativeElement.parentElement) {\n        this.parentElement = this.elementRef.nativeElement.parentElement;\n      }\n    });\n  }\n\n  protected expand(): void {\n    this.expanded.set(true);\n    setTimeout(() => this.menuBarElement()?.nativeElement.focus());\n  }\n\n  protected collapse(): void {\n    this.expanded.set(false);\n    setTimeout(() => this.expandElement()?.nativeElement.focus());\n  }\n\n  protected isNewItemStyle(\n    item: MenuItemLegacy | ContentActionBarMainItem\n  ): item is ContentActionBarMainItem {\n    return 'label' in item;\n  }\n\n  protected runAction(item: MenuItemAction | MenuItemRadio | MenuItemCheckbox): void {\n    if (typeof item.action === 'function') {\n      item.action(this.actionParam(), item as any); // typescript cannot level down the item type properly\n    }\n\n    if (typeof item.action === 'string') {\n      this.menuActionService?.actionTriggered(item, this.actionParam());\n    }\n  }\n}\n","@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiContentActionBarComponent } from './si-content-action-bar.component';\n\n@NgModule({\n  imports: [SiContentActionBarComponent],\n  exports: [SiContentActionBarComponent]\n})\nexport class SiContentActionBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-content-action-bar.component';\nexport * from './si-content-action-bar.module';\nexport * from './si-content-action-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-copyright-notice.mjs

@@ -24,33 +24,33 @@ class SiCopyrightNoticeComponent {
      * Note: The {@link CopyrightDetails#company} defaults to `Sample Company`,
      * only set it for other companies.
      */
-    copyright = input();
+    copyright = input(...(ngDevMode ? [undefined, { debugName: "copyright" }] : []));
     copyrightInfo = computed(() => {
         const lastYear = this.lastUpdateYear();
         const to = lastYear ? `-${lastYear}` : '';
         return `${this.startYear()}${to}`;
-    });
-    company = computed(() => this.copyright()?.company ?? this.globalCopyrightInfo?.company);
-    startYear = computed(() => this.copyright()?.startYear ?? this.globalCopyrightInfo?.startYear ?? new Date().getFullYear());
-    lastUpdateYear = computed(() => this.copyright()?.lastUpdateYear ?? this.globalCopyrightInfo?.lastUpdateYear ?? undefined);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCopyrightNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiCopyrightNoticeComponent, isStandalone: true, selector: "si-copyright-notice", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p>\n  \u00A9\n  <span class=\"company\">{{ company() }}</span>\n  {{ copyrightInfo() }}\n</p>\n", styles: [".company:empty:after{content:var(--element-company-name)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "copyrightInfo" }] : []));
+    company = computed(() => this.copyright()?.company ?? this.globalCopyrightInfo?.company, ...(ngDevMode ? [{ debugName: "company" }] : []));
+    startYear = computed(() => this.copyright()?.startYear ?? this.globalCopyrightInfo?.startYear ?? new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "startYear" }] : []));
+    lastUpdateYear = computed(() => this.copyright()?.lastUpdateYear ?? this.globalCopyrightInfo?.lastUpdateYear ?? undefined, ...(ngDevMode ? [{ debugName: "lastUpdateYear" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCopyrightNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiCopyrightNoticeComponent, isStandalone: true, selector: "si-copyright-notice", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p>\n  \u00A9\n  <span class=\"company\">{{ company() }}</span>\n  {{ copyrightInfo() }}\n</p>\n", styles: [".company:empty:after{content:var(--element-company-name)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCopyrightNoticeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCopyrightNoticeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-copyright-notice', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>\n  \u00A9\n  <span class=\"company\">{{ company() }}</span>\n  {{ copyrightInfo() }}\n</p>\n", styles: [".company:empty:after{content:var(--element-company-name)}\n"] }]
-        }] });
+        }], propDecorators: { copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiCopyrightNoticeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCopyrightNoticeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiCopyrightNoticeModule, imports: [SiCopyrightNoticeComponent], exports: [SiCopyrightNoticeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCopyrightNoticeModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCopyrightNoticeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiCopyrightNoticeModule, imports: [SiCopyrightNoticeComponent], exports: [SiCopyrightNoticeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCopyrightNoticeModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCopyrightNoticeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCopyrightNoticeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiCopyrightNoticeComponent],

package/fesm2022/siemens-element-ng-copyright-notice.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-copyright-notice.mjs","sources":["../../../../projects/element-ng/copyright-notice/si-copyright-notice.ts","../../../../projects/element-ng/copyright-notice/si-copyright-notice.component.ts","../../../../projects/element-ng/copyright-notice/si-copyright-notice.component.html","../../../../projects/element-ng/copyright-notice/si-copyright-notice.module.ts","../../../../projects/element-ng/copyright-notice/index.ts","../../../../projects/element-ng/copyright-notice/siemens-element-ng-copyright-notice.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nexport interface CopyrightDetails {\n  /**\n   * The year when the app was first released.\n   */\n  startYear: number;\n  /**\n   * The year when the app was last updated. Must be left blank if it equals {@link startYear}\n   */\n  lastUpdateYear?: number;\n  /**\n   * The company name to be displayed in the copyright notice (not to be translated).\n   * If empty (recommended), the company name from the theme will be used.\n   */\n  company?: string;\n}\n\n/**\n * The injection token to be used when used globally across the app\n */\nexport const SI_COPYRIGHT_DETAILS = new InjectionToken<CopyrightDetails>('SI_COPYRIGHT_DETAILS');\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\n\nimport { CopyrightDetails, SI_COPYRIGHT_DETAILS } from './si-copyright-notice';\n\n@Component({\n  selector: 'si-copyright-notice',\n  templateUrl: './si-copyright-notice.component.html',\n  styleUrl: './si-copyright-notice.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCopyrightNoticeComponent {\n  private globalCopyrightInfo: CopyrightDetails | null = inject(SI_COPYRIGHT_DETAILS, {\n    optional: true\n  });\n  /**\n   * Copyright information to be displayed.\n   *\n   * Note: The {@link CopyrightDetails#company} defaults to `Sample Company`,\n   * only set it for other companies.\n   */\n  readonly copyright = input<CopyrightDetails>();\n\n  protected readonly copyrightInfo = computed(() => {\n    const lastYear = this.lastUpdateYear();\n    const to = lastYear ? `-${lastYear}` : '';\n    return `${this.startYear()}${to}`;\n  });\n\n  protected readonly company = computed(\n    () => this.copyright()?.company ?? this.globalCopyrightInfo?.company\n  );\n\n  protected readonly startYear = computed(\n    () =>\n      this.copyright()?.startYear ?? this.globalCopyrightInfo?.startYear ?? new Date().getFullYear()\n  );\n\n  protected readonly lastUpdateYear = computed(\n    () => this.copyright()?.lastUpdateYear ?? this.globalCopyrightInfo?.lastUpdateYear ?? undefined\n  );\n}\n","<p>\n  ©\n  <span class=\"company\">{{ company() }}</span>\n  {{ copyrightInfo() }}\n</p>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCopyrightNoticeComponent } from './si-copyright-notice.component';\n\n@NgModule({\n  imports: [SiCopyrightNoticeComponent],\n  exports: [SiCopyrightNoticeComponent]\n})\nexport class SiCopyrightNoticeModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-copyright-notice.component';\nexport * from './si-copyright-notice.module';\nexport * from './si-copyright-notice';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;AAGG;AAmBH;;AAEG;MACU,oBAAoB,GAAG,IAAI,cAAc,CAAmB,sBAAsB;;ACzB/F;;;AAGG;MAWU,0BAA0B,CAAA;AAC7B,IAAA,mBAAmB,GAA4B,MAAM,CAAC,oBAAoB,EAAE;AAClF,QAAA,QAAQ,EAAE;AACX,KAAA,CAAC;AACF;;;;;AAKG;IACM,SAAS,GAAG,KAAK,EAAoB;AAE3B,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE;AACtC,QAAA,MAAM,EAAE,GAAG,QAAQ,GAAG,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAE,GAAG,EAAE;QACzC,OAAO,CAAA,EAAG,IAAI,CAAC,SAAS,EAAE,CAAA,EAAG,EAAE,EAAE;AACnC,KAAC,CAAC;AAEiB,IAAA,OAAO,GAAG,QAAQ,CACnC,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,OAAO,CACrE;IAEkB,SAAS,GAAG,QAAQ,CACrC,MACE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,IAAI,IAAI,CAAC,mBAAmB,EAAE,SAAS,IAAI,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CACjG;IAEkB,cAAc,GAAG,QAAQ,CAC1C,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,cAAc,IAAI,IAAI,CAAC,mBAAmB,EAAE,cAAc,IAAI,SAAS,CAChG;uGA7BU,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,+NCdvC,kGAKA,EAAA,MAAA,EAAA,CAAA,6DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDSa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kGAAA,EAAA,MAAA,EAAA,CAAA,6DAAA,CAAA,EAAA;;;AEZjD;;;AAGG;MASU,uBAAuB,CAAA;uGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAvB,uBAAuB,EAAA,OAAA,EAAA,CAHxB,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAC1B,0BAA0B,CAAA,EAAA,CAAA;wGAEzB,uBAAuB,EAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,0BAA0B;AACrC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-copyright-notice.mjs","sources":["../../../../projects/element-ng/copyright-notice/si-copyright-notice.ts","../../../../projects/element-ng/copyright-notice/si-copyright-notice.component.ts","../../../../projects/element-ng/copyright-notice/si-copyright-notice.component.html","../../../../projects/element-ng/copyright-notice/si-copyright-notice.module.ts","../../../../projects/element-ng/copyright-notice/index.ts","../../../../projects/element-ng/copyright-notice/siemens-element-ng-copyright-notice.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nexport interface CopyrightDetails {\n  /**\n   * The year when the app was first released.\n   */\n  startYear: number;\n  /**\n   * The year when the app was last updated. Must be left blank if it equals {@link startYear}\n   */\n  lastUpdateYear?: number;\n  /**\n   * The company name to be displayed in the copyright notice (not to be translated).\n   * If empty (recommended), the company name from the theme will be used.\n   */\n  company?: string;\n}\n\n/**\n * The injection token to be used when used globally across the app\n */\nexport const SI_COPYRIGHT_DETAILS = new InjectionToken<CopyrightDetails>('SI_COPYRIGHT_DETAILS');\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\n\nimport { CopyrightDetails, SI_COPYRIGHT_DETAILS } from './si-copyright-notice';\n\n@Component({\n  selector: 'si-copyright-notice',\n  templateUrl: './si-copyright-notice.component.html',\n  styleUrl: './si-copyright-notice.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCopyrightNoticeComponent {\n  private globalCopyrightInfo: CopyrightDetails | null = inject(SI_COPYRIGHT_DETAILS, {\n    optional: true\n  });\n  /**\n   * Copyright information to be displayed.\n   *\n   * Note: The {@link CopyrightDetails#company} defaults to `Sample Company`,\n   * only set it for other companies.\n   */\n  readonly copyright = input<CopyrightDetails>();\n\n  protected readonly copyrightInfo = computed(() => {\n    const lastYear = this.lastUpdateYear();\n    const to = lastYear ? `-${lastYear}` : '';\n    return `${this.startYear()}${to}`;\n  });\n\n  protected readonly company = computed(\n    () => this.copyright()?.company ?? this.globalCopyrightInfo?.company\n  );\n\n  protected readonly startYear = computed(\n    () =>\n      this.copyright()?.startYear ?? this.globalCopyrightInfo?.startYear ?? new Date().getFullYear()\n  );\n\n  protected readonly lastUpdateYear = computed(\n    () => this.copyright()?.lastUpdateYear ?? this.globalCopyrightInfo?.lastUpdateYear ?? undefined\n  );\n}\n","<p>\n  ©\n  <span class=\"company\">{{ company() }}</span>\n  {{ copyrightInfo() }}\n</p>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCopyrightNoticeComponent } from './si-copyright-notice.component';\n\n@NgModule({\n  imports: [SiCopyrightNoticeComponent],\n  exports: [SiCopyrightNoticeComponent]\n})\nexport class SiCopyrightNoticeModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-copyright-notice.component';\nexport * from './si-copyright-notice.module';\nexport * from './si-copyright-notice';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;AAGG;AAmBH;;AAEG;MACU,oBAAoB,GAAG,IAAI,cAAc,CAAmB,sBAAsB;;ACzB/F;;;AAGG;MAWU,0BAA0B,CAAA;AAC7B,IAAA,mBAAmB,GAA4B,MAAM,CAAC,oBAAoB,EAAE;AAClF,QAAA,QAAQ,EAAE;AACX,KAAA,CAAC;AACF;;;;;AAKG;IACM,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAoB;AAE3B,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE;AACtC,QAAA,MAAM,EAAE,GAAG,QAAQ,GAAG,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAE,GAAG,EAAE;QACzC,OAAO,CAAA,EAAG,IAAI,CAAC,SAAS,EAAE,CAAA,EAAG,EAAE,EAAE;AACnC,IAAA,CAAC,yDAAC;AAEiB,IAAA,OAAO,GAAG,QAAQ,CACnC,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,OAAO,mDACrE;IAEkB,SAAS,GAAG,QAAQ,CACrC,MACE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,IAAI,IAAI,CAAC,mBAAmB,EAAE,SAAS,IAAI,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACjG;IAEkB,cAAc,GAAG,QAAQ,CAC1C,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,cAAc,IAAI,IAAI,CAAC,mBAAmB,EAAE,cAAc,IAAI,SAAS,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAChG;uGA7BU,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,+NCdvC,kGAKA,EAAA,MAAA,EAAA,CAAA,6DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDSa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kGAAA,EAAA,MAAA,EAAA,CAAA,6DAAA,CAAA,EAAA;;;AEZjD;;;AAGG;MASU,uBAAuB,CAAA;uGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAvB,uBAAuB,EAAA,OAAA,EAAA,CAHxB,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAC1B,0BAA0B,CAAA,EAAA,CAAA;wGAEzB,uBAAuB,EAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,0BAA0B;AACrC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}