npm - @siemens/element-ng - Versions diffs - 48.0.0-next.2 → 48.0.0-next.3 - Mend

@siemens/element-ng 48.0.0-next.2 → 48.0.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

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

	@@ -1 +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 { SiIconNextComponent } 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: [SiIconNextComponent],\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-next 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 OnChanges,\n SimpleChanges,\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 OnChanges, 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 expanded = true;\n protected parentElement?: HTMLElement \| null;\n\n private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private menuActionService = inject(SiMenuActionService, { optional: true });\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.viewType) {\n this.expanded = this.viewType() === 'expanded';\n }\n }\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 = true;\n setTimeout(() => this.menuBarElement()?.nativeElement.focus());\n }\n\n protected collapse(): void {\n this.expanded = 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 }\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 >\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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"}
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 }\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 >\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-dashboard.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ import { ViewportScroller, NgClass } from '@angular/common';
 import { ScrollbarHelper } from '@siemens/element-ng/common';
 import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { takeUntil } from 'rxjs/operators';
-import { addIcons, elementRight2, SiIconNextComponent, elementSortUp, elementSortDown, SiStatusIconComponent } from '@siemens/element-ng/icon';
+import { addIcons, elementRight2, SiIconComponent, elementSortUp, elementSortDown, SiStatusIconComponent } from '@siemens/element-ng/icon';
 import { SiLinkDirective } from '@siemens/element-ng/link';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -557,11 +557,11 @@ class SiLinkWidgetComponent extends SiWidgetBaseComponent {
     ghosts = computed(() => new Array(this.numberOfLinks() ?? 3));
     icons = addIcons({ elementRight2 });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLinkWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiLinkWidgetComponent, isStandalone: true, selector: "si-link-widget", inputs: { showLinkIcons: { classPropertyName: "showLinkIcons", publicName: "showLinkIcons", isSignal: true, isRequired: false, transformFunction: null }, numberOfLinks: { classPropertyName: "numberOfLinks", publicName: "numberOfLinks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "si-link-widget" }, usesInheritance: true, ngImport: i0, template: "@if (!showLoadingIndicator() && value()) {\n  @for (link of value(); track link) {\n    @if (link.action) {\n      <button type=\"button\" class=\"btn btn-link\" [siLink]=\"link\">{{\n        link.title | translate\n      }}</button>\n    } @else {\n      <a [siLink]=\"link\">\n        {{ link.title | translate }}\n        @if (showLinkIcons()) {\n          <si-icon-next class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  @for (some of ghosts(); track $index) {\n    <div class=\"si-link-widget-skeleton\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiLinkWidgetComponent, isStandalone: true, selector: "si-link-widget", inputs: { showLinkIcons: { classPropertyName: "showLinkIcons", publicName: "showLinkIcons", isSignal: true, isRequired: false, transformFunction: null }, numberOfLinks: { classPropertyName: "numberOfLinks", publicName: "numberOfLinks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "si-link-widget" }, usesInheritance: true, ngImport: i0, template: "@if (!showLoadingIndicator() && value()) {\n  @for (link of value(); track link) {\n    @if (link.action) {\n      <button type=\"button\" class=\"btn btn-link\" [siLink]=\"link\">{{\n        link.title | translate\n      }}</button>\n    } @else {\n      <a [siLink]=\"link\">\n        {{ link.title | translate }}\n        @if (showLinkIcons()) {\n          <si-icon class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  @for (some of ghosts(); track $index) {\n    <div class=\"si-link-widget-skeleton\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiLinkWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-link-widget', imports: [SiIconNextComponent, SiLinkDirective, SiTranslateModule], host: { class: 'si-link-widget' }, template: "@if (!showLoadingIndicator() && value()) {\n  @for (link of value(); track link) {\n    @if (link.action) {\n      <button type=\"button\" class=\"btn btn-link\" [siLink]=\"link\">{{\n        link.title | translate\n      }}</button>\n    } @else {\n      <a [siLink]=\"link\">\n        {{ link.title | translate }}\n        @if (showLinkIcons()) {\n          <si-icon-next class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  @for (some of ghosts(); track $index) {\n    <div class=\"si-link-widget-skeleton\"></div>\n  }\n}\n" }]
+            args: [{ selector: 'si-link-widget', imports: [SiIconComponent, SiLinkDirective, SiTranslateModule], host: { class: 'si-link-widget' }, template: "@if (!showLoadingIndicator() && value()) {\n  @for (link of value(); track link) {\n    @if (link.action) {\n      <button type=\"button\" class=\"btn btn-link\" [siLink]=\"link\">{{\n        link.title | translate\n      }}</button>\n    } @else {\n      <a [siLink]=\"link\">\n        {{ link.title | translate }}\n        @if (showLinkIcons()) {\n          <si-icon class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  @for (some of ghosts(); track $index) {\n    <div class=\"si-link-widget-skeleton\"></div>\n  }\n}\n" }]
         }] });
 /**
@@ -587,14 +587,14 @@ class SiListWidgetItemComponent extends SiWidgetBaseComponent {
     });
     icons = addIcons({ elementRight2 });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiListWidgetItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiListWidgetItemComponent, isStandalone: true, selector: "si-list-widget-item", host: { attributes: { "role": "listitem" }, classAttribute: "list-group-item d-flex align-items-center" }, usesInheritance: true, ngImport: i0, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  @if (valueObject.badge) {\n    <span class=\"mx-0 badge me-4\" [ngClass]=\"badgeColor()\">{{\n      valueObject.badge | translate\n    }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-title-2\">{{ label() | translate }}</span>\n    } @else {\n      <a class=\"\" [siLink]=\"link()\"\n        >{{ link().title | translate\n        }}<si-icon-next class=\"link-icon link-start flip-rtl\" [icon]=\"icons.elementRight2\" />\n      </a>\n    }\n    @if (valueObject.description) {\n      <div class=\"mt-1 si-body-2 text-secondary\">{{ valueObject.description | translate }}</div>\n    }\n  </span>\n  <span>{{ valueObject.text | translate }}</span>\n  @if (valueObject.action) {\n    @if (valueObject.action.action) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4 p-2\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n        [siLink]=\"valueObject.action\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon-next class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </button>\n    } @else {\n      <a\n        class=\"ms-4 p-2\"\n        [siLink]=\"valueObject.action\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon-next class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  <div class=\"si-link-widget-skeleton my-4\"></div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiListWidgetItemComponent, isStandalone: true, selector: "si-list-widget-item", host: { attributes: { "role": "listitem" }, classAttribute: "list-group-item d-flex align-items-center" }, usesInheritance: true, ngImport: i0, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  @if (valueObject.badge) {\n    <span class=\"mx-0 badge me-4\" [ngClass]=\"badgeColor()\">{{\n      valueObject.badge | translate\n    }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-title-2\">{{ label() | translate }}</span>\n    } @else {\n      <a class=\"\" [siLink]=\"link()\"\n        >{{ link().title | translate\n        }}<si-icon class=\"link-icon link-start flip-rtl\" [icon]=\"icons.elementRight2\" />\n      </a>\n    }\n    @if (valueObject.description) {\n      <div class=\"mt-1 si-body-2 text-secondary\">{{ valueObject.description | translate }}</div>\n    }\n  </span>\n  <span>{{ valueObject.text | translate }}</span>\n  @if (valueObject.action) {\n    @if (valueObject.action.action) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4 p-2\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n        [siLink]=\"valueObject.action\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </button>\n    } @else {\n      <a\n        class=\"ms-4 p-2\"\n        [siLink]=\"valueObject.action\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  <div class=\"si-link-widget-skeleton my-4\"></div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiListWidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-list-widget-item', imports: [NgClass, SiIconNextComponent, SiLinkDirective, SiTranslateModule], host: {
+            args: [{ selector: 'si-list-widget-item', imports: [NgClass, SiIconComponent, SiLinkDirective, SiTranslateModule], host: {
                         class: 'list-group-item d-flex align-items-center',
                         role: 'listitem'
-                    }, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  @if (valueObject.badge) {\n    <span class=\"mx-0 badge me-4\" [ngClass]=\"badgeColor()\">{{\n      valueObject.badge | translate\n    }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-title-2\">{{ label() | translate }}</span>\n    } @else {\n      <a class=\"\" [siLink]=\"link()\"\n        >{{ link().title | translate\n        }}<si-icon-next class=\"link-icon link-start flip-rtl\" [icon]=\"icons.elementRight2\" />\n      </a>\n    }\n    @if (valueObject.description) {\n      <div class=\"mt-1 si-body-2 text-secondary\">{{ valueObject.description | translate }}</div>\n    }\n  </span>\n  <span>{{ valueObject.text | translate }}</span>\n  @if (valueObject.action) {\n    @if (valueObject.action.action) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4 p-2\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n        [siLink]=\"valueObject.action\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon-next class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </button>\n    } @else {\n      <a\n        class=\"ms-4 p-2\"\n        [siLink]=\"valueObject.action\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon-next class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  <div class=\"si-link-widget-skeleton my-4\"></div>\n}\n" }]
+                    }, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  @if (valueObject.badge) {\n    <span class=\"mx-0 badge me-4\" [ngClass]=\"badgeColor()\">{{\n      valueObject.badge | translate\n    }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-title-2\">{{ label() | translate }}</span>\n    } @else {\n      <a class=\"\" [siLink]=\"link()\"\n        >{{ link().title | translate\n        }}<si-icon class=\"link-icon link-start flip-rtl\" [icon]=\"icons.elementRight2\" />\n      </a>\n    }\n    @if (valueObject.description) {\n      <div class=\"mt-1 si-body-2 text-secondary\">{{ valueObject.description | translate }}</div>\n    }\n  </span>\n  <span>{{ valueObject.text | translate }}</span>\n  @if (valueObject.action) {\n    @if (valueObject.action.action) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4 p-2\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n        [siLink]=\"valueObject.action\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </button>\n    } @else {\n      <a\n        class=\"ms-4 p-2\"\n        [siLink]=\"valueObject.action\"\n        [attr.aria-label]=\"valueObject.action.title | translate\"\n      >\n        @if (valueObject.actionIcon) {\n          <si-icon class=\"icon\" [icon]=\"valueObject.actionIcon\" />\n        }\n      </a>\n    }\n  }\n} @else {\n  <div class=\"si-link-widget-skeleton my-4\"></div>\n}\n" }]
         }] });
 /**
@@ -860,18 +860,18 @@ class SiListWidgetComponent extends SiWidgetBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiListWidgetComponent, isStandalone: true, selector: "si-list-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderLabel: { classPropertyName: "searchPlaceholderLabel", publicName: "searchPlaceholderLabel", isSignal: true, isRequired: false, transformFunction: null }, sortAscendingLabel: { classPropertyName: "sortAscendingLabel", publicName: "sortAscendingLabel", isSignal: true, isRequired: false, transformFunction: null }, sortDescendingLabel: { classPropertyName: "sortDescendingLabel", publicName: "sortDescendingLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, numberOfLinks: { classPropertyName: "numberOfLinks", publicName: "numberOfLinks", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange" }, host: { classAttribute: "si-list-widget" }, usesInheritance: true, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  actionBarViewType=\"expanded\"\n  [ngClass]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"sort() ? sortAction() : []\"\n>\n  <si-list-widget-body\n    body\n    [compareFn]=\"compareFn()\"\n    [filterFn]=\"filterFn()\"\n    [numberOfLinks]=\"numberOfLinks()\"\n    [searchPlaceholderLabel]=\"searchPlaceholderLabel()\"\n    [search]=\"search()\"\n    [sort]=\"sort()\"\n    [value]=\"value()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-list-widget-body>\n\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title }}\n          <si-icon-next class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        </a>\n      } @else {\n        <button type=\"button\" class=\"btn btn-link\" [siLink]=\"linkValue\"\n          >{{ linkValue.title }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["heading", "primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle", "imgSrc", "imgAlt", "imgDir", "imgObjectFit", "imgObjectPosition"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiListWidgetBodyComponent, selector: "si-list-widget-body", inputs: ["link", "searchPlaceholderLabel", "sort", "search", "compareFn", "filterFn", "numberOfLinks", "searchText"], outputs: ["searchTextChange"] }, { kind: "ngmodule", type: SiTranslateModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiListWidgetComponent, isStandalone: true, selector: "si-list-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderLabel: { classPropertyName: "searchPlaceholderLabel", publicName: "searchPlaceholderLabel", isSignal: true, isRequired: false, transformFunction: null }, sortAscendingLabel: { classPropertyName: "sortAscendingLabel", publicName: "sortAscendingLabel", isSignal: true, isRequired: false, transformFunction: null }, sortDescendingLabel: { classPropertyName: "sortDescendingLabel", publicName: "sortDescendingLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, numberOfLinks: { classPropertyName: "numberOfLinks", publicName: "numberOfLinks", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange" }, host: { classAttribute: "si-list-widget" }, usesInheritance: true, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  actionBarViewType=\"expanded\"\n  [ngClass]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"sort() ? sortAction() : []\"\n>\n  <si-list-widget-body\n    body\n    [compareFn]=\"compareFn()\"\n    [filterFn]=\"filterFn()\"\n    [numberOfLinks]=\"numberOfLinks()\"\n    [searchPlaceholderLabel]=\"searchPlaceholderLabel()\"\n    [search]=\"search()\"\n    [sort]=\"sort()\"\n    [value]=\"value()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-list-widget-body>\n\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title }}\n          <si-icon class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        </a>\n      } @else {\n        <button type=\"button\" class=\"btn btn-link\" [siLink]=\"linkValue\"\n          >{{ linkValue.title }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["heading", "primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle", "imgSrc", "imgAlt", "imgDir", "imgObjectFit", "imgObjectPosition"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiListWidgetBodyComponent, selector: "si-list-widget-body", inputs: ["link", "searchPlaceholderLabel", "sort", "search", "compareFn", "filterFn", "numberOfLinks", "searchText"], outputs: ["searchTextChange"] }, { kind: "ngmodule", type: SiTranslateModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiListWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-list-widget', imports: [
                         NgClass,
                         SiCardComponent,
-                        SiIconNextComponent,
+                        SiIconComponent,
                         SiLinkDirective,
                         SiListWidgetBodyComponent,
                         SiTranslateModule
-                    ], host: { class: 'si-list-widget' }, template: "<si-card\n  class=\"h-100\"\n  actionBarViewType=\"expanded\"\n  [ngClass]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"sort() ? sortAction() : []\"\n>\n  <si-list-widget-body\n    body\n    [compareFn]=\"compareFn()\"\n    [filterFn]=\"filterFn()\"\n    [numberOfLinks]=\"numberOfLinks()\"\n    [searchPlaceholderLabel]=\"searchPlaceholderLabel()\"\n    [search]=\"search()\"\n    [sort]=\"sort()\"\n    [value]=\"value()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-list-widget-body>\n\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title }}\n          <si-icon-next class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        </a>\n      } @else {\n        <button type=\"button\" class=\"btn btn-link\" [siLink]=\"linkValue\"\n          >{{ linkValue.title }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n" }]
+                    ], host: { class: 'si-list-widget' }, template: "<si-card\n  class=\"h-100\"\n  actionBarViewType=\"expanded\"\n  [ngClass]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"sort() ? sortAction() : []\"\n>\n  <si-list-widget-body\n    body\n    [compareFn]=\"compareFn()\"\n    [filterFn]=\"filterFn()\"\n    [numberOfLinks]=\"numberOfLinks()\"\n    [searchPlaceholderLabel]=\"searchPlaceholderLabel()\"\n    [search]=\"search()\"\n    [sort]=\"sort()\"\n    [value]=\"value()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-list-widget-body>\n\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title }}\n          <si-icon class=\"link-icon link-end flip-rtl\" [icon]=\"icons.elementRight2\" />\n        </a>\n      } @else {\n        <button type=\"button\" class=\"btn btn-link\" [siLink]=\"linkValue\"\n          >{{ linkValue.title }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n" }]
         }] });
 /**
@@ -890,12 +890,12 @@ class SiTimelineWidgetItemComponent extends SiWidgetBaseComponent {
     showDescription = input(true);
     activatedRoute = inject(ActivatedRoute, { optional: true });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTimelineWidgetItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTimelineWidgetItemComponent, isStandalone: true, selector: "si-timeline-widget-item", inputs: { showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, usesInheritance: true, ngImport: i0, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  <div class=\"d-flex flex-row gap-4\" [class.pe-4]=\"!valueObject.action\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4\">\n      <span class=\"icon icon-stack\">\n        <si-icon-next [class]=\"valueObject.iconColor\" [icon]=\"valueObject.icon\" />\n        @if (valueObject.stackedIcon) {\n          <si-icon-next [class]=\"valueObject.stackedIconColor\" [icon]=\"valueObject.stackedIcon\" />\n        }\n      </span>\n      @if (valueObject.iconAlt) {\n        <span class=\"visually-hidden\">{{ valueObject.iconAlt | translate }}</span>\n      }\n      <div class=\"si-timeline-widget-item-lower-line\"></div>\n    </div>\n    <div class=\"d-flex flex-column gap-1 py-4 flex-grow-1\">\n      <span class=\"si-caption text-secondary\">{{ valueObject.timeStamp | translate }}</span>\n      <span class=\"si-title-2\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body-2 text-secondary\">{{ valueObject.description | translate }}</span>\n      }\n    </div>\n    @if (valueObject.action) {\n      @let action = valueObject.action;\n      <div class=\"si-timeline-widget-item-action align-self-center\">\n        @if (action.type === 'action') {\n          <button\n            type=\"button\"\n            class=\"d-flex btn\"\n            [ngClass]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span>\n          </button>\n        } @else if (action.type === 'router-link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [routerLink]=\"action.routerLink\"\n            [queryParams]=\"action.extras?.queryParams\"\n            [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n            [fragment]=\"action.extras?.fragment\"\n            [state]=\"action.extras?.state\"\n            [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"action.extras?.preserveFragment\"\n            [skipLocationChange]=\"action.extras?.skipLocationChange\"\n            [replaceUrl]=\"action.extras?.replaceUrl\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'menu') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-sm btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"valueObject.title + ' dropdown'\"\n            [cdkMenuTriggerFor]=\"actionMenu\"\n          ></button>\n\n          <ng-template #actionMenu>\n            <si-menu-factory [items]=\"action.menuItems\" />\n          </ng-template>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"d-flex flex-row\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4 pe-4\">\n      <div class=\"p-5 si-skeleton\"></div>\n    </div>\n    <div class=\"d-flex flex-column flex-grow-1 gap-1 py-4\">\n      <span class=\"si-link-widget-skeleton\"></span>\n      <span class=\"si-link-widget-skeleton\" [class.w-50]=\"!showDescription()\"></span>\n      @if (showDescription()) {\n        <span class=\"si-link-widget-skeleton w-50\"></span>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SiMenuModule }, { kind: "component", type: i2$1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTimelineWidgetItemComponent, isStandalone: true, selector: "si-timeline-widget-item", inputs: { showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, usesInheritance: true, ngImport: i0, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  <div class=\"d-flex flex-row gap-4\" [class.pe-4]=\"!valueObject.action\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4\">\n      <span class=\"icon icon-stack\">\n        <si-icon [class]=\"valueObject.iconColor\" [icon]=\"valueObject.icon\" />\n        @if (valueObject.stackedIcon) {\n          <si-icon [class]=\"valueObject.stackedIconColor\" [icon]=\"valueObject.stackedIcon\" />\n        }\n      </span>\n      @if (valueObject.iconAlt) {\n        <span class=\"visually-hidden\">{{ valueObject.iconAlt | translate }}</span>\n      }\n      <div class=\"si-timeline-widget-item-lower-line\"></div>\n    </div>\n    <div class=\"d-flex flex-column gap-1 py-4 flex-grow-1\">\n      <span class=\"si-caption text-secondary\">{{ valueObject.timeStamp | translate }}</span>\n      <span class=\"si-title-2\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body-2 text-secondary\">{{ valueObject.description | translate }}</span>\n      }\n    </div>\n    @if (valueObject.action) {\n      @let action = valueObject.action;\n      <div class=\"si-timeline-widget-item-action align-self-center\">\n        @if (action.type === 'action') {\n          <button\n            type=\"button\"\n            class=\"d-flex btn\"\n            [ngClass]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span>\n          </button>\n        } @else if (action.type === 'router-link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [routerLink]=\"action.routerLink\"\n            [queryParams]=\"action.extras?.queryParams\"\n            [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n            [fragment]=\"action.extras?.fragment\"\n            [state]=\"action.extras?.state\"\n            [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"action.extras?.preserveFragment\"\n            [skipLocationChange]=\"action.extras?.skipLocationChange\"\n            [replaceUrl]=\"action.extras?.replaceUrl\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'menu') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-sm btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"valueObject.title + ' dropdown'\"\n            [cdkMenuTriggerFor]=\"actionMenu\"\n          ></button>\n\n          <ng-template #actionMenu>\n            <si-menu-factory [items]=\"action.menuItems\" />\n          </ng-template>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"d-flex flex-row\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4 pe-4\">\n      <div class=\"p-5 si-skeleton\"></div>\n    </div>\n    <div class=\"d-flex flex-column flex-grow-1 gap-1 py-4\">\n      <span class=\"si-link-widget-skeleton\"></span>\n      <span class=\"si-link-widget-skeleton\" [class.w-50]=\"!showDescription()\"></span>\n      @if (showDescription()) {\n        <span class=\"si-link-widget-skeleton w-50\"></span>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SiMenuModule }, { kind: "component", type: i2$1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTimelineWidgetItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-timeline-widget-item', imports: [
-                        SiIconNextComponent,
+                        SiIconComponent,
                         SiTranslateModule,
                         NgClass,
                         A11yModule,
@@ -904,7 +904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CdkMenuTrigger
                     ], host: {
                         role: 'listitem'
-                    }, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  <div class=\"d-flex flex-row gap-4\" [class.pe-4]=\"!valueObject.action\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4\">\n      <span class=\"icon icon-stack\">\n        <si-icon-next [class]=\"valueObject.iconColor\" [icon]=\"valueObject.icon\" />\n        @if (valueObject.stackedIcon) {\n          <si-icon-next [class]=\"valueObject.stackedIconColor\" [icon]=\"valueObject.stackedIcon\" />\n        }\n      </span>\n      @if (valueObject.iconAlt) {\n        <span class=\"visually-hidden\">{{ valueObject.iconAlt | translate }}</span>\n      }\n      <div class=\"si-timeline-widget-item-lower-line\"></div>\n    </div>\n    <div class=\"d-flex flex-column gap-1 py-4 flex-grow-1\">\n      <span class=\"si-caption text-secondary\">{{ valueObject.timeStamp | translate }}</span>\n      <span class=\"si-title-2\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body-2 text-secondary\">{{ valueObject.description | translate }}</span>\n      }\n    </div>\n    @if (valueObject.action) {\n      @let action = valueObject.action;\n      <div class=\"si-timeline-widget-item-action align-self-center\">\n        @if (action.type === 'action') {\n          <button\n            type=\"button\"\n            class=\"d-flex btn\"\n            [ngClass]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span>\n          </button>\n        } @else if (action.type === 'router-link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [routerLink]=\"action.routerLink\"\n            [queryParams]=\"action.extras?.queryParams\"\n            [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n            [fragment]=\"action.extras?.fragment\"\n            [state]=\"action.extras?.state\"\n            [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"action.extras?.preserveFragment\"\n            [skipLocationChange]=\"action.extras?.skipLocationChange\"\n            [replaceUrl]=\"action.extras?.replaceUrl\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'menu') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-sm btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"valueObject.title + ' dropdown'\"\n            [cdkMenuTriggerFor]=\"actionMenu\"\n          ></button>\n\n          <ng-template #actionMenu>\n            <si-menu-factory [items]=\"action.menuItems\" />\n          </ng-template>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"d-flex flex-row\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4 pe-4\">\n      <div class=\"p-5 si-skeleton\"></div>\n    </div>\n    <div class=\"d-flex flex-column flex-grow-1 gap-1 py-4\">\n      <span class=\"si-link-widget-skeleton\"></span>\n      <span class=\"si-link-widget-skeleton\" [class.w-50]=\"!showDescription()\"></span>\n      @if (showDescription()) {\n        <span class=\"si-link-widget-skeleton w-50\"></span>\n      }\n    </div>\n  </div>\n}\n" }]
+                    }, template: "@let valueObject = value();\n@if (!showLoadingIndicator() && valueObject) {\n  <div class=\"d-flex flex-row gap-4\" [class.pe-4]=\"!valueObject.action\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4\">\n      <span class=\"icon icon-stack\">\n        <si-icon [class]=\"valueObject.iconColor\" [icon]=\"valueObject.icon\" />\n        @if (valueObject.stackedIcon) {\n          <si-icon [class]=\"valueObject.stackedIconColor\" [icon]=\"valueObject.stackedIcon\" />\n        }\n      </span>\n      @if (valueObject.iconAlt) {\n        <span class=\"visually-hidden\">{{ valueObject.iconAlt | translate }}</span>\n      }\n      <div class=\"si-timeline-widget-item-lower-line\"></div>\n    </div>\n    <div class=\"d-flex flex-column gap-1 py-4 flex-grow-1\">\n      <span class=\"si-caption text-secondary\">{{ valueObject.timeStamp | translate }}</span>\n      <span class=\"si-title-2\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body-2 text-secondary\">{{ valueObject.description | translate }}</span>\n      }\n    </div>\n    @if (valueObject.action) {\n      @let action = valueObject.action;\n      <div class=\"si-timeline-widget-item-action align-self-center\">\n        @if (action.type === 'action') {\n          <button\n            type=\"button\"\n            class=\"d-flex btn\"\n            [ngClass]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span>\n          </button>\n        } @else if (action.type === 'router-link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [routerLink]=\"action.routerLink\"\n            [queryParams]=\"action.extras?.queryParams\"\n            [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n            [fragment]=\"action.extras?.fragment\"\n            [state]=\"action.extras?.state\"\n            [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"action.extras?.preserveFragment\"\n            [skipLocationChange]=\"action.extras?.skipLocationChange\"\n            [replaceUrl]=\"action.extras?.replaceUrl\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'link') {\n          <a\n            class=\"d-flex btn btn-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label\"\n            [class.btn-circle]=\"action.iconOnly\"\n            [class.btn-sm]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <i class=\"icon\" [ngClass]=\"action.icon\"></i>\n            }\n            <span [class.visually-hidden]=\"action.iconOnly\">\n              {{ action.label | translate }}\n            </span></a\n          >\n        } @else if (action.type === 'menu') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-sm btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"valueObject.title + ' dropdown'\"\n            [cdkMenuTriggerFor]=\"actionMenu\"\n          ></button>\n\n          <ng-template #actionMenu>\n            <si-menu-factory [items]=\"action.menuItems\" />\n          </ng-template>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"d-flex flex-row\">\n    <div class=\"d-flex flex-column align-items-center gap-1 pt-4 pe-4\">\n      <div class=\"p-5 si-skeleton\"></div>\n    </div>\n    <div class=\"d-flex flex-column flex-grow-1 gap-1 py-4\">\n      <span class=\"si-link-widget-skeleton\"></span>\n      <span class=\"si-link-widget-skeleton\" [class.w-50]=\"!showDescription()\"></span>\n      @if (showDescription()) {\n        <span class=\"si-link-widget-skeleton w-50\"></span>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
 /**
@@ -1023,11 +1023,11 @@ class SiValueWidgetBodyComponent extends SiWidgetBaseComponent {
      */
     description = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiValueWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiValueWidgetBodyComponent, isStandalone: true, selector: "si-value-widget-body", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (!showLoadingIndicator()) {\n  @if (value()) {\n    <span class=\"si-value-widget-value\">{{ value() | translate }}</span>\n    <span class=\"si-value-widget-unit\">{{ unit() | translate }}</span>\n    @if (description()) {\n      <div class=\"si-value-widget-description\">\n        @let statusValue = status();\n        @let iconValue = icon();\n        @if (statusValue) {\n          <si-status-icon class=\"icon\" [status]=\"statusValue\" />\n        } @else if (iconValue) {\n          <si-icon-next class=\"icon\" [icon]=\"iconValue\" />\n        }\n        <span>{{ description() | translate }}</span>\n      </div>\n    }\n  }\n} @else {\n  <span class=\"si-value-widget-value w-100\">\n    <div class=\"si-value-widget-value-skeleton\"></div>\n  </span>\n  <div class=\"si-value-widget-description si-skeleton w-100\"></div>\n}\n", dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiValueWidgetBodyComponent, isStandalone: true, selector: "si-value-widget-body", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (!showLoadingIndicator()) {\n  @if (value()) {\n    <span class=\"si-value-widget-value\">{{ value() | translate }}</span>\n    <span class=\"si-value-widget-unit\">{{ unit() | translate }}</span>\n    @if (description()) {\n      <div class=\"si-value-widget-description\">\n        @let statusValue = status();\n        @let iconValue = icon();\n        @if (statusValue) {\n          <si-status-icon class=\"icon\" [status]=\"statusValue\" />\n        } @else if (iconValue) {\n          <si-icon class=\"icon\" [icon]=\"iconValue\" />\n        }\n        <span>{{ description() | translate }}</span>\n      </div>\n    }\n  }\n} @else {\n  <span class=\"si-value-widget-value w-100\">\n    <div class=\"si-value-widget-value-skeleton\"></div>\n  </span>\n  <div class=\"si-value-widget-description si-skeleton w-100\"></div>\n}\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiValueWidgetBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-value-widget-body', imports: [SiIconNextComponent, SiStatusIconComponent, SiTranslateModule], template: "@if (!showLoadingIndicator()) {\n  @if (value()) {\n    <span class=\"si-value-widget-value\">{{ value() | translate }}</span>\n    <span class=\"si-value-widget-unit\">{{ unit() | translate }}</span>\n    @if (description()) {\n      <div class=\"si-value-widget-description\">\n        @let statusValue = status();\n        @let iconValue = icon();\n        @if (statusValue) {\n          <si-status-icon class=\"icon\" [status]=\"statusValue\" />\n        } @else if (iconValue) {\n          <si-icon-next class=\"icon\" [icon]=\"iconValue\" />\n        }\n        <span>{{ description() | translate }}</span>\n      </div>\n    }\n  }\n} @else {\n  <span class=\"si-value-widget-value w-100\">\n    <div class=\"si-value-widget-value-skeleton\"></div>\n  </span>\n  <div class=\"si-value-widget-description si-skeleton w-100\"></div>\n}\n" }]
+            args: [{ selector: 'si-value-widget-body', imports: [SiIconComponent, SiStatusIconComponent, SiTranslateModule], template: "@if (!showLoadingIndicator()) {\n  @if (value()) {\n    <span class=\"si-value-widget-value\">{{ value() | translate }}</span>\n    <span class=\"si-value-widget-unit\">{{ unit() | translate }}</span>\n    @if (description()) {\n      <div class=\"si-value-widget-description\">\n        @let statusValue = status();\n        @let iconValue = icon();\n        @if (statusValue) {\n          <si-status-icon class=\"icon\" [status]=\"statusValue\" />\n        } @else if (iconValue) {\n          <si-icon class=\"icon\" [icon]=\"iconValue\" />\n        }\n        <span>{{ description() | translate }}</span>\n      </div>\n    }\n  }\n} @else {\n  <span class=\"si-value-widget-value w-100\">\n    <div class=\"si-value-widget-value-skeleton\"></div>\n  </span>\n  <div class=\"si-value-widget-description si-skeleton w-100\"></div>\n}\n" }]
         }] });
 /**