@siemens/element-ng 49.16.0 → 51.0.0-rc.10

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

@@ -52,10 +52,10 @@ class SiDashboardService {
             this.cards.next(nextCards);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -72,7 +72,8 @@ class SiDashboardCardComponent extends SiCardComponent {
      * t(() => $localize`:@@SI_DASHBOARD.RESTORE:Restore`)
      * ```
      */
-    restoreText = input(t(() => $localize `:@@SI_DASHBOARD.RESTORE:Restore`), ...(ngDevMode ? [{ debugName: "restoreText" }] : []));
+    restoreText = input(t(() => $localize `:@@SI_DASHBOARD.RESTORE:Restore`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoreText" }] : /* istanbul ignore next */ []));
     /**
      * Description of expand button & action.
      *
@@ -81,7 +82,8 @@ class SiDashboardCardComponent extends SiCardComponent {
      * t(() => $localize`:@@SI_DASHBOARD.EXPAND:Expand`)
      * ```
      */
-    expandText = input(t(() => $localize `:@@SI_DASHBOARD.EXPAND:Expand`), ...(ngDevMode ? [{ debugName: "expandText" }] : []));
+    expandText = input(t(() => $localize `:@@SI_DASHBOARD.EXPAND:Expand`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandText" }] : /* istanbul ignore next */ []));
     /**
      * Option to enable and show the UI controls for card expand functionality.
      * `Expand` and `restore` action items will be added to the content action bar.
@@ -89,13 +91,13 @@ class SiDashboardCardComponent extends SiCardComponent {
      *
      * @defaultValue false
      */
-    enableExpandInteraction = input(false, { ...(ngDevMode ? { debugName: "enableExpandInteraction" } : {}), transform: booleanAttribute });
+    enableExpandInteraction = input(false, { ...(ngDevMode ? { debugName: "enableExpandInteraction" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Used in combination with si-dashboard to show filters when a card is expanded or not.
      *
      * @defaultValue true
      */
-    showMenubar = input(true, { ...(ngDevMode ? { debugName: "showMenubar" } : {}), transform: booleanAttribute });
+    showMenubar = input(true, { ...(ngDevMode ? { debugName: "showMenubar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Emitter for size state change
      */
@@ -105,15 +107,20 @@ class SiDashboardCardComponent extends SiCardComponent {
      *
      * @defaultValue false
      */
-    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    isExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hide = signal(false, ...(ngDevMode ? [{ debugName: "hide" }] : []));
+    hide = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hide" }] : /* istanbul ignore next */ []));
     /** @internal */
-    enableExpandInteractionInternal = signal(false, ...(ngDevMode ? [{ debugName: "enableExpandInteractionInternal" }] : []));
-    enableExpandInteractionComputed = computed(() => this.enableExpandInteraction() || this.enableExpandInteractionInternal(), ...(ngDevMode ? [{ debugName: "enableExpandInteractionComputed" }] : []));
+    enableExpandInteractionInternal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableExpandInteractionInternal" }] : /* istanbul ignore next */ []));
+    enableExpandInteractionComputed = computed(() => this.enableExpandInteraction() || this.enableExpandInteractionInternal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableExpandInteractionComputed" }] : /* istanbul ignore next */ []));
     /** @internal */
     element = inject(ElementRef);
-    displayContentActionBar = computed(() => this.primaryActionsComputed()?.length > 0 || this.secondaryActions()?.length > 0, ...(ngDevMode ? [{ debugName: "displayContentActionBar" }] : []));
+    displayContentActionBar = computed(() => this.primaryActionsComputed()?.length > 0 || this.secondaryActions()?.length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayContentActionBar" }] : /* istanbul ignore next */ []));
     actionBarViewTypeComputed = computed(() => {
         if (!this.hasContentBarActions()) {
             if (this.enableExpandInteractionComputed()) {
@@ -126,7 +133,8 @@ class SiDashboardCardComponent extends SiCardComponent {
         else {
             return this.actionBarViewType();
         }
-    }, ...(ngDevMode ? [{ debugName: "actionBarViewTypeComputed" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionBarViewTypeComputed" }] : /* istanbul ignore next */ []));
     actionBarTitleComputed = computed(() => {
         if (!this.hasContentBarActions()) {
             if (this.enableExpandInteractionComputed()) {
@@ -139,7 +147,8 @@ class SiDashboardCardComponent extends SiCardComponent {
         else {
             return this.actionBarTitle();
         }
-    }, ...(ngDevMode ? [{ debugName: "actionBarTitleComputed" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionBarTitleComputed" }] : /* istanbul ignore next */ []));
     primaryActionsComputed = computed(() => {
         const expandRestoreButtonActions = [
             {
@@ -172,14 +181,16 @@ class SiDashboardCardComponent extends SiCardComponent {
                 }
             }
         }
-    }, ...(ngDevMode ? [{ debugName: "primaryActionsComputed" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActionsComputed" }] : /* istanbul ignore next */ []));
     icons = addIcons({
         elementPinch,
         elementZoom
     });
     expandRestoreIconTooltip = computed(() => {
         return this.isExpanded() ? this.restoreText() : this.expandText();
-    }, ...(ngDevMode ? [{ debugName: "expandRestoreIconTooltip" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandRestoreIconTooltip" }] : /* istanbul ignore next */ []));
     expandActionItem = computed(() => {
         return {
             type: 'action',
@@ -188,7 +199,8 @@ class SiDashboardCardComponent extends SiCardComponent {
             iconOnly: true,
             action: () => this.expandCard(true)
         };
-    }, ...(ngDevMode ? [{ debugName: "expandActionItem" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandActionItem" }] : /* istanbul ignore next */ []));
     restoreActionItem = computed(() => {
         return {
             type: 'action',
@@ -197,10 +209,12 @@ class SiDashboardCardComponent extends SiCardComponent {
             iconOnly: true,
             action: () => this.expandCard(false)
         };
-    }, ...(ngDevMode ? [{ debugName: "restoreActionItem" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoreActionItem" }] : /* istanbul ignore next */ []));
     hasContentBarActions = computed(() => {
         return this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasContentBarActions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasContentBarActions" }] : /* istanbul ignore next */ []));
     dashboardService = inject(SiDashboardService, { optional: true });
     constructor() {
         super();
@@ -225,13 +239,13 @@ class SiDashboardCardComponent extends SiCardComponent {
         this.isExpanded.set(expand);
         this.expandChange.emit(expand);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDashboardCardComponent, isStandalone: true, selector: "si-dashboard-card", inputs: { restoreText: { classPropertyName: "restoreText", publicName: "restoreText", isSignal: true, isRequired: false, transformFunction: null }, expandText: { classPropertyName: "expandText", publicName: "expandText", isSignal: true, isRequired: false, transformFunction: null }, enableExpandInteraction: { classPropertyName: "enableExpandInteraction", publicName: "enableExpandInteraction", isSignal: true, isRequired: false, transformFunction: null }, showMenubar: { classPropertyName: "showMenubar", publicName: "showMenubar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange" }, host: { properties: { "class.elevation-2": "isExpanded()", "class.expanded": "isExpanded()", "class.d-none": "hide()" } }, usesInheritance: true, ngImport: i0, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <si-card-header\n      [heading]=\"heading()\"\n      [subHeading]=\"subHeading()\"\n      [primaryActions]=\"primaryActionsComputed()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [actionParam]=\"actionParam()\"\n      [actionBarViewType]=\"actionBarViewTypeComputed()\"\n      [actionBarTitle]=\"actionBarTitleComputed()\"\n    >\n      <ng-content select=\"[headerIcon]\" ngProjectAs=\"[headerIcon]\" />\n    </si-card-header>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}:host{block-size:100%}:host.expanded{position:absolute;inset:0}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"], dependencies: [{ kind: "component", type: SiCardHeaderComponent, selector: "si-card-header", inputs: ["heading", "subHeading", "headingId", "subHeadingId", "primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiDashboardCardComponent, isStandalone: true, selector: "si-dashboard-card", inputs: { restoreText: { classPropertyName: "restoreText", publicName: "restoreText", isSignal: true, isRequired: false, transformFunction: null }, expandText: { classPropertyName: "expandText", publicName: "expandText", isSignal: true, isRequired: false, transformFunction: null }, enableExpandInteraction: { classPropertyName: "enableExpandInteraction", publicName: "enableExpandInteraction", isSignal: true, isRequired: false, transformFunction: null }, showMenubar: { classPropertyName: "showMenubar", publicName: "showMenubar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange" }, host: { properties: { "class.shadow-2": "isExpanded()", "class.expanded": "isExpanded()", "class.d-none": "hide()" } }, usesInheritance: true, ngImport: i0, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <si-card-header\n      [heading]=\"heading()\"\n      [subHeading]=\"subHeading()\"\n      [primaryActions]=\"primaryActionsComputed()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [actionParam]=\"actionParam()\"\n      [actionBarViewType]=\"actionBarViewTypeComputed()\"\n      [actionBarTitle]=\"actionBarTitleComputed()\"\n    >\n      <ng-content select=\"[headerIcon]\" ngProjectAs=\"[headerIcon]\" />\n    </si-card-header>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}:host{block-size:100%}:host.expanded{position:absolute;inset:0}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"], dependencies: [{ kind: "component", type: SiCardHeaderComponent, selector: "si-card-header", inputs: ["heading", "subHeading", "headingId", "subHeadingId", "primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-dashboard-card', imports: [SiCardHeaderComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, host: {
-                        '[class.elevation-2]': 'isExpanded()',
+            args: [{ selector: 'si-dashboard-card', imports: [SiCardHeaderComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        '[class.shadow-2]': 'isExpanded()',
                         '[class.expanded]': 'isExpanded()',
                         '[class.d-none]': 'hide()'
                     }, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <si-card-header\n      [heading]=\"heading()\"\n      [subHeading]=\"subHeading()\"\n      [primaryActions]=\"primaryActionsComputed()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [actionParam]=\"actionParam()\"\n      [actionBarViewType]=\"actionBarViewTypeComputed()\"\n      [actionBarTitle]=\"actionBarTitleComputed()\"\n    >\n      <ng-content select=\"[headerIcon]\" ngProjectAs=\"[headerIcon]\" />\n    </si-card-header>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}:host{block-size:100%}:host.expanded{position:absolute;inset:0}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"] }]
@@ -247,25 +261,26 @@ class SiDashboardComponent {
     /**
      * Heading for the dashboard page.
      */
-    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Opt-in to enable expand interaction for all cards.
      *
      * @defaultValue false
      */
-    enableExpandInteractions = input(false, { ...(ngDevMode ? { debugName: "enableExpandInteractions" } : {}), transform: booleanAttribute });
+    enableExpandInteractions = input(false, { ...(ngDevMode ? { debugName: "enableExpandInteractions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Option to turn off the sticky behavior of the heading and menu bar.
      *
      * @defaultValue true
      */
-    sticky = input(true, { ...(ngDevMode ? { debugName: "sticky" } : {}), transform: booleanAttribute });
+    sticky = input(true, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Option to hide the menu bar.
      *
      * @defaultValue false
      */
-    hideMenubar = input(false, { ...(ngDevMode ? { debugName: "hideMenubar" } : {}), transform: booleanAttribute });
+    hideMenubar = input(false, { ...(ngDevMode ? { debugName: "hideMenubar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Is `true` if a card is expanded.
      * @defaultref {@link isExpandedSignal}
@@ -273,17 +288,20 @@ class SiDashboardComponent {
     get isExpanded() {
         return this.isExpandedSignal();
     }
-    dashboardFrameEndPadding = signal(null, ...(ngDevMode ? [{ debugName: "dashboardFrameEndPadding" }] : []));
-    hideMenubarComputed = computed(() => this.hideMenubar() || this.hideMenubarInternal(), ...(ngDevMode ? [{ debugName: "hideMenubarComputed" }] : []));
-    isExpandedSignal = signal(false, ...(ngDevMode ? [{ debugName: "isExpandedSignal" }] : []));
+    dashboardFrameEndPadding = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboardFrameEndPadding" }] : /* istanbul ignore next */ []));
+    hideMenubarComputed = computed(() => this.hideMenubar() || this.hideMenubarInternal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideMenubarComputed" }] : /* istanbul ignore next */ []));
+    isExpandedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpandedSignal" }] : /* istanbul ignore next */ []));
     scrollPosition = [0, 0];
     reinitCards$ = new Subject();
     cards = [];
-    expandedPortalOutlet = viewChild.required('expandedPortalOutlet', {
-        read: CdkPortalOutlet
-    });
-    dashboardFrame = viewChild.required('dashboardFrame');
-    dashboard = viewChild.required('dashboard');
+    expandedPortalOutlet = viewChild.required('expandedPortalOutlet', { ...(ngDevMode ? { debugName: "expandedPortalOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    dashboardFrame = viewChild.required('dashboardFrame', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboardFrame" }] : /* istanbul ignore next */ []));
+    dashboard = viewChild.required('dashboard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboard" }] : /* istanbul ignore next */ []));
     dashboardFrameDimensions;
     dashboardDimensions;
     scroller = inject(ViewportScroller);
@@ -292,7 +310,8 @@ class SiDashboardComponent {
     scrollbarHelper = inject(ScrollbarHelper);
     cdRef = inject(ChangeDetectorRef);
     document = inject(DOCUMENT);
-    hideMenubarInternal = signal(false, ...(ngDevMode ? [{ debugName: "hideMenubarInternal" }] : []));
+    hideMenubarInternal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideMenubarInternal" }] : /* istanbul ignore next */ []));
     constructor() {
         this.dashboardService.cards$
             .pipe(takeUntilDestroyed())
@@ -434,12 +453,12 @@ class SiDashboardComponent {
         }
         this.dashboardFrameEndPadding.set(padding);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDashboardComponent, isStandalone: true, selector: "si-dashboard", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, enableExpandInteractions: { classPropertyName: "enableExpandInteractions", publicName: "enableExpandInteractions", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideMenubar: { classPropertyName: "hideMenubar", publicName: "hideMenubar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "si-layout-fixed-height" }, providers: [SiDashboardService], viewQueries: [{ propertyName: "expandedPortalOutlet", first: true, predicate: ["expandedPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "dashboardFrame", first: true, predicate: ["dashboardFrame"], descendants: true, isSignal: true }, { propertyName: "dashboard", first: true, predicate: ["dashboard"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"si-layout-fixed-height si-dashboard si-layout-main-padding py-6\"\n  [class.sticky]=\"sticky()\"\n>\n  <div class=\"si-dashboard-header\" [class.sticky]=\"sticky()\">\n    @if (heading()) {\n      <div class=\"si-layout-header\">\n        <h2 class=\"si-layout-title si-layout-top-element\">{{ heading() | translate }}</h2>\n      </div>\n    }\n    @if (!hideMenubarComputed()) {\n      <div class=\"mb-6\" [class.si-layout-top-element]=\"!heading()\">\n        <ng-content select=\"[menubar]\" />\n      </div>\n    }\n  </div>\n  <div\n    #dashboardFrame\n    class=\"si-layout-fixed-height si-dashboard-content ps-2 pt-2 ms-n2 mt-n2\"\n    [class.sticky]=\"sticky()\"\n    [style.padding-inline-end.px]=\"dashboardFrameEndPadding()\"\n  >\n    <div class=\"si-layout-fixed-height\" [class.d-none]=\"isExpandedSignal()\">\n      <div #dashboard class=\"si-layout-fixed-height fix-si-layout-fixed-height\">\n        <ng-content select=\"[dashboard]\" />\n      </div>\n    </div>\n    <div\n      class=\"position-relative flex-grow-1 flex-shrink-1 mb-6\"\n      [class.d-none]=\"!isExpandedSignal()\"\n    >\n      <ng-container #expandedPortalOutlet cdkPortalOutlet />\n    </div>\n  </div>\n</div>\n", styles: [".si-dashboard.sticky{padding-inline-end:0;overflow-x:hidden}.si-dashboard .si-dashboard-header.sticky{padding-inline-end:16px}@media(min-width:768px){.si-dashboard .si-dashboard-header.sticky{padding-inline-end:32px}}.si-dashboard .si-dashboard-content.sticky{overflow-y:auto;overflow-x:hidden}.si-dashboard .fix-si-layout-fixed-height{min-block-size:auto}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiDashboardComponent, isStandalone: true, selector: "si-dashboard", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, enableExpandInteractions: { classPropertyName: "enableExpandInteractions", publicName: "enableExpandInteractions", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideMenubar: { classPropertyName: "hideMenubar", publicName: "hideMenubar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "si-layout-fixed-height" }, providers: [SiDashboardService], viewQueries: [{ propertyName: "expandedPortalOutlet", first: true, predicate: ["expandedPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "dashboardFrame", first: true, predicate: ["dashboardFrame"], descendants: true, isSignal: true }, { propertyName: "dashboard", first: true, predicate: ["dashboard"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"si-layout-fixed-height si-dashboard si-layout-main-padding py-6\"\n  [class.sticky]=\"sticky()\"\n>\n  <div class=\"si-dashboard-header\" [class.sticky]=\"sticky()\">\n    @if (heading()) {\n      <div class=\"si-layout-header\">\n        <h2 class=\"si-layout-title si-layout-top-element\">{{ heading() | translate }}</h2>\n      </div>\n    }\n    @if (!hideMenubarComputed()) {\n      <div class=\"mb-6\" [class.si-layout-top-element]=\"!heading()\">\n        <ng-content select=\"[menubar]\" />\n      </div>\n    }\n  </div>\n  <div\n    #dashboardFrame\n    class=\"si-layout-fixed-height si-dashboard-content ps-2 pt-2 ms-n2 mt-n2\"\n    [class.sticky]=\"sticky()\"\n    [style.padding-inline-end.px]=\"dashboardFrameEndPadding()\"\n  >\n    <div class=\"si-layout-fixed-height\" [class.d-none]=\"isExpandedSignal()\">\n      <div #dashboard class=\"si-layout-fixed-height fix-si-layout-fixed-height\">\n        <ng-content select=\"[dashboard]\" />\n      </div>\n    </div>\n    <div\n      class=\"position-relative flex-grow-1 flex-shrink-1 mb-6\"\n      [class.d-none]=\"!isExpandedSignal()\"\n    >\n      <ng-container #expandedPortalOutlet cdkPortalOutlet />\n    </div>\n  </div>\n</div>\n", styles: [".si-dashboard.sticky{padding-inline-end:0;overflow-x:hidden}.si-dashboard .si-dashboard-header.sticky{padding-inline-end:var(--si-sys-sizing-spacing-x-60)}@media(min-width:768px){.si-dashboard .si-dashboard-header.sticky{padding-inline-end:var(--si-sys-sizing-spacing-x-90)}}.si-dashboard .si-dashboard-content.sticky{overflow-y:auto;overflow-x:hidden}.si-dashboard .fix-si-layout-fixed-height{min-block-size:auto}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-dashboard', imports: [PortalModule, SiTranslatePipe], providers: [SiDashboardService], changeDetection: ChangeDetectionStrategy.Default, host: { class: 'si-layout-fixed-height' }, template: "<div\n  class=\"si-layout-fixed-height si-dashboard si-layout-main-padding py-6\"\n  [class.sticky]=\"sticky()\"\n>\n  <div class=\"si-dashboard-header\" [class.sticky]=\"sticky()\">\n    @if (heading()) {\n      <div class=\"si-layout-header\">\n        <h2 class=\"si-layout-title si-layout-top-element\">{{ heading() | translate }}</h2>\n      </div>\n    }\n    @if (!hideMenubarComputed()) {\n      <div class=\"mb-6\" [class.si-layout-top-element]=\"!heading()\">\n        <ng-content select=\"[menubar]\" />\n      </div>\n    }\n  </div>\n  <div\n    #dashboardFrame\n    class=\"si-layout-fixed-height si-dashboard-content ps-2 pt-2 ms-n2 mt-n2\"\n    [class.sticky]=\"sticky()\"\n    [style.padding-inline-end.px]=\"dashboardFrameEndPadding()\"\n  >\n    <div class=\"si-layout-fixed-height\" [class.d-none]=\"isExpandedSignal()\">\n      <div #dashboard class=\"si-layout-fixed-height fix-si-layout-fixed-height\">\n        <ng-content select=\"[dashboard]\" />\n      </div>\n    </div>\n    <div\n      class=\"position-relative flex-grow-1 flex-shrink-1 mb-6\"\n      [class.d-none]=\"!isExpandedSignal()\"\n    >\n      <ng-container #expandedPortalOutlet cdkPortalOutlet />\n    </div>\n  </div>\n</div>\n", styles: [".si-dashboard.sticky{padding-inline-end:0;overflow-x:hidden}.si-dashboard .si-dashboard-header.sticky{padding-inline-end:16px}@media(min-width:768px){.si-dashboard .si-dashboard-header.sticky{padding-inline-end:32px}}.si-dashboard .si-dashboard-content.sticky{overflow-y:auto;overflow-x:hidden}.si-dashboard .fix-si-layout-fixed-height{min-block-size:auto}\n"] }]
+            args: [{ selector: 'si-dashboard', imports: [PortalModule, SiTranslatePipe], providers: [SiDashboardService], changeDetection: ChangeDetectionStrategy.Eager, host: { class: 'si-layout-fixed-height' }, template: "<div\n  class=\"si-layout-fixed-height si-dashboard si-layout-main-padding py-6\"\n  [class.sticky]=\"sticky()\"\n>\n  <div class=\"si-dashboard-header\" [class.sticky]=\"sticky()\">\n    @if (heading()) {\n      <div class=\"si-layout-header\">\n        <h2 class=\"si-layout-title si-layout-top-element\">{{ heading() | translate }}</h2>\n      </div>\n    }\n    @if (!hideMenubarComputed()) {\n      <div class=\"mb-6\" [class.si-layout-top-element]=\"!heading()\">\n        <ng-content select=\"[menubar]\" />\n      </div>\n    }\n  </div>\n  <div\n    #dashboardFrame\n    class=\"si-layout-fixed-height si-dashboard-content ps-2 pt-2 ms-n2 mt-n2\"\n    [class.sticky]=\"sticky()\"\n    [style.padding-inline-end.px]=\"dashboardFrameEndPadding()\"\n  >\n    <div class=\"si-layout-fixed-height\" [class.d-none]=\"isExpandedSignal()\">\n      <div #dashboard class=\"si-layout-fixed-height fix-si-layout-fixed-height\">\n        <ng-content select=\"[dashboard]\" />\n      </div>\n    </div>\n    <div\n      class=\"position-relative flex-grow-1 flex-shrink-1 mb-6\"\n      [class.d-none]=\"!isExpandedSignal()\"\n    >\n      <ng-container #expandedPortalOutlet cdkPortalOutlet />\n    </div>\n  </div>\n</div>\n", styles: [".si-dashboard.sticky{padding-inline-end:0;overflow-x:hidden}.si-dashboard .si-dashboard-header.sticky{padding-inline-end:var(--si-sys-sizing-spacing-x-60)}@media(min-width:768px){.si-dashboard .si-dashboard-header.sticky{padding-inline-end:var(--si-sys-sizing-spacing-x-90)}}.si-dashboard .si-dashboard-content.sticky{overflow-y:auto;overflow-x:hidden}.si-dashboard .fix-si-layout-fixed-height{min-block-size:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], enableExpandInteractions: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableExpandInteractions", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideMenubar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideMenubar", required: false }] }], expandedPortalOutlet: [{ type: i0.ViewChild, args: ['expandedPortalOutlet', { ...{
                             read: CdkPortalOutlet
                         }, isSignal: true }] }], dashboardFrame: [{ type: i0.ViewChild, args: ['dashboardFrame', { isSignal: true }] }], dashboard: [{ type: i0.ViewChild, args: ['dashboard', { isSignal: true }] }] } });
@@ -449,11 +468,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiDashboardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardModule, imports: [SiDashboardCardComponent, SiDashboardComponent], exports: [SiDashboardCardComponent, SiDashboardComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardModule, imports: [SiDashboardCardComponent, SiDashboardComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardModule, imports: [SiDashboardCardComponent, SiDashboardComponent], exports: [SiDashboardCardComponent, SiDashboardComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardModule, imports: [SiDashboardCardComponent, SiDashboardComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiDashboardCardComponent, SiDashboardComponent],
@@ -478,33 +497,37 @@ class SiWidgetBaseDirective {
      * the skeleton indicates the loading of the value. Disable
      * the automatic loading mechanism by setting `SiWidgetBodyBaseComponent.disableAutoLoadingIndicator`.
      */
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Option to disable automatic start of skeleton loading indication.
      *
      * @defaultValue false
      */
-    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : {}), transform: booleanAttribute });
+    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Input to start and stop the skeleton loading indication.
      *
      * @defaultValue false
      */
-    showLoadingIndicatorInput = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicatorInput" } : {}), 
+    showLoadingIndicatorInput = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicatorInput" } : /* istanbul ignore next */ {}), 
         // eslint-disable-next-line @angular-eslint/no-input-rename
         alias: 'showLoadingIndicator',
         transform: booleanAttribute });
-    showLoadingIndicatorInternal = signal(undefined, ...(ngDevMode ? [{ debugName: "showLoadingIndicatorInternal" }] : []));
+    showLoadingIndicatorInternal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLoadingIndicatorInternal" }] : /* istanbul ignore next */ []));
     showLoadingIndicator = computed(() => {
         return this.showLoadingIndicatorInternal() ?? this.showLoadingIndicatorInput();
-    }, ...(ngDevMode ? [{ debugName: "showLoadingIndicator" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLoadingIndicator" }] : /* istanbul ignore next */ []));
     /**
      * Initial delay time in milliseconds before enabling loading indicator.
      * Only used once initially during construction.
      *
      * @defaultValue 300
      */
-    initialLoadingIndicatorDebounceTime = input(300, ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : []));
+    initialLoadingIndicatorDebounceTime = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : /* istanbul ignore next */ []));
     loadingTimer;
     ngOnChanges() {
         if (this.disableAutoLoadingIndicator()) {
@@ -530,10 +553,10 @@ class SiWidgetBaseDirective {
             }, this.initialLoadingIndicatorDebounceTime());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWidgetBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiWidgetBaseDirective, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disableAutoLoadingIndicator: { classPropertyName: "disableAutoLoadingIndicator", publicName: "disableAutoLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, showLoadingIndicatorInput: { classPropertyName: "showLoadingIndicatorInput", publicName: "showLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, initialLoadingIndicatorDebounceTime: { classPropertyName: "initialLoadingIndicatorDebounceTime", publicName: "initialLoadingIndicatorDebounceTime", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWidgetBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiWidgetBaseDirective, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disableAutoLoadingIndicator: { classPropertyName: "disableAutoLoadingIndicator", publicName: "disableAutoLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, showLoadingIndicatorInput: { classPropertyName: "showLoadingIndicatorInput", publicName: "showLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, initialLoadingIndicatorDebounceTime: { classPropertyName: "initialLoadingIndicatorDebounceTime", publicName: "initialLoadingIndicatorDebounceTime", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWidgetBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWidgetBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disableAutoLoadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoLoadingIndicator", required: false }] }], showLoadingIndicatorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingIndicator", required: false }] }], initialLoadingIndicatorDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLoadingIndicatorDebounceTime", required: false }] }] } });
 
@@ -551,21 +574,23 @@ class SiLinkWidgetComponent extends SiWidgetBaseDirective {
      *
      * @defaultValue false
      */
-    showLinkIcons = input(false, { ...(ngDevMode ? { debugName: "showLinkIcons" } : {}), transform: booleanAttribute });
+    showLinkIcons = input(false, { ...(ngDevMode ? { debugName: "showLinkIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * The number of skeleton progress indication rows.
      *
      * @defaultValue 3
      */
-    numberOfLinks = input(3, ...(ngDevMode ? [{ debugName: "numberOfLinks" }] : []));
-    ghosts = computed(() => new Array(this.numberOfLinks() ?? 3), ...(ngDevMode ? [{ debugName: "ghosts" }] : []));
+    numberOfLinks = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfLinks" }] : /* istanbul ignore next */ []));
+    ghosts = computed(() => new Array(this.numberOfLinks() ?? 3), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ghosts" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementRight2 });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLinkWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLinkWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLinkWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLinkWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-link-widget', imports: [SiIconComponent, SiLinkDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, 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" }]
+            args: [{ selector: 'si-link-widget', imports: [SiIconComponent, SiLinkDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }], propDecorators: { showLinkIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLinkIcons", required: false }] }], numberOfLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLinks", required: false }] }] } });
 
 /**
@@ -579,23 +604,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiListWidgetItemComponent extends SiWidgetBaseDirective {
     isLink = computed(() => {
         return typeof this.value()?.label === 'object';
-    }, ...(ngDevMode ? [{ debugName: "isLink" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
     badgeColor = computed(() => {
         return this.value()?.badgeColor ? 'bg-' + this.value()?.badgeColor : 'bg-default';
-    }, ...(ngDevMode ? [{ debugName: "badgeColor" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeColor" }] : /* istanbul ignore next */ []));
     link = computed(() => {
         return this.value()?.label;
-    }, ...(ngDevMode ? [{ debugName: "link" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
     label = computed(() => {
         return this.value()?.label;
-    }, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementRight2 });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListWidgetItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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\" [class]=\"badgeColor()\">{{ valueObject.badge | translate }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-h5\">{{ 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 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-icon 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: "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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiListWidgetItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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\" [class]=\"badgeColor()\">{{ valueObject.badge | translate }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-h5\">{{ 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 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-icon 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: "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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListWidgetItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiListWidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-list-widget-item', imports: [SiIconComponent, SiLinkDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, host: {
+            args: [{ selector: 'si-list-widget-item', imports: [SiIconComponent, SiLinkDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, 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\" [class]=\"badgeColor()\">{{ valueObject.badge | translate }}</span>\n  }\n  <span class=\"me-auto\">\n    @if (!isLink()) {\n      <span class=\"si-h5\">{{ 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 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-icon 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" }]
@@ -612,27 +641,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiListWidgetBodyComponent extends SiWidgetBaseDirective {
     translateService = injectSiTranslateService();
     /** Optional footer link for the list widget */
-    link = input(...(ngDevMode ? [undefined, { debugName: "link" }] : []));
+    link = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
     /**
      * label for the "search placeholder" name
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`)
+     * t(() => $localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search…`)
      * ```
      */
-    searchPlaceholderLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`), ...(ngDevMode ? [{ debugName: "searchPlaceholderLabel" }] : []));
+    searchPlaceholderLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search…`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholderLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enable ascending and descending SiListWidgetItem sorting. If enabled,
      * items are initially ascending sorted.
      */
-    sort = input(...(ngDevMode ? [undefined, { debugName: "sort" }] : []));
+    sort = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
     /**
      * Enables the search functionality.
      *
      * @defaultValue false
      */
-    search = input(false, { ...(ngDevMode ? { debugName: "search" } : {}), transform: booleanAttribute });
+    search = input(false, { ...(ngDevMode ? { debugName: "search" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Compare function of for two `SiListWidgetItem`s that is used to sort
      * the array of items. The default compares the item labels by using the
@@ -660,7 +692,8 @@ class SiListWidgetBodyComponent extends SiWidgetBaseDirective {
         const aLabel = typeof a.label === 'object' ? a.label.title : a.label;
         const bLabel = typeof b.label === 'object' ? b.label.title : b.label;
         return aLabel.localeCompare(bLabel);
-    }, ...(ngDevMode ? [{ debugName: "compareFn" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareFn" }] : /* istanbul ignore next */ []));
     /**
      * Filter function that is used to filter down the list items when the user enters
      * a term in the search bar. Default function.
@@ -685,15 +718,18 @@ class SiListWidgetBodyComponent extends SiWidgetBaseDirective {
     filterFn = input((item, searchTerm) => {
         const aLabel = typeof item.label === 'object' ? item.label.title : item.label;
         return aLabel.toLowerCase().includes(searchTerm.toLowerCase());
-    }, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
     /**
      * The number of skeleton progress indication rows.
      *
      * @defaultValue 6
      */
-    numberOfLinks = input(6, ...(ngDevMode ? [{ debugName: "numberOfLinks" }] : []));
+    numberOfLinks = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfLinks" }] : /* istanbul ignore next */ []));
     /** Used to display the defined number of ghost items */
-    ghosts = computed(() => new Array(this.numberOfLinks() ?? 6), ...(ngDevMode ? [{ debugName: "ghosts" }] : []));
+    ghosts = computed(() => new Array(this.numberOfLinks() ?? 6), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ghosts" }] : /* istanbul ignore next */ []));
     /** Replica of value with pre-translated labels, recomputed when value or language changes. */
     translatedItems = toSignal(toObservable(this.value).pipe(switchMap(items => {
         if (!items) {
@@ -728,19 +764,21 @@ class SiListWidgetBodyComponent extends SiWidgetBaseDirective {
             filteredListWidgetItems = filteredListWidgetItems?.sort((a, b) => (this.compareFn()(a, b) ?? 0) * factor);
         }
         return filteredListWidgetItems;
-    }, ...(ngDevMode ? [{ debugName: "filteredListWidgetItems" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredListWidgetItems" }] : /* istanbul ignore next */ []));
     /**
      * Current search term used to filter the displayed list items.
      *
      * @defaultValue ''
      */
-    searchText = model('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiListWidgetBodyComponent, isStandalone: true, selector: "si-list-widget-body", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderLabel: { classPropertyName: "searchPlaceholderLabel", publicName: "searchPlaceholderLabel", 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 }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange" }, usesInheritance: true, ngImport: i0, template: "@if (search()) {\n  <si-search-bar\n    class=\"px-6 py-4\"\n    showIcon\n    colorVariant=\"base-0\"\n    [debounceTime]=\"400\"\n    [placeholder]=\"searchPlaceholderLabel() | translate\"\n    [(ngModel)]=\"searchText\"\n  />\n}\n@let filteredListWidgetItemsList = filteredListWidgetItems();\n@if (!showLoadingIndicator() && filteredListWidgetItemsList) {\n  @if (filteredListWidgetItemsList.length > 0) {\n    <div class=\"list-group list-group-lg\" role=\"list\">\n      @for (item of filteredListWidgetItemsList; track $index) {\n        <si-list-widget-item [value]=\"item\" />\n      }\n    </div>\n  } @else {\n    <ng-content select=\"[empty-state]\" />\n  }\n} @else {\n  <div class=\"list-group list-group-lg\" role=\"list\">\n    @for (some of ghosts(); track $index) {\n      <si-list-widget-item [value]=\"undefined\" />\n    }\n  </div>\n}\n", styles: [":host{background-color:var(--element-base-1);border-radius:var(--element-radius-3);display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}:host:has(si-search-bar){padding-block-start:8px}:host-context(si-card,si-dashboard-card){padding-block-start:unset!important}.list-group{border-radius:inherit;overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: SiListWidgetItemComponent, selector: "si-list-widget-item" }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    searchText = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiListWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiListWidgetBodyComponent, isStandalone: true, selector: "si-list-widget-body", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderLabel: { classPropertyName: "searchPlaceholderLabel", publicName: "searchPlaceholderLabel", 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 }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange" }, usesInheritance: true, ngImport: i0, template: "@if (search()) {\n  <si-search-bar\n    class=\"px-6 py-4\"\n    showIcon\n    colorVariant=\"base-0\"\n    [debounceTime]=\"400\"\n    [placeholder]=\"searchPlaceholderLabel() | translate\"\n    [(ngModel)]=\"searchText\"\n  />\n}\n@let filteredListWidgetItemsList = filteredListWidgetItems();\n@if (!showLoadingIndicator() && filteredListWidgetItemsList) {\n  @if (filteredListWidgetItemsList.length > 0) {\n    <div class=\"list-group list-group-lg\" role=\"list\">\n      @for (item of filteredListWidgetItemsList; track $index) {\n        <si-list-widget-item [value]=\"item\" />\n      }\n    </div>\n  } @else {\n    <ng-content select=\"[empty-state]\" />\n  }\n} @else {\n  <div class=\"list-group list-group-lg\" role=\"list\">\n    @for (some of ghosts(); track $index) {\n      <si-list-widget-item [value]=\"undefined\" />\n    }\n  </div>\n}\n", styles: [":host{background-color:var(--si-sys-background-1);border-radius:var(--element-radius-3);display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}:host:has(si-search-bar){padding-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(si-card,si-dashboard-card){padding-block-start:unset!important}.list-group{border-radius:inherit;overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: SiListWidgetItemComponent, selector: "si-list-widget-item" }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListWidgetBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiListWidgetBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-list-widget-body', imports: [SiListWidgetItemComponent, SiSearchBarComponent, SiTranslatePipe, FormsModule], changeDetection: ChangeDetectionStrategy.Default, host: { class: '' }, template: "@if (search()) {\n  <si-search-bar\n    class=\"px-6 py-4\"\n    showIcon\n    colorVariant=\"base-0\"\n    [debounceTime]=\"400\"\n    [placeholder]=\"searchPlaceholderLabel() | translate\"\n    [(ngModel)]=\"searchText\"\n  />\n}\n@let filteredListWidgetItemsList = filteredListWidgetItems();\n@if (!showLoadingIndicator() && filteredListWidgetItemsList) {\n  @if (filteredListWidgetItemsList.length > 0) {\n    <div class=\"list-group list-group-lg\" role=\"list\">\n      @for (item of filteredListWidgetItemsList; track $index) {\n        <si-list-widget-item [value]=\"item\" />\n      }\n    </div>\n  } @else {\n    <ng-content select=\"[empty-state]\" />\n  }\n} @else {\n  <div class=\"list-group list-group-lg\" role=\"list\">\n    @for (some of ghosts(); track $index) {\n      <si-list-widget-item [value]=\"undefined\" />\n    }\n  </div>\n}\n", styles: [":host{background-color:var(--element-base-1);border-radius:var(--element-radius-3);display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}:host:has(si-search-bar){padding-block-start:8px}:host-context(si-card,si-dashboard-card){padding-block-start:unset!important}.list-group{border-radius:inherit;overflow-y:auto;overflow-x:hidden}\n"] }]
+            args: [{ selector: 'si-list-widget-body', imports: [SiListWidgetItemComponent, SiSearchBarComponent, SiTranslatePipe, FormsModule], changeDetection: ChangeDetectionStrategy.Eager, host: { class: '' }, template: "@if (search()) {\n  <si-search-bar\n    class=\"px-6 py-4\"\n    showIcon\n    colorVariant=\"base-0\"\n    [debounceTime]=\"400\"\n    [placeholder]=\"searchPlaceholderLabel() | translate\"\n    [(ngModel)]=\"searchText\"\n  />\n}\n@let filteredListWidgetItemsList = filteredListWidgetItems();\n@if (!showLoadingIndicator() && filteredListWidgetItemsList) {\n  @if (filteredListWidgetItemsList.length > 0) {\n    <div class=\"list-group list-group-lg\" role=\"list\">\n      @for (item of filteredListWidgetItemsList; track $index) {\n        <si-list-widget-item [value]=\"item\" />\n      }\n    </div>\n  } @else {\n    <ng-content select=\"[empty-state]\" />\n  }\n} @else {\n  <div class=\"list-group list-group-lg\" role=\"list\">\n    @for (some of ghosts(); track $index) {\n      <si-list-widget-item [value]=\"undefined\" />\n    }\n  </div>\n}\n", styles: [":host{background-color:var(--si-sys-background-1);border-radius:var(--element-radius-3);display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}:host:has(si-search-bar){padding-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(si-card,si-dashboard-card){padding-block-start:unset!important}.list-group{border-radius:inherit;overflow-y:auto;overflow-x:hidden}\n"] }]
         }], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], searchPlaceholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], numberOfLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLinks", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
@@ -754,42 +792,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiListWidgetComponent extends SiWidgetBaseDirective {
     icons = addIcons({ elementRight2, elementSortDown, elementSortUp });
     /** List widget heading. */
-    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /** Optional footer link for the list widget */
-    link = input(...(ngDevMode ? [undefined, { debugName: "link" }] : []));
+    link = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
     /**
      * label for the "search placeholder" name
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`)
+     * t(() => $localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search…`)
      * ```
      */
-    searchPlaceholderLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`), ...(ngDevMode ? [{ debugName: "searchPlaceholderLabel" }] : []));
+    searchPlaceholderLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search…`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholderLabel" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_LIST_WIDGET.SORT_ASCENDING:Sort ascending`)
      * ```
      */
-    sortAscendingLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SORT_ASCENDING:Sort ascending`), ...(ngDevMode ? [{ debugName: "sortAscendingLabel" }] : []));
+    sortAscendingLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SORT_ASCENDING:Sort ascending`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortAscendingLabel" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_LIST_WIDGET.SORT_DESCENDING:Sort descending`)
      * ```
      */
-    sortDescendingLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SORT_DESCENDING:Sort descending`), ...(ngDevMode ? [{ debugName: "sortDescendingLabel" }] : []));
+    sortDescendingLabel = input(t(() => $localize `:@@SI_LIST_WIDGET.SORT_DESCENDING:Sort descending`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortDescendingLabel" }] : /* istanbul ignore next */ []));
     /**
      * Set `ASC` of ascending sorting, `DSC` for descending sorting and `undefined` for no sorting.
      */
-    sort = model(...(ngDevMode ? [undefined, { debugName: "sort" }] : []));
+    sort = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
     /**
      * Enables the search functionality.
      *
      * @defaultValue false
      */
-    search = input(false, { ...(ngDevMode ? { debugName: "search" } : {}), transform: booleanAttribute });
+    search = input(false, { ...(ngDevMode ? { debugName: "search" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Compare function of for two `SiListWidgetItem`s that is used to sort
      * the array of items. The default compares the item labels by using the
@@ -817,7 +861,8 @@ class SiListWidgetComponent extends SiWidgetBaseDirective {
         const aLabel = typeof a.label === 'object' ? a.label.title : a.label;
         const bLabel = typeof b.label === 'object' ? b.label.title : b.label;
         return aLabel.localeCompare(bLabel);
-    }, ...(ngDevMode ? [{ debugName: "compareFn" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareFn" }] : /* istanbul ignore next */ []));
     /**
      * Filter function that is used to filter down the list items when the user enters
      * a term in the search bar. Default function.
@@ -842,21 +887,25 @@ class SiListWidgetComponent extends SiWidgetBaseDirective {
     filterFn = input((item, searchTerm) => {
         const aLabel = typeof item.label === 'object' ? item.label.title : item.label;
         return aLabel.toLowerCase().includes(searchTerm.toLowerCase());
-    }, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
     /**
      * The number of skeleton progress indication rows.
      *
      * @defaultValue 6
      */
-    numberOfLinks = input(6, ...(ngDevMode ? [{ debugName: "numberOfLinks" }] : []));
+    numberOfLinks = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfLinks" }] : /* istanbul ignore next */ []));
     /**
      * Optional accent line
      */
-    accentLine = input(...(ngDevMode ? [undefined, { debugName: "accentLine" }] : []));
+    accentLine = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accentLine" }] : /* istanbul ignore next */ []));
     accentClass = computed(() => {
         const accentLine = this.accentLine();
         return accentLine ? 'accent-' + accentLine : '';
-    }, ...(ngDevMode ? [{ debugName: "accentClass" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentClass" }] : /* istanbul ignore next */ []));
     /** The menu item array used to display the sort button. */
     sortAction = computed(() => {
         const sortAction = [
@@ -877,7 +926,8 @@ class SiListWidgetComponent extends SiWidgetBaseDirective {
             sortAction[0].icon = this.icons.elementSortDown;
         }
         return sortAction;
-    }, ...(ngDevMode ? [{ debugName: "sortAction" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortAction" }] : /* istanbul ignore next */ []));
     doSort() {
         if (this.sort() === 'ASC') {
             this.sort.set('DSC');
@@ -886,10 +936,10 @@ class SiListWidgetComponent extends SiWidgetBaseDirective {
             this.sort.set('ASC');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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  actionBarViewType=\"expanded\"\n  class=\"h-100\"\n  [class]=\"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 | translate }}\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 | translate }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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  actionBarViewType=\"expanded\"\n  class=\"h-100\"\n  [class]=\"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 | translate }}\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 | translate }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiListWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-list-widget', imports: [
                         SiCardComponent,
@@ -897,7 +947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiLinkDirective,
                         SiListWidgetBodyComponent,
                         SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, host: { class: 'si-list-widget' }, template: "<si-card\n  actionBarViewType=\"expanded\"\n  class=\"h-100\"\n  [class]=\"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 | translate }}\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 | translate }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, host: { class: 'si-list-widget' }, template: "<si-card\n  actionBarViewType=\"expanded\"\n  class=\"h-100\"\n  [class]=\"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 | translate }}\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 | translate }}\n        </button>\n      }\n    </div>\n  }\n</si-card>\n" }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], searchPlaceholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderLabel", required: false }] }], sortAscendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortAscendingLabel", required: false }] }], sortDescendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDescendingLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], numberOfLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLinks", required: false }] }], accentLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentLine", required: false }] }] } });
 
 /**
@@ -913,20 +963,21 @@ class SiTimelineWidgetItemComponent extends SiWidgetBaseDirective {
      *
      * @defaultValue `true`
      */
-    showDescription = input(true, ...(ngDevMode ? [{ debugName: "showDescription" }] : []));
+    showDescription = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDescription" }] : /* istanbul ignore next */ []));
     /**
      * Aria label text for actions button dropdown.
      */
-    ariaLabelDropdown = t(() => $localize `:@@SI_DASHBOARD.EXPAND_WIDGET_ACTIONS:Expand actions`);
+    ariaLabelDropdown = t(() => $localize `:@@SI_DASHBOARD.EXPAND_WIDGET_ACTIONS:Show actions`);
     activatedRoute = inject(ActivatedRoute, { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimelineWidgetItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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-h5\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body 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            [class]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-icon]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-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 | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-icon btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"ariaLabelDropdown | translate\"\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", styles: [":host(:last-child) .si-timeline-widget-item-lower-line{display:none}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { 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: i1$2.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimelineWidgetItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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-body-sm text-secondary\">{{ valueObject.timeStamp | translate }}</span>\n      <span class=\"si-h5\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body 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            [class]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-icon]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-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 | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-icon btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"ariaLabelDropdown | translate\"\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", styles: [":host(:last-child) .si-timeline-widget-item-lower-line{display:none}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: SiMenuModule }, { kind: "component", type: i1$2.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimelineWidgetItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimelineWidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-timeline-widget-item', imports: [SiIconComponent, SiTranslatePipe, A11yModule, RouterLink, SiMenuModule, CdkMenuTrigger], changeDetection: ChangeDetectionStrategy.Default, host: {
+            args: [{ selector: 'si-timeline-widget-item', imports: [SiIconComponent, SiTranslatePipe, A11yModule, RouterLink, SiMenuModule, CdkMenuTrigger], changeDetection: ChangeDetectionStrategy.Eager, 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 [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-h5\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body 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            [class]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-icon]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-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 | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-icon btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"ariaLabelDropdown | translate\"\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", styles: [":host(:last-child) .si-timeline-widget-item-lower-line{display:none}\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-body-sm text-secondary\">{{ valueObject.timeStamp | translate }}</span>\n      <span class=\"si-h5\">{{ valueObject.title | translate }}</span>\n      @if (valueObject.description) {\n        <span class=\"si-body 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            [class]=\"action.customClass ?? 'btn-tertiary'\"\n            [class.btn-icon]=\"action.iconOnly\"\n            (click)=\"action.action(action)\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-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 | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-tertiary-ghost\"\n            [href]=\"action.href\"\n            [target]=\"action.target\"\n            [attr.aria-label]=\"action.label | translate\"\n            [class.btn-icon]=\"action.iconOnly\"\n          >\n            @if (action.icon) {\n              <si-icon class=\"icon\" [icon]=\"action.icon\" />\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-icon btn-tertiary element-options-vertical\"\n            [attr.aria-label]=\"ariaLabelDropdown | translate\"\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", styles: [":host(:last-child) .si-timeline-widget-item-lower-line{display:none}\n"] }]
         }], propDecorators: { showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }] } });
 
 /**
@@ -939,23 +990,26 @@ class SiTimelineWidgetBodyComponent extends SiWidgetBaseDirective {
      *
      * @defaultValue 4
      */
-    numberOfItems = input(4, ...(ngDevMode ? [{ debugName: "numberOfItems" }] : []));
+    numberOfItems = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfItems" }] : /* istanbul ignore next */ []));
     /**
      * Whether to show or hide the description row during skeleton progress indication.
      *
      * @defaultValue `true`
      */
-    showDescription = input(true, ...(ngDevMode ? [{ debugName: "showDescription" }] : []));
+    showDescription = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDescription" }] : /* istanbul ignore next */ []));
     /** Used to display the defined number of ghost items */
     ghosts = computed(() => {
         return new Array(this.numberOfItems() ?? 4);
-    }, ...(ngDevMode ? [{ debugName: "ghosts" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimelineWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTimelineWidgetBodyComponent, isStandalone: true, selector: "si-timeline-widget-body", inputs: { numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@let valueObject = value();\n<div\n  class=\"focus-inside\"\n  tabindex=\"0\"\n  [attr.role]=\"\n    (!showLoadingIndicator() && valueObject && valueObject.length > 0) || showLoadingIndicator()\n      ? 'list'\n      : null\n  \"\n>\n  @if (!showLoadingIndicator() && valueObject) {\n    @if (valueObject && valueObject.length > 0) {\n      @for (item of valueObject; track $index) {\n        <si-timeline-widget-item [value]=\"item\" />\n      }\n    } @else {\n      <ng-content select=\"[empty-state]\" />\n    }\n  } @else {\n    @for (some of ghosts(); track $index) {\n      <si-timeline-widget-item [value]=\"undefined\" [showDescription]=\"showDescription()\" />\n    }\n  }\n</div>\n", styles: [":host{background-color:var(--element-base-1);flex:auto;overflow:hidden}div{block-size:100%;padding-inline:16px 8px;overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: SiTimelineWidgetItemComponent, selector: "si-timeline-widget-item", inputs: ["showDescription"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ghosts" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimelineWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTimelineWidgetBodyComponent, isStandalone: true, selector: "si-timeline-widget-body", inputs: { numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@let valueObject = value();\n<div\n  class=\"focus-inside\"\n  tabindex=\"0\"\n  [attr.role]=\"\n    (!showLoadingIndicator() && valueObject && valueObject.length > 0) || showLoadingIndicator()\n      ? 'list'\n      : null\n  \"\n>\n  @if (!showLoadingIndicator() && valueObject) {\n    @if (valueObject && valueObject.length > 0) {\n      @for (item of valueObject; track $index) {\n        <si-timeline-widget-item [value]=\"item\" />\n      }\n    } @else {\n      <ng-content select=\"[empty-state]\" />\n    }\n  } @else {\n    @for (some of ghosts(); track $index) {\n      <si-timeline-widget-item [value]=\"undefined\" [showDescription]=\"showDescription()\" />\n    }\n  }\n</div>\n", styles: [":host{background-color:var(--si-sys-background-1);flex:auto;overflow:hidden}div{block-size:100%;padding-inline:var(--si-sys-sizing-spacing-x-60) var(--si-sys-sizing-spacing-x-40);overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: SiTimelineWidgetItemComponent, selector: "si-timeline-widget-item", inputs: ["showDescription"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimelineWidgetBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimelineWidgetBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-timeline-widget-body', imports: [SiTimelineWidgetItemComponent], changeDetection: ChangeDetectionStrategy.Default, template: "@let valueObject = value();\n<div\n  class=\"focus-inside\"\n  tabindex=\"0\"\n  [attr.role]=\"\n    (!showLoadingIndicator() && valueObject && valueObject.length > 0) || showLoadingIndicator()\n      ? 'list'\n      : null\n  \"\n>\n  @if (!showLoadingIndicator() && valueObject) {\n    @if (valueObject && valueObject.length > 0) {\n      @for (item of valueObject; track $index) {\n        <si-timeline-widget-item [value]=\"item\" />\n      }\n    } @else {\n      <ng-content select=\"[empty-state]\" />\n    }\n  } @else {\n    @for (some of ghosts(); track $index) {\n      <si-timeline-widget-item [value]=\"undefined\" [showDescription]=\"showDescription()\" />\n    }\n  }\n</div>\n", styles: [":host{background-color:var(--element-base-1);flex:auto;overflow:hidden}div{block-size:100%;padding-inline:16px 8px;overflow-y:auto;overflow-x:hidden}\n"] }]
+            args: [{ selector: 'si-timeline-widget-body', imports: [SiTimelineWidgetItemComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "@let valueObject = value();\n<div\n  class=\"focus-inside\"\n  tabindex=\"0\"\n  [attr.role]=\"\n    (!showLoadingIndicator() && valueObject && valueObject.length > 0) || showLoadingIndicator()\n      ? 'list'\n      : null\n  \"\n>\n  @if (!showLoadingIndicator() && valueObject) {\n    @if (valueObject && valueObject.length > 0) {\n      @for (item of valueObject; track $index) {\n        <si-timeline-widget-item [value]=\"item\" />\n      }\n    } @else {\n      <ng-content select=\"[empty-state]\" />\n    }\n  } @else {\n    @for (some of ghosts(); track $index) {\n      <si-timeline-widget-item [value]=\"undefined\" [showDescription]=\"showDescription()\" />\n    }\n  }\n</div>\n", styles: [":host{background-color:var(--si-sys-background-1);flex:auto;overflow:hidden}div{block-size:100%;padding-inline:var(--si-sys-sizing-spacing-x-60) var(--si-sys-sizing-spacing-x-40);overflow-y:auto;overflow-x:hidden}\n"] }]
         }], propDecorators: { numberOfItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfItems", required: false }] }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }] } });
 
 /**
@@ -966,50 +1020,58 @@ class SiTimelineWidgetComponent extends SiWidgetBaseDirective {
     /**
      * Timeline widget header text.
      */
-    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Input list of primary action items. Supports up to **4** actions and omits additional ones.
      *
      * @defaultValue []
      */
-    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
+    primaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Input list of secondary action items.
      *
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Link that leads the user to more information
      * or triggers and action. The `link.title` is displayed.
      * The title will be translated.
      */
-    link = input(...(ngDevMode ? [undefined, { debugName: "link" }] : []));
+    link = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
     /**
      * Number of skeleton progress indication items.
      *
      * @defaultValue 4
      */
-    numberOfItems = input(4, ...(ngDevMode ? [{ debugName: "numberOfItems" }] : []));
+    numberOfItems = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfItems" }] : /* istanbul ignore next */ []));
     /**
      * Whether to show or hide the description row during skeleton progress indication.
      *
      * @defaultValue `true`
      */
-    showDescription = input(true, ...(ngDevMode ? [{ debugName: "showDescription" }] : []));
+    showDescription = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDescription" }] : /* istanbul ignore next */ []));
     /**
      * Optional accent line
      */
-    accentLine = input(...(ngDevMode ? [undefined, { debugName: "accentLine" }] : []));
+    accentLine = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accentLine" }] : /* istanbul ignore next */ []));
     accentClass = computed(() => {
         const accentLine = this.accentLine();
         return accentLine ? 'accent-' + accentLine : '';
-    }, ...(ngDevMode ? [{ debugName: "accentClass" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentClass" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementRight2 });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimelineWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTimelineWidgetComponent, isStandalone: true, selector: "si-timeline-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n>\n  <si-timeline-widget-body\n    body\n    [value]=\"value()\"\n    [showDescription]=\"showDescription()\"\n    [numberOfItems]=\"numberOfItems()\"\n    [class.pb-6]=\"!link()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-timeline-widget-body>\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title | translate }}\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 | translate\n        }}</button>\n      }\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "component", type: SiTimelineWidgetBodyComponent, selector: "si-timeline-widget-body", inputs: ["numberOfItems", "showDescription"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimelineWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTimelineWidgetComponent, isStandalone: true, selector: "si-timeline-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n>\n  <si-timeline-widget-body\n    body\n    [value]=\"value()\"\n    [showDescription]=\"showDescription()\"\n    [numberOfItems]=\"numberOfItems()\"\n    [class.pb-6]=\"!link()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-timeline-widget-body>\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title | translate }}\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 | translate\n        }}</button>\n      }\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "component", type: SiTimelineWidgetBodyComponent, selector: "si-timeline-widget-body", inputs: ["numberOfItems", "showDescription"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTimelineWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTimelineWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-timeline-widget', imports: [
                         SiLinkDirective,
@@ -1017,7 +1079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTimelineWidgetBodyComponent,
                         SiTranslatePipe,
                         SiIconComponent
-                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n>\n  <si-timeline-widget-body\n    body\n    [value]=\"value()\"\n    [showDescription]=\"showDescription()\"\n    [numberOfItems]=\"numberOfItems()\"\n    [class.pb-6]=\"!link()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-timeline-widget-body>\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title | translate }}\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 | translate\n        }}</button>\n      }\n    </div>\n  }\n</si-card>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n>\n  <si-timeline-widget-body\n    body\n    [value]=\"value()\"\n    [showDescription]=\"showDescription()\"\n    [numberOfItems]=\"numberOfItems()\"\n    [class.pb-6]=\"!link()\"\n    [showLoadingIndicator]=\"showLoadingIndicator()\"\n  >\n    <ng-content select=\"[empty-state]\" empty-state />\n  </si-timeline-widget-body>\n  @let linkValue = link();\n  @if (linkValue) {\n    <div class=\"card-footer\" footer>\n      @if (!linkValue.action) {\n        <a [siLink]=\"linkValue\">\n          {{ linkValue.title | translate }}\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 | translate\n        }}</button>\n      }\n    </div>\n  }\n</si-card>\n" }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], numberOfItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfItems", required: false }] }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }], accentLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentLine", required: false }] }] } });
 
 /**
@@ -1031,26 +1093,30 @@ class SiValueWidgetBodyComponent extends SiWidgetBaseDirective {
     /**
      * The unit of the value (e.g. kWh or users). Only visible if `value` is available.
      */
-    unit = input(...(ngDevMode ? [undefined, { debugName: "unit" }] : []));
+    unit = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "unit" }] : /* istanbul ignore next */ []));
     /**
      * The element icon name. Only visible if `value` is available.
      */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     /**
      * Show a status icon instead of the {@link icon}.
      */
-    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
+    status = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "status" }] : /* istanbul ignore next */ []));
     /**
      * Short description of the value. A description is mandatory
      * to show an icon. Only visible if `value` is available.
      */
-    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValueWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiValueWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValueWidgetBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiValueWidgetBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-value-widget-body', imports: [SiIconComponent, SiStatusIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, 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" }]
+            args: [{ selector: 'si-value-widget-body', imports: [SiIconComponent, SiStatusIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }], propDecorators: { unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
 /**
@@ -1073,105 +1139,122 @@ class SiValueWidgetComponent {
     /**
      * Value widget header text.
      */
-    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Input list of primary action items. Supports up to **4** actions and omits additional ones.
      *
      * @defaultValue []
      */
-    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
+    primaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Input list of secondary action items.
      *
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * The main value to be displayed. If no value is set,
      * the skeleton indicates the loading of the value. Disable
      * the automatic loading mechanism by setting `SiValueWidgetComponent.disableAutoLoadingIndicator`.
      */
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * The unit of the value (e.g. kWh or users). Only visible if `value` is available.
      */
-    unit = input(...(ngDevMode ? [undefined, { debugName: "unit" }] : []));
+    unit = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "unit" }] : /* istanbul ignore next */ []));
     /**
      * The element icon name. Only visible if `value` is available.
      */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     /**
      * Show a status icon instead of the {@link icon}.
      */
-    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
+    status = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "status" }] : /* istanbul ignore next */ []));
     /**
      * Short description of the value. A description is mandatory
      * to show an icon. Only visible if `value` is available.
      */
-    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
     /**
      * Link that leads the user to more information
      * or triggers and action. The `link.title` is displayed.
      * The title will be translated.
      */
-    link = input(...(ngDevMode ? [undefined, { debugName: "link" }] : []));
+    link = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
     /**
      * Option to disable automatic start of skeleton loading indication.
      *
      * @defaultValue false
      */
-    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : {}), transform: booleanAttribute });
+    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Input to start and stop the skeleton loading indication.
      *
      * @defaultValue false
      */
-    showLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicator" } : {}), transform: booleanAttribute });
+    showLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Initial delay time in milliseconds before enabling loading indicator.
      * Only used once initially during construction.
      *
      * @defaultValue 300
      */
-    initialLoadingIndicatorDebounceTime = input(300, ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : []));
+    initialLoadingIndicatorDebounceTime = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : /* istanbul ignore next */ []));
     /**
      * Image source for the card.
      */
-    imgSrc = input(...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : []));
+    imgSrc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : /* istanbul ignore next */ []));
     /**
      * Alt text for a provided image.
      */
-    imgAlt = input(...(ngDevMode ? [undefined, { debugName: "imgAlt" }] : []));
+    imgAlt = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imgAlt" }] : /* istanbul ignore next */ []));
     /**
      * Defines if an image is placed on top or start (left) of the card.
      *
      * @defaultValue 'vertical'
      */
-    imgDir = input('vertical', ...(ngDevMode ? [{ debugName: "imgDir" }] : []));
+    imgDir = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imgDir" }] : /* istanbul ignore next */ []));
     /**
      * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
      *
      * @defaultValue 'scale-down'
      */
-    imgObjectFit = input('scale-down', ...(ngDevMode ? [{ debugName: "imgObjectFit" }] : []));
+    imgObjectFit = input('scale-down', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imgObjectFit" }] : /* istanbul ignore next */ []));
     /**
      * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
      */
-    imgObjectPosition = input(...(ngDevMode ? [undefined, { debugName: "imgObjectPosition" }] : []));
+    imgObjectPosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imgObjectPosition" }] : /* istanbul ignore next */ []));
     /**
      * Optional accent line
      */
-    accentLine = input(...(ngDevMode ? [undefined, { debugName: "accentLine" }] : []));
+    accentLine = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accentLine" }] : /* istanbul ignore next */ []));
     accentClass = computed(() => {
         const accentLine = this.accentLine();
         return accentLine ? 'accent-' + accentLine : '';
-    }, ...(ngDevMode ? [{ debugName: "accentClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValueWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiValueWidgetComponent, isStandalone: true, selector: "si-value-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, 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 }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, disableAutoLoadingIndicator: { classPropertyName: "disableAutoLoadingIndicator", publicName: "disableAutoLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, showLoadingIndicator: { classPropertyName: "showLoadingIndicator", publicName: "showLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, initialLoadingIndicatorDebounceTime: { classPropertyName: "initialLoadingIndicatorDebounceTime", publicName: "initialLoadingIndicatorDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-value-widget-body\n      [value]=\"value()\"\n      [unit]=\"unit()\"\n      [icon]=\"icon()\"\n      [status]=\"status()\"\n      [description]=\"description()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n  @let linkObject = link();\n  @if (linkObject) {\n    <div class=\"card-footer\" footer>\n      <a [siLink]=\"linkObject\">{{ linkObject.title | translate }}</a>\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiValueWidgetBodyComponent, selector: "si-value-widget-body", inputs: ["unit", "icon", "status", "description"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiValueWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiValueWidgetComponent, isStandalone: true, selector: "si-value-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, 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 }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, disableAutoLoadingIndicator: { classPropertyName: "disableAutoLoadingIndicator", publicName: "disableAutoLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, showLoadingIndicator: { classPropertyName: "showLoadingIndicator", publicName: "showLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, initialLoadingIndicatorDebounceTime: { classPropertyName: "initialLoadingIndicatorDebounceTime", publicName: "initialLoadingIndicatorDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-value-widget-body\n      [value]=\"value()\"\n      [unit]=\"unit()\"\n      [icon]=\"icon()\"\n      [status]=\"status()\"\n      [description]=\"description()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n  @let linkObject = link();\n  @if (linkObject) {\n    <div class=\"card-footer\" footer>\n      <a [siLink]=\"linkObject\">{{ linkObject.title | translate }}</a>\n    </div>\n  }\n</si-card>\n", dependencies: [{ kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiValueWidgetBodyComponent, selector: "si-value-widget-body", inputs: ["unit", "icon", "status", "description"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValueWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiValueWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-value-widget', imports: [SiCardComponent, SiLinkDirective, SiTranslatePipe, SiValueWidgetBodyComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-value-widget-body\n      [value]=\"value()\"\n      [unit]=\"unit()\"\n      [icon]=\"icon()\"\n      [status]=\"status()\"\n      [description]=\"description()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n  @let linkObject = link();\n  @if (linkObject) {\n    <div class=\"card-footer\" footer>\n      <a [siLink]=\"linkObject\">{{ linkObject.title | translate }}</a>\n    </div>\n  }\n</si-card>\n" }]
+            args: [{ selector: 'si-value-widget', imports: [SiCardComponent, SiLinkDirective, SiTranslatePipe, SiValueWidgetBodyComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"heading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-value-widget-body\n      [value]=\"value()\"\n      [unit]=\"unit()\"\n      [icon]=\"icon()\"\n      [status]=\"status()\"\n      [description]=\"description()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n  @let linkObject = link();\n  @if (linkObject) {\n    <div class=\"card-footer\" footer>\n      <a [siLink]=\"linkObject\">{{ linkObject.title | translate }}</a>\n    </div>\n  }\n</si-card>\n" }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], disableAutoLoadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoLoadingIndicator", required: false }] }], showLoadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingIndicator", required: false }] }], initialLoadingIndicatorDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLoadingIndicatorDebounceTime", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: false }] }], imgAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgAlt", required: false }] }], imgDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgDir", required: false }] }], imgObjectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgObjectFit", required: false }] }], imgObjectPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgObjectPosition", required: false }] }], accentLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentLine", required: false }] }] } });
 
 /**
@@ -1200,10 +1283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * widget can skip the illustration.
  */
 class SiWeatherIconResolver {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherIconResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherIconResolver, providedIn: 'root', useFactory: () => inject(SiDefaultWeatherIconResolver) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherIconResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherIconResolver, providedIn: 'root', useFactory: () => inject(SiDefaultWeatherIconResolver) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherIconResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherIconResolver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1243,10 +1326,10 @@ class SiDefaultWeatherIconResolver extends SiWeatherIconResolver {
         }
         return { icon: mapped, alt: icon.alt };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1265,17 +1348,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiWeatherWidgetIllustrationComponent {
     /** Weather icon data or a direct image URL to render. */
-    illustration = input(...(ngDevMode ? [undefined, { debugName: "illustration" }] : []));
+    illustration = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "illustration" }] : /* istanbul ignore next */ []));
     /** Weather condition used as fallback alt text. */
-    condition = input(...(ngDevMode ? [undefined, { debugName: "condition" }] : []));
+    condition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "condition" }] : /* istanbul ignore next */ []));
     /** Alt text used when neither the illustration nor condition provides one. */
-    altFallback = input(...(ngDevMode ? [undefined, { debugName: "altFallback" }] : []));
+    altFallback = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "altFallback" }] : /* istanbul ignore next */ []));
     /**
      * Display size of the illustration.
      *
      * @defaultValue 'lg'
      */
-    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     resolver = inject(SiWeatherIconResolver);
     defaultAlt = t(() => $localize `:@@SI_WEATHER_WIDGET.ILLUSTRATION_ALT:Weather illustration`);
     resolved = computed(() => {
@@ -1299,9 +1386,10 @@ class SiWeatherWidgetIllustrationComponent {
             src: resolution.icon ? undefined : resolution.src,
             alt: resolution.alt ?? icon.alt ?? this.condition() ?? this.altFallback() ?? this.defaultAlt
         };
-    }, ...(ngDevMode ? [{ debugName: "resolved" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiWeatherWidgetIllustrationComponent, isStandalone: true, selector: "si-weather-widget-illustration", inputs: { illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: false, transformFunction: null }, altFallback: { classPropertyName: "altFallback", publicName: "altFallback", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.si-weather-widget-illustration-sm": "size() === 'sm'", "class.si-weather-widget-illustration-md": "size() === 'md'", "class.si-weather-widget-illustration-lg": "size() === 'lg'" } }, ngImport: i0, template: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiWeatherWidgetIllustrationComponent, isStandalone: true, selector: "si-weather-widget-illustration", inputs: { illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: false, transformFunction: null }, altFallback: { classPropertyName: "altFallback", publicName: "altFallback", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.si-weather-widget-illustration-sm": "size() === 'sm'", "class.si-weather-widget-illustration-md": "size() === 'md'", "class.si-weather-widget-illustration-lg": "size() === 'lg'" } }, ngImport: i0, template: `
     @let res = resolved();
     @if (res) {
       @if (res.icon) {
@@ -1315,9 +1403,9 @@ class SiWeatherWidgetIllustrationComponent {
         <img class="si-weather-widget-illustration" [src]="res.src" [alt]="res.alt | translate" />
       }
     }
-  `, isInline: true, styles: [":host{display:contents}:host img{flex:0 0 auto;object-fit:contain}:host(.si-weather-widget-illustration-sm) img,:host(.si-weather-widget-illustration-sm) si-icon{inline-size:1.25rem;block-size:1.25rem}:host(.si-weather-widget-illustration-sm) si-icon{font-size:1.25rem;line-height:1;inline-size:auto;block-size:auto}:host(.si-weather-widget-illustration-md) img,:host(.si-weather-widget-illustration-md) si-icon{inline-size:1.5rem;block-size:1.5rem}:host(.si-weather-widget-illustration-md) si-icon{font-size:1.5rem;line-height:1;inline-size:auto;block-size:auto}:host(.si-weather-widget-illustration-lg) img,:host(.si-weather-widget-illustration-lg) si-icon{inline-size:2.5rem;block-size:2.5rem}:host(.si-weather-widget-illustration-lg) si-icon{font-size:2.5rem;line-height:1;inline-size:auto;block-size:auto}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:contents}:host img{flex:0 0 auto;object-fit:contain}:host(.si-weather-widget-illustration-sm) img,:host(.si-weather-widget-illustration-sm) si-icon{inline-size:1.25rem;block-size:1.25rem}:host(.si-weather-widget-illustration-sm) si-icon{font-size:1.25rem;line-height:1;inline-size:auto;block-size:auto}:host(.si-weather-widget-illustration-md) img,:host(.si-weather-widget-illustration-md) si-icon{inline-size:1.5rem;block-size:1.5rem}:host(.si-weather-widget-illustration-md) si-icon{font-size:1.5rem;line-height:1;inline-size:auto;block-size:auto}:host(.si-weather-widget-illustration-lg) img,:host(.si-weather-widget-illustration-lg) si-icon{inline-size:2.5rem;block-size:2.5rem}:host(.si-weather-widget-illustration-lg) si-icon{font-size:2.5rem;line-height:1;inline-size:auto;block-size:auto}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetIllustrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetIllustrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-weather-widget-illustration', imports: [SiIconComponent, SiTranslatePipe], template: `
     @let res = resolved();
@@ -1333,7 +1421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         <img class="si-weather-widget-illustration" [src]="res.src" [alt]="res.alt | translate" />
       }
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, host: {
                         '[class.si-weather-widget-illustration-sm]': "size() === 'sm'",
                         '[class.si-weather-widget-illustration-md]': "size() === 'md'",
                         '[class.si-weather-widget-illustration-lg]': "size() === 'lg'"
@@ -1353,15 +1441,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiWeatherWidgetForecastComponent {
     /** Forecast data rendered by this block. */
-    forecast = input.required(...(ngDevMode ? [{ debugName: "forecast" }] : []));
+    forecast = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forecast" }] : /* istanbul ignore next */ []));
     /**
      * Layout used to render the forecast.
      *
      * @defaultValue 'vertical'
      */
-    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    layout = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /** Accessible label for the forecast section. */
-    forecastLabel = input(...(ngDevMode ? [undefined, { debugName: "forecastLabel" }] : []));
+    forecastLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "forecastLabel" }] : /* istanbul ignore next */ []));
     columns = computed(() => {
         const cols = this.forecast().columns;
         if (!cols) {
@@ -1371,16 +1462,17 @@ class SiWeatherWidgetForecastComponent {
         // the stylesheet. Authors should pass at most 5 columns and pick the most
         // important ones — the row will become unreadable beyond that.
         return cols.slice(0, 5);
-    }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     columnValue(column, index) {
         return column.values?.[index];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetForecastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiWeatherWidgetForecastComponent, isStandalone: true, selector: "si-weather-widget-forecast", inputs: { forecast: { classPropertyName: "forecast", publicName: "forecast", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, forecastLabel: { classPropertyName: "forecastLabel", publicName: "forecastLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let days = forecast().days;\n@let cols = columns();\n@let illustrationSize = layout() === 'vertical' ? 'sm' : 'md';\n\n<div\n  class=\"si-weather-widget-forecast\"\n  [class.si-weather-widget-vertical]=\"layout() === 'vertical'\"\n  [class.si-weather-widget-horizontal]=\"layout() === 'horizontal'\"\n  [attr.aria-label]=\"forecastLabel() | translate\"\n>\n  @if (layout() === 'horizontal') {\n    @for (day of days; track $index) {\n      <div\n        class=\"si-weather-widget-forecast-day\"\n        [class.si-weather-widget-forecast-day-2]=\"$index === 1\"\n        [class.si-weather-widget-forecast-day-3]=\"$index === 2\"\n        [class.si-weather-widget-forecast-day-4]=\"$index === 3\"\n        [class.si-weather-widget-forecast-day-5]=\"$index === 4\"\n      >\n        <div class=\"si-weather-widget-forecast-day-label\">{{ day.label | translate }}</div>\n        <si-weather-widget-illustration\n          [size]=\"illustrationSize\"\n          [illustration]=\"day.illustration\"\n          [altFallback]=\"day.label\"\n        />\n        <div class=\"si-weather-widget-forecast-day-range\">\n          <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n          <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n        </div>\n      </div>\n    }\n  } @else {\n    <ul\n      class=\"si-weather-widget-forecast-list\"\n      role=\"list\"\n      [style.--si-weather-forecast-extras]=\"cols.length\"\n    >\n      @for (day of days; track $index; let i = $index) {\n        <li class=\"si-weather-widget-forecast-row\">\n          <span class=\"si-weather-widget-forecast-day-label\">\n            {{ day.label | translate }}\n          </span>\n          <span class=\"si-weather-widget-forecast-illustration-cell\">\n            <si-weather-widget-illustration\n              [size]=\"illustrationSize\"\n              [illustration]=\"day.illustration\"\n              [altFallback]=\"day.label\"\n            />\n          </span>\n          @for (col of cols; track $index; let extraIdx = $index) {\n            <span\n              class=\"si-weather-widget-forecast-extra\"\n              role=\"img\"\n              [class.si-weather-widget-forecast-extra-1]=\"extraIdx === 0\"\n              [class.si-weather-widget-forecast-extra-2]=\"extraIdx === 1\"\n              [class.si-weather-widget-forecast-extra-3]=\"extraIdx === 2\"\n              [class.si-weather-widget-forecast-extra-4]=\"extraIdx === 3\"\n              [class.si-weather-widget-forecast-extra-5]=\"extraIdx === 4\"\n              [attr.aria-label]=\"(col.label | translate) + ': ' + (columnValue(col, i) ?? '')\"\n            >\n              @if (col.icon) {\n                <si-icon\n                  class=\"icon si-weather-widget-forecast-extra-icon\"\n                  aria-hidden=\"true\"\n                  [icon]=\"col.icon\"\n                />\n              }\n              <span aria-hidden=\"true\">{{ columnValue(col, i) ?? '' }}</span>\n            </span>\n          }\n          <span class=\"si-weather-widget-forecast-range-cell\">\n            <span class=\"si-weather-widget-forecast-range\">\n              <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n              <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n            </span>\n          </span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [".si-weather-widget-forecast-range,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-range{font-size:1rem;font-weight:400;line-height:1.25}.si-weather-widget-forecast-day-range{display:flex;gap:4px}.si-weather-widget-forecast-range-min{color:var(--element-text-secondary)}.si-weather-widget-forecast-range-max{color:var(--element-text-primary);font-weight:600}@property --si-weather-forecast-extras{syntax: \"<integer>\"; inherits: true; initial-value: 0;}@property --si-weather-forecast-extras-cap{syntax: \"<integer>\"; inherits: true; initial-value: 5;}.si-weather-widget-forecast-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content 1.25rem repeat(min(var(--si-weather-forecast-extras),var(--si-weather-forecast-extras-cap)),1fr auto) 1fr auto;row-gap:8px;align-items:center;inline-size:100%;container-type:inline-size}@container (max-width: 635px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 4}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 539px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 3}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 443px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 2}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 347px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 1}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 251px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 0}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-1,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}.si-weather-widget-forecast-row{display:contents}.si-weather-widget-forecast-day-label{color:var(--element-text-secondary);margin-block:8px;white-space:nowrap}.si-weather-widget-forecast.si-weather-widget-vertical .si-weather-widget-forecast-day-label{padding-inline-end:16px;grid-column-start:1}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{text-align:center}.si-weather-widget-forecast-illustration-cell{display:inline-flex;align-items:center;justify-content:center;margin-block:6px;grid-column-start:2}.si-weather-widget-forecast-extra{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}.si-weather-widget-forecast-extra-1{grid-column-start:4}.si-weather-widget-forecast-extra-2{grid-column-start:6}.si-weather-widget-forecast-extra-3{grid-column-start:8}.si-weather-widget-forecast-extra-4{grid-column-start:10}.si-weather-widget-forecast-extra-5{grid-column-start:12}.si-weather-widget-forecast-range-cell{white-space:nowrap;grid-column-end:-1}.si-weather-widget-forecast-range{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-block:6px}:host{display:contents}.si-weather-widget-forecast{display:flex;flex-wrap:wrap;gap:8px}.si-weather-widget-forecast.si-weather-widget-vertical{display:block}.si-weather-widget-forecast.si-weather-widget-horizontal{flex-wrap:nowrap;overflow:hidden;container-type:inline-size}@container (max-width: 351px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 279px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 207px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 135px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-2,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}.si-weather-widget-forecast-day{flex:1 1 0;min-inline-size:64px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day{padding-block:2px}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{margin-block:0}.si-weather-widget-forecast-extra-icon{display:inline-flex;vertical-align:middle;margin-inline-end:2px;color:var(--element-text-secondary);margin-block:6px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiWeatherWidgetIllustrationComponent, selector: "si-weather-widget-illustration", inputs: ["illustration", "condition", "altFallback", "size"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetForecastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiWeatherWidgetForecastComponent, isStandalone: true, selector: "si-weather-widget-forecast", inputs: { forecast: { classPropertyName: "forecast", publicName: "forecast", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, forecastLabel: { classPropertyName: "forecastLabel", publicName: "forecastLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let days = forecast().days;\n@let cols = columns();\n@let illustrationSize = layout() === 'vertical' ? 'sm' : 'md';\n\n<div\n  class=\"si-weather-widget-forecast\"\n  [class.si-weather-widget-vertical]=\"layout() === 'vertical'\"\n  [class.si-weather-widget-horizontal]=\"layout() === 'horizontal'\"\n  [attr.aria-label]=\"forecastLabel() | translate\"\n>\n  @if (layout() === 'horizontal') {\n    @for (day of days; track $index) {\n      <div\n        class=\"si-weather-widget-forecast-day\"\n        [class.si-weather-widget-forecast-day-2]=\"$index === 1\"\n        [class.si-weather-widget-forecast-day-3]=\"$index === 2\"\n        [class.si-weather-widget-forecast-day-4]=\"$index === 3\"\n        [class.si-weather-widget-forecast-day-5]=\"$index === 4\"\n      >\n        <div class=\"si-weather-widget-forecast-day-label\">{{ day.label | translate }}</div>\n        <si-weather-widget-illustration\n          [size]=\"illustrationSize\"\n          [illustration]=\"day.illustration\"\n          [altFallback]=\"day.label\"\n        />\n        <div class=\"si-weather-widget-forecast-day-range\">\n          <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n          <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n        </div>\n      </div>\n    }\n  } @else {\n    <ul\n      class=\"si-weather-widget-forecast-list\"\n      role=\"list\"\n      [style.--si-weather-forecast-extras]=\"cols.length\"\n    >\n      @for (day of days; track $index; let i = $index) {\n        <li class=\"si-weather-widget-forecast-row\">\n          <span class=\"si-weather-widget-forecast-day-label\">\n            {{ day.label | translate }}\n          </span>\n          <span class=\"si-weather-widget-forecast-illustration-cell\">\n            <si-weather-widget-illustration\n              [size]=\"illustrationSize\"\n              [illustration]=\"day.illustration\"\n              [altFallback]=\"day.label\"\n            />\n          </span>\n          @for (col of cols; track $index; let extraIdx = $index) {\n            <span\n              class=\"si-weather-widget-forecast-extra\"\n              role=\"img\"\n              [class.si-weather-widget-forecast-extra-1]=\"extraIdx === 0\"\n              [class.si-weather-widget-forecast-extra-2]=\"extraIdx === 1\"\n              [class.si-weather-widget-forecast-extra-3]=\"extraIdx === 2\"\n              [class.si-weather-widget-forecast-extra-4]=\"extraIdx === 3\"\n              [class.si-weather-widget-forecast-extra-5]=\"extraIdx === 4\"\n              [attr.aria-label]=\"(col.label | translate) + ': ' + (columnValue(col, i) ?? '')\"\n            >\n              @if (col.icon) {\n                <si-icon\n                  class=\"icon si-weather-widget-forecast-extra-icon\"\n                  aria-hidden=\"true\"\n                  [icon]=\"col.icon\"\n                />\n              }\n              <span aria-hidden=\"true\">{{ columnValue(col, i) ?? '' }}</span>\n            </span>\n          }\n          <span class=\"si-weather-widget-forecast-range-cell\">\n            <span class=\"si-weather-widget-forecast-range\">\n              <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n              <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n            </span>\n          </span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [".si-weather-widget-forecast-range,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-range{font-size:var(--si-sys-typography-font-size-body-lg);font-weight:400;line-height:var(--si-sys-typography-line-height-body-lg)}.si-weather-widget-forecast-day-range{display:flex;gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.si-weather-widget-forecast-range-min{color:var(--si-sys-text-secondary)}.si-weather-widget-forecast-range-max{color:var(--si-sys-text-primary);font-weight:600}@property --si-weather-forecast-extras{syntax: \"<integer>\"; inherits: true; initial-value: 0;}@property --si-weather-forecast-extras-cap{syntax: \"<integer>\"; inherits: true; initial-value: 5;}.si-weather-widget-forecast-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content 1.25rem repeat(min(var(--si-weather-forecast-extras),var(--si-weather-forecast-extras-cap)),1fr auto) 1fr auto;row-gap:var(--si-sys-sizing-spacing-y-40);align-items:center;inline-size:100%;container-type:inline-size}@container (max-width: 635px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 4}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 539px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 3}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 443px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 2}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 347px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 1}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 251px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 0}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-1,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}.si-weather-widget-forecast-row{display:contents}.si-weather-widget-forecast-day-label{color:var(--si-sys-text-secondary);margin-block:var(--si-sys-sizing-spacing-y-40);white-space:nowrap}.si-weather-widget-forecast.si-weather-widget-vertical .si-weather-widget-forecast-day-label{padding-inline-end:var(--si-sys-sizing-spacing-x-60);grid-column-start:1}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{text-align:center}.si-weather-widget-forecast-illustration-cell{display:inline-flex;align-items:center;justify-content:center;margin-block:var(--si-sys-sizing-spacing-y-30);grid-column-start:2}.si-weather-widget-forecast-extra{display:inline-flex;align-items:center;gap:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10);white-space:nowrap}.si-weather-widget-forecast-extra-1{grid-column-start:4}.si-weather-widget-forecast-extra-2{grid-column-start:6}.si-weather-widget-forecast-extra-3{grid-column-start:8}.si-weather-widget-forecast-extra-4{grid-column-start:10}.si-weather-widget-forecast-extra-5{grid-column-start:12}.si-weather-widget-forecast-range-cell{white-space:nowrap;grid-column-end:-1}.si-weather-widget-forecast-range{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20);margin-block:var(--si-sys-sizing-spacing-y-30)}:host{display:contents}.si-weather-widget-forecast{display:flex;flex-wrap:wrap;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}.si-weather-widget-forecast.si-weather-widget-vertical{display:block}.si-weather-widget-forecast.si-weather-widget-horizontal{flex-wrap:nowrap;overflow:hidden;container-type:inline-size}@container (max-width: 351px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 279px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 207px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 135px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-2,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}.si-weather-widget-forecast-day{flex:1 1 0;min-inline-size:64px;display:flex;flex-direction:column;align-items:center;gap:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10);text-align:center}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day{padding-block:var(--si-sys-sizing-spacing-y-10)}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{margin-block:0}.si-weather-widget-forecast-extra-icon{display:inline-flex;vertical-align:middle;margin-inline-end:var(--si-sys-sizing-spacing-x-10);color:var(--si-sys-text-secondary);margin-block:var(--si-sys-sizing-spacing-y-30)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiWeatherWidgetIllustrationComponent, selector: "si-weather-widget-illustration", inputs: ["illustration", "condition", "altFallback", "size"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetForecastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetForecastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-weather-widget-forecast', imports: [SiIconComponent, SiTranslatePipe, SiWeatherWidgetIllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let days = forecast().days;\n@let cols = columns();\n@let illustrationSize = layout() === 'vertical' ? 'sm' : 'md';\n\n<div\n  class=\"si-weather-widget-forecast\"\n  [class.si-weather-widget-vertical]=\"layout() === 'vertical'\"\n  [class.si-weather-widget-horizontal]=\"layout() === 'horizontal'\"\n  [attr.aria-label]=\"forecastLabel() | translate\"\n>\n  @if (layout() === 'horizontal') {\n    @for (day of days; track $index) {\n      <div\n        class=\"si-weather-widget-forecast-day\"\n        [class.si-weather-widget-forecast-day-2]=\"$index === 1\"\n        [class.si-weather-widget-forecast-day-3]=\"$index === 2\"\n        [class.si-weather-widget-forecast-day-4]=\"$index === 3\"\n        [class.si-weather-widget-forecast-day-5]=\"$index === 4\"\n      >\n        <div class=\"si-weather-widget-forecast-day-label\">{{ day.label | translate }}</div>\n        <si-weather-widget-illustration\n          [size]=\"illustrationSize\"\n          [illustration]=\"day.illustration\"\n          [altFallback]=\"day.label\"\n        />\n        <div class=\"si-weather-widget-forecast-day-range\">\n          <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n          <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n        </div>\n      </div>\n    }\n  } @else {\n    <ul\n      class=\"si-weather-widget-forecast-list\"\n      role=\"list\"\n      [style.--si-weather-forecast-extras]=\"cols.length\"\n    >\n      @for (day of days; track $index; let i = $index) {\n        <li class=\"si-weather-widget-forecast-row\">\n          <span class=\"si-weather-widget-forecast-day-label\">\n            {{ day.label | translate }}\n          </span>\n          <span class=\"si-weather-widget-forecast-illustration-cell\">\n            <si-weather-widget-illustration\n              [size]=\"illustrationSize\"\n              [illustration]=\"day.illustration\"\n              [altFallback]=\"day.label\"\n            />\n          </span>\n          @for (col of cols; track $index; let extraIdx = $index) {\n            <span\n              class=\"si-weather-widget-forecast-extra\"\n              role=\"img\"\n              [class.si-weather-widget-forecast-extra-1]=\"extraIdx === 0\"\n              [class.si-weather-widget-forecast-extra-2]=\"extraIdx === 1\"\n              [class.si-weather-widget-forecast-extra-3]=\"extraIdx === 2\"\n              [class.si-weather-widget-forecast-extra-4]=\"extraIdx === 3\"\n              [class.si-weather-widget-forecast-extra-5]=\"extraIdx === 4\"\n              [attr.aria-label]=\"(col.label | translate) + ': ' + (columnValue(col, i) ?? '')\"\n            >\n              @if (col.icon) {\n                <si-icon\n                  class=\"icon si-weather-widget-forecast-extra-icon\"\n                  aria-hidden=\"true\"\n                  [icon]=\"col.icon\"\n                />\n              }\n              <span aria-hidden=\"true\">{{ columnValue(col, i) ?? '' }}</span>\n            </span>\n          }\n          <span class=\"si-weather-widget-forecast-range-cell\">\n            <span class=\"si-weather-widget-forecast-range\">\n              <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n              <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n            </span>\n          </span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [".si-weather-widget-forecast-range,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-range{font-size:1rem;font-weight:400;line-height:1.25}.si-weather-widget-forecast-day-range{display:flex;gap:4px}.si-weather-widget-forecast-range-min{color:var(--element-text-secondary)}.si-weather-widget-forecast-range-max{color:var(--element-text-primary);font-weight:600}@property --si-weather-forecast-extras{syntax: \"<integer>\"; inherits: true; initial-value: 0;}@property --si-weather-forecast-extras-cap{syntax: \"<integer>\"; inherits: true; initial-value: 5;}.si-weather-widget-forecast-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content 1.25rem repeat(min(var(--si-weather-forecast-extras),var(--si-weather-forecast-extras-cap)),1fr auto) 1fr auto;row-gap:8px;align-items:center;inline-size:100%;container-type:inline-size}@container (max-width: 635px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 4}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 539px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 3}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 443px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 2}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 347px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 1}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 251px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 0}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-1,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}.si-weather-widget-forecast-row{display:contents}.si-weather-widget-forecast-day-label{color:var(--element-text-secondary);margin-block:8px;white-space:nowrap}.si-weather-widget-forecast.si-weather-widget-vertical .si-weather-widget-forecast-day-label{padding-inline-end:16px;grid-column-start:1}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{text-align:center}.si-weather-widget-forecast-illustration-cell{display:inline-flex;align-items:center;justify-content:center;margin-block:6px;grid-column-start:2}.si-weather-widget-forecast-extra{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}.si-weather-widget-forecast-extra-1{grid-column-start:4}.si-weather-widget-forecast-extra-2{grid-column-start:6}.si-weather-widget-forecast-extra-3{grid-column-start:8}.si-weather-widget-forecast-extra-4{grid-column-start:10}.si-weather-widget-forecast-extra-5{grid-column-start:12}.si-weather-widget-forecast-range-cell{white-space:nowrap;grid-column-end:-1}.si-weather-widget-forecast-range{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-block:6px}:host{display:contents}.si-weather-widget-forecast{display:flex;flex-wrap:wrap;gap:8px}.si-weather-widget-forecast.si-weather-widget-vertical{display:block}.si-weather-widget-forecast.si-weather-widget-horizontal{flex-wrap:nowrap;overflow:hidden;container-type:inline-size}@container (max-width: 351px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 279px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 207px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 135px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-2,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}.si-weather-widget-forecast-day{flex:1 1 0;min-inline-size:64px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day{padding-block:2px}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{margin-block:0}.si-weather-widget-forecast-extra-icon{display:inline-flex;vertical-align:middle;margin-inline-end:2px;color:var(--element-text-secondary);margin-block:6px}\n"] }]
+            args: [{ selector: 'si-weather-widget-forecast', imports: [SiIconComponent, SiTranslatePipe, SiWeatherWidgetIllustrationComponent], template: "@let days = forecast().days;\n@let cols = columns();\n@let illustrationSize = layout() === 'vertical' ? 'sm' : 'md';\n\n<div\n  class=\"si-weather-widget-forecast\"\n  [class.si-weather-widget-vertical]=\"layout() === 'vertical'\"\n  [class.si-weather-widget-horizontal]=\"layout() === 'horizontal'\"\n  [attr.aria-label]=\"forecastLabel() | translate\"\n>\n  @if (layout() === 'horizontal') {\n    @for (day of days; track $index) {\n      <div\n        class=\"si-weather-widget-forecast-day\"\n        [class.si-weather-widget-forecast-day-2]=\"$index === 1\"\n        [class.si-weather-widget-forecast-day-3]=\"$index === 2\"\n        [class.si-weather-widget-forecast-day-4]=\"$index === 3\"\n        [class.si-weather-widget-forecast-day-5]=\"$index === 4\"\n      >\n        <div class=\"si-weather-widget-forecast-day-label\">{{ day.label | translate }}</div>\n        <si-weather-widget-illustration\n          [size]=\"illustrationSize\"\n          [illustration]=\"day.illustration\"\n          [altFallback]=\"day.label\"\n        />\n        <div class=\"si-weather-widget-forecast-day-range\">\n          <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n          <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n        </div>\n      </div>\n    }\n  } @else {\n    <ul\n      class=\"si-weather-widget-forecast-list\"\n      role=\"list\"\n      [style.--si-weather-forecast-extras]=\"cols.length\"\n    >\n      @for (day of days; track $index; let i = $index) {\n        <li class=\"si-weather-widget-forecast-row\">\n          <span class=\"si-weather-widget-forecast-day-label\">\n            {{ day.label | translate }}\n          </span>\n          <span class=\"si-weather-widget-forecast-illustration-cell\">\n            <si-weather-widget-illustration\n              [size]=\"illustrationSize\"\n              [illustration]=\"day.illustration\"\n              [altFallback]=\"day.label\"\n            />\n          </span>\n          @for (col of cols; track $index; let extraIdx = $index) {\n            <span\n              class=\"si-weather-widget-forecast-extra\"\n              role=\"img\"\n              [class.si-weather-widget-forecast-extra-1]=\"extraIdx === 0\"\n              [class.si-weather-widget-forecast-extra-2]=\"extraIdx === 1\"\n              [class.si-weather-widget-forecast-extra-3]=\"extraIdx === 2\"\n              [class.si-weather-widget-forecast-extra-4]=\"extraIdx === 3\"\n              [class.si-weather-widget-forecast-extra-5]=\"extraIdx === 4\"\n              [attr.aria-label]=\"(col.label | translate) + ': ' + (columnValue(col, i) ?? '')\"\n            >\n              @if (col.icon) {\n                <si-icon\n                  class=\"icon si-weather-widget-forecast-extra-icon\"\n                  aria-hidden=\"true\"\n                  [icon]=\"col.icon\"\n                />\n              }\n              <span aria-hidden=\"true\">{{ columnValue(col, i) ?? '' }}</span>\n            </span>\n          }\n          <span class=\"si-weather-widget-forecast-range-cell\">\n            <span class=\"si-weather-widget-forecast-range\">\n              <span class=\"si-weather-widget-forecast-range-min\">{{ day.minTemperature }}</span>\n              <span class=\"si-weather-widget-forecast-range-max\">{{ day.maxTemperature }}</span>\n            </span>\n          </span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [".si-weather-widget-forecast-range,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-range{font-size:var(--si-sys-typography-font-size-body-lg);font-weight:400;line-height:var(--si-sys-typography-line-height-body-lg)}.si-weather-widget-forecast-day-range{display:flex;gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.si-weather-widget-forecast-range-min{color:var(--si-sys-text-secondary)}.si-weather-widget-forecast-range-max{color:var(--si-sys-text-primary);font-weight:600}@property --si-weather-forecast-extras{syntax: \"<integer>\"; inherits: true; initial-value: 0;}@property --si-weather-forecast-extras-cap{syntax: \"<integer>\"; inherits: true; initial-value: 5;}.si-weather-widget-forecast-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content 1.25rem repeat(min(var(--si-weather-forecast-extras),var(--si-weather-forecast-extras-cap)),1fr auto) 1fr auto;row-gap:var(--si-sys-sizing-spacing-y-40);align-items:center;inline-size:100%;container-type:inline-size}@container (max-width: 635px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 4}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 539px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 3}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 443px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 2}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 347px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 1}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}@container (max-width: 251px){.si-weather-widget-forecast-list{--si-weather-forecast-extras-cap: 0}.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-1,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-2,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-3,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-4,.si-weather-widget-forecast-list .si-weather-widget-forecast-extra-5{display:none}}.si-weather-widget-forecast-row{display:contents}.si-weather-widget-forecast-day-label{color:var(--si-sys-text-secondary);margin-block:var(--si-sys-sizing-spacing-y-40);white-space:nowrap}.si-weather-widget-forecast.si-weather-widget-vertical .si-weather-widget-forecast-day-label{padding-inline-end:var(--si-sys-sizing-spacing-x-60);grid-column-start:1}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{text-align:center}.si-weather-widget-forecast-illustration-cell{display:inline-flex;align-items:center;justify-content:center;margin-block:var(--si-sys-sizing-spacing-y-30);grid-column-start:2}.si-weather-widget-forecast-extra{display:inline-flex;align-items:center;gap:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10);white-space:nowrap}.si-weather-widget-forecast-extra-1{grid-column-start:4}.si-weather-widget-forecast-extra-2{grid-column-start:6}.si-weather-widget-forecast-extra-3{grid-column-start:8}.si-weather-widget-forecast-extra-4{grid-column-start:10}.si-weather-widget-forecast-extra-5{grid-column-start:12}.si-weather-widget-forecast-range-cell{white-space:nowrap;grid-column-end:-1}.si-weather-widget-forecast-range{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20);margin-block:var(--si-sys-sizing-spacing-y-30)}:host{display:contents}.si-weather-widget-forecast{display:flex;flex-wrap:wrap;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}.si-weather-widget-forecast.si-weather-widget-vertical{display:block}.si-weather-widget-forecast.si-weather-widget-horizontal{flex-wrap:nowrap;overflow:hidden;container-type:inline-size}@container (max-width: 351px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 279px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 207px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}@container (max-width: 135px){.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-2,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-3,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-4,.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-5{display:none}}.si-weather-widget-forecast-day{flex:1 1 0;min-inline-size:64px;display:flex;flex-direction:column;align-items:center;gap:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10);text-align:center}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day{padding-block:var(--si-sys-sizing-spacing-y-10)}.si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label{margin-block:0}.si-weather-widget-forecast-extra-icon{display:inline-flex;vertical-align:middle;margin-inline-end:var(--si-sys-sizing-spacing-x-10);color:var(--si-sys-text-secondary);margin-block:var(--si-sys-sizing-spacing-y-30)}\n"] }]
         }], propDecorators: { forecast: [{ type: i0.Input, args: [{ isSignal: true, alias: "forecast", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], forecastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forecastLabel", required: false }] }] } });
 
 /**
@@ -1394,8 +1486,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * @internal
  */
 class SiWeatherWidgetSkeletonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiWeatherWidgetSkeletonComponent, isStandalone: true, selector: "si-weather-widget-skeleton", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiWeatherWidgetSkeletonComponent, isStandalone: true, selector: "si-weather-widget-skeleton", ngImport: i0, template: `
     <div class="si-weather-widget-skeleton-row">
       <div class="si-weather-widget-skeleton-value si-skeleton"></div>
       <div class="si-weather-widget-skeleton-col">
@@ -1404,9 +1496,9 @@ class SiWeatherWidgetSkeletonComponent {
         <div class="si-weather-widget-skeleton-line si-skeleton"></div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:6px}.si-weather-widget-skeleton-row{display:flex;align-items:stretch;justify-content:space-between;gap:8px}.si-weather-widget-skeleton-col{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:6px}.si-weather-widget-skeleton-illustration{flex:0 0 auto;inline-size:40px;block-size:40px;border-radius:50%}.si-weather-widget-skeleton-value{flex:0 0 auto;align-self:stretch;inline-size:5.3125rem;block-size:auto}.si-weather-widget-skeleton-line{block-size:.875rem;inline-size:7.5rem}.si-weather-widget-skeleton-line:last-child{inline-size:5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30)}.si-weather-widget-skeleton-row{display:flex;align-items:stretch;justify-content:space-between;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}.si-weather-widget-skeleton-col{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30)}.si-weather-widget-skeleton-illustration{flex:0 0 auto;inline-size:40px;block-size:40px;border-radius:50%}.si-weather-widget-skeleton-value{flex:0 0 auto;align-self:stretch;inline-size:5.3125rem;block-size:auto}.si-weather-widget-skeleton-line{block-size:var(--si-sys-typography-font-size-body);inline-size:7.5rem}.si-weather-widget-skeleton-line:last-child{inline-size:5rem}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-weather-widget-skeleton', template: `
     <div class="si-weather-widget-skeleton-row">
@@ -1417,7 +1509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         <div class="si-weather-widget-skeleton-line si-skeleton"></div>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column;gap:6px}.si-weather-widget-skeleton-row{display:flex;align-items:stretch;justify-content:space-between;gap:8px}.si-weather-widget-skeleton-col{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:6px}.si-weather-widget-skeleton-illustration{flex:0 0 auto;inline-size:40px;block-size:40px;border-radius:50%}.si-weather-widget-skeleton-value{flex:0 0 auto;align-self:stretch;inline-size:5.3125rem;block-size:auto}.si-weather-widget-skeleton-line{block-size:.875rem;inline-size:7.5rem}.si-weather-widget-skeleton-line:last-child{inline-size:5rem}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30)}.si-weather-widget-skeleton-row{display:flex;align-items:stretch;justify-content:space-between;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}.si-weather-widget-skeleton-col{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30)}.si-weather-widget-skeleton-illustration{flex:0 0 auto;inline-size:40px;block-size:40px;border-radius:50%}.si-weather-widget-skeleton-value{flex:0 0 auto;align-self:stretch;inline-size:5.3125rem;block-size:auto}.si-weather-widget-skeleton-line{block-size:var(--si-sys-typography-font-size-body);inline-size:7.5rem}.si-weather-widget-skeleton-line:last-child{inline-size:5rem}\n"] }]
         }] });
 
 /**
@@ -1439,10 +1531,10 @@ class SiWeatherRangeDefDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherRangeDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiWeatherRangeDefDirective, isStandalone: true, selector: "[siWeatherRangeDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherRangeDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiWeatherRangeDefDirective, isStandalone: true, selector: "[siWeatherRangeDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherRangeDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherRangeDefDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[siWeatherRangeDef]' }]
         }] });
@@ -1469,13 +1561,15 @@ class SiWeatherWidgetBodyComponent extends SiWidgetBaseDirective {
      *
      * @defaultValue 'vertical'
      */
-    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    layout = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /**
      * Optional location label, shown inside the body in the compact layout only.
      * The non-compact layouts render the location via the `<si-card>` heading
      * managed by `SiWeatherWidgetComponent`.
      */
-    location = input(...(ngDevMode ? [undefined, { debugName: "location" }] : []));
+    location = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "location" }] : /* istanbul ignore next */ []));
     /**
      * Accessible label for the additional data list.
      *
@@ -1484,7 +1578,8 @@ class SiWeatherWidgetBodyComponent extends SiWidgetBaseDirective {
      * t(() => $localize`:@@SI_WEATHER_WIDGET.METRICS_LABEL:Additional weather data`)
      * ```
      */
-    metricsLabel = input(t(() => $localize `:@@SI_WEATHER_WIDGET.METRICS_LABEL:Additional weather data`), ...(ngDevMode ? [{ debugName: "metricsLabel" }] : []));
+    metricsLabel = input(t(() => $localize `:@@SI_WEATHER_WIDGET.METRICS_LABEL:Additional weather data`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metricsLabel" }] : /* istanbul ignore next */ []));
     /**
      * Accessible label for the forecast section.
      *
@@ -1493,13 +1588,16 @@ class SiWeatherWidgetBodyComponent extends SiWidgetBaseDirective {
      * t(() => $localize`:@@SI_WEATHER_WIDGET.FORECAST_LABEL:Weather forecast`)
      * ```
      */
-    forecastLabel = input(t(() => $localize `:@@SI_WEATHER_WIDGET.FORECAST_LABEL:Weather forecast`), ...(ngDevMode ? [{ debugName: "forecastLabel" }] : []));
-    layoutClass = computed(() => LAYOUT_CLASS[this.layout()], ...(ngDevMode ? [{ debugName: "layoutClass" }] : []));
-    isCompact = computed(() => this.layout() === 'compact', ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiWeatherWidgetBodyComponent, isStandalone: true, selector: "si-weather-widget-body", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, metricsLabel: { classPropertyName: "metricsLabel", publicName: "metricsLabel", isSignal: true, isRequired: false, transformFunction: null }, forecastLabel: { classPropertyName: "forecastLabel", publicName: "forecastLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "layoutClass()" } }, usesInheritance: true, ngImport: i0, template: "@let data = value();\n@let current = data?.current;\n@let metrics = data?.metrics;\n@let forecast = data?.forecast;\n@let loading = showLoadingIndicator();\n\n@if (loading) {\n  <si-weather-widget-skeleton />\n} @else if (current) {\n  @if (isCompact()) {\n    <div class=\"si-weather-widget-today\">\n      <si-weather-widget-illustration\n        size=\"sm\"\n        [illustration]=\"current.illustration\"\n        [condition]=\"current.condition\"\n        [altFallback]=\"current.illustrationAlt\"\n      />\n      <div class=\"si-weather-widget-today-info\">\n        @if (location()) {\n          <div class=\"si-weather-widget-location\">{{ location() | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  } @else {\n    <div class=\"si-weather-widget-today\">\n      <div class=\"si-weather-widget-temperature\">{{ current.temperature }}</div>\n      <div class=\"si-weather-widget-today-info\">\n        <si-weather-widget-illustration\n          size=\"lg\"\n          [illustration]=\"current.illustration\"\n          [condition]=\"current.condition\"\n          [altFallback]=\"current.illustrationAlt\"\n        />\n        @if (current.condition) {\n          <div class=\"si-weather-widget-condition\">{{ current.condition | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  }\n\n  @if (metrics?.length) {\n    <ul class=\"si-weather-widget-metrics\" [attr.aria-label]=\"metricsLabel() | translate\">\n      @for (metric of metrics; track $index) {\n        <li class=\"si-weather-widget-metric\">\n          <span class=\"si-weather-widget-metric-label\">{{ metric.label | translate }}</span>\n          <span class=\"si-weather-widget-metric-value\">{{ metric.value }}</span>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (!isCompact() && forecast && forecast.days.length) {\n    <si-weather-widget-forecast\n      [forecast]=\"forecast\"\n      [layout]=\"layout() === 'horizontal' ? 'horizontal' : 'vertical'\"\n      [forecastLabel]=\"forecastLabel()\"\n    />\n  }\n}\n\n<ng-template #rangeTpl let-c siWeatherRangeDef>\n  @if (c.minTemperature !== undefined || c.maxTemperature !== undefined) {\n    <div class=\"si-weather-widget-range\">\n      @if (c.minTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-min\">{{ c.minTemperature }}</span>\n      }\n      @if (c.maxTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-max\">{{ c.maxTemperature }}</span>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:32px;block-size:100%}.si-weather-widget-condition,:host.si-weather-widget-vertical .si-weather-widget-range,:host.si-weather-widget-horizontal .si-weather-widget-range{font-size:1rem;font-weight:400;line-height:1.25}.si-weather-widget-today{display:flex;align-items:start;gap:8px}:host.si-weather-widget-vertical .si-weather-widget-today,:host.si-weather-widget-horizontal .si-weather-widget-today{justify-content:space-between}:host.si-weather-widget-vertical .si-weather-widget-today-info,:host.si-weather-widget-horizontal .si-weather-widget-today-info{align-items:flex-end;text-align:end}.si-weather-widget-today-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.si-weather-widget-temperature{font-size:3.5rem;font-weight:400;line-height:1.2857142857;color:var(--element-text-primary)}.si-weather-widget-condition{color:var(--element-text-primary)}.si-weather-widget-location{font-weight:600;color:var(--element-text-primary)}.si-weather-widget-range{display:flex;gap:4px}.si-weather-widget-range-min{color:var(--element-text-secondary)}.si-weather-widget-range-max{color:var(--element-text-primary);font-weight:600}.si-weather-widget-metrics{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin-block:0;inline-size:100%}.si-weather-widget-metric{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.si-weather-widget-metric-label{color:var(--element-text-secondary)}.si-weather-widget-metric-value{color:var(--element-text-primary);font-weight:600;text-align:end}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiWeatherRangeDefDirective, selector: "[siWeatherRangeDef]" }, { kind: "component", type: SiWeatherWidgetForecastComponent, selector: "si-weather-widget-forecast", inputs: ["forecast", "layout", "forecastLabel"] }, { kind: "component", type: SiWeatherWidgetIllustrationComponent, selector: "si-weather-widget-illustration", inputs: ["illustration", "condition", "altFallback", "size"] }, { kind: "component", type: SiWeatherWidgetSkeletonComponent, selector: "si-weather-widget-skeleton" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    forecastLabel = input(t(() => $localize `:@@SI_WEATHER_WIDGET.FORECAST_LABEL:Weather forecast`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forecastLabel" }] : /* istanbul ignore next */ []));
+    layoutClass = computed(() => LAYOUT_CLASS[this.layout()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutClass" }] : /* istanbul ignore next */ []));
+    isCompact = computed(() => this.layout() === 'compact', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiWeatherWidgetBodyComponent, isStandalone: true, selector: "si-weather-widget-body", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, metricsLabel: { classPropertyName: "metricsLabel", publicName: "metricsLabel", isSignal: true, isRequired: false, transformFunction: null }, forecastLabel: { classPropertyName: "forecastLabel", publicName: "forecastLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "layoutClass()" } }, usesInheritance: true, ngImport: i0, template: "@let data = value();\n@let current = data?.current;\n@let metrics = data?.metrics;\n@let forecast = data?.forecast;\n@let loading = showLoadingIndicator();\n\n@if (loading) {\n  <si-weather-widget-skeleton />\n} @else if (current) {\n  @if (isCompact()) {\n    <div class=\"si-weather-widget-today\">\n      <si-weather-widget-illustration\n        size=\"sm\"\n        [illustration]=\"current.illustration\"\n        [condition]=\"current.condition\"\n        [altFallback]=\"current.illustrationAlt\"\n      />\n      <div class=\"si-weather-widget-today-info\">\n        @if (location()) {\n          <div class=\"si-weather-widget-location\">{{ location() | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  } @else {\n    <div class=\"si-weather-widget-today\">\n      <div class=\"si-weather-widget-temperature\">{{ current.temperature }}</div>\n      <div class=\"si-weather-widget-today-info\">\n        <si-weather-widget-illustration\n          size=\"lg\"\n          [illustration]=\"current.illustration\"\n          [condition]=\"current.condition\"\n          [altFallback]=\"current.illustrationAlt\"\n        />\n        @if (current.condition) {\n          <div class=\"si-weather-widget-condition\">{{ current.condition | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  }\n\n  @if (metrics?.length) {\n    <ul class=\"si-weather-widget-metrics\" [attr.aria-label]=\"metricsLabel() | translate\">\n      @for (metric of metrics; track $index) {\n        <li class=\"si-weather-widget-metric\">\n          <span class=\"si-weather-widget-metric-label\">{{ metric.label | translate }}</span>\n          <span class=\"si-weather-widget-metric-value\">{{ metric.value }}</span>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (!isCompact() && forecast && forecast.days.length) {\n    <si-weather-widget-forecast\n      [forecast]=\"forecast\"\n      [layout]=\"layout() === 'horizontal' ? 'horizontal' : 'vertical'\"\n      [forecastLabel]=\"forecastLabel()\"\n    />\n  }\n}\n\n<ng-template #rangeTpl let-c siWeatherRangeDef>\n  @if (c.minTemperature !== undefined || c.maxTemperature !== undefined) {\n    <div class=\"si-weather-widget-range\">\n      @if (c.minTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-min\">{{ c.minTemperature }}</span>\n      }\n      @if (c.maxTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-max\">{{ c.maxTemperature }}</span>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-90) var(--si-sys-sizing-spacing-x-90);block-size:100%}.si-weather-widget-condition,:host.si-weather-widget-vertical .si-weather-widget-range,:host.si-weather-widget-horizontal .si-weather-widget-range{font-size:var(--si-sys-typography-font-size-body-lg);font-weight:400;line-height:var(--si-sys-typography-line-height-body-lg)}.si-weather-widget-today{display:flex;align-items:start;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}:host.si-weather-widget-vertical .si-weather-widget-today,:host.si-weather-widget-horizontal .si-weather-widget-today{justify-content:space-between}:host.si-weather-widget-vertical .si-weather-widget-today-info,:host.si-weather-widget-horizontal .si-weather-widget-today-info{align-items:flex-end;text-align:end}.si-weather-widget-today-info{display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10);min-inline-size:0}.si-weather-widget-temperature{font-size:var(--si-sys-typography-font-size-display-xl);font-weight:400;line-height:var(--si-sys-typography-line-height-display-xl);color:var(--si-sys-text-primary)}.si-weather-widget-condition{color:var(--si-sys-text-primary)}.si-weather-widget-location{font-weight:600;color:var(--si-sys-text-primary)}.si-weather-widget-range{display:flex;gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.si-weather-widget-range-min{color:var(--si-sys-text-secondary)}.si-weather-widget-range-max{color:var(--si-sys-text-primary);font-weight:600}.si-weather-widget-metrics{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40);margin-block:0;inline-size:100%}.si-weather-widget-metric{display:flex;align-items:baseline;justify-content:space-between;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}.si-weather-widget-metric-label{color:var(--si-sys-text-secondary)}.si-weather-widget-metric-value{color:var(--si-sys-text-primary);font-weight:600;text-align:end}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiWeatherRangeDefDirective, selector: "[siWeatherRangeDef]" }, { kind: "component", type: SiWeatherWidgetForecastComponent, selector: "si-weather-widget-forecast", inputs: ["forecast", "layout", "forecastLabel"] }, { kind: "component", type: SiWeatherWidgetIllustrationComponent, selector: "si-weather-widget-illustration", inputs: ["illustration", "condition", "altFallback", "size"] }, { kind: "component", type: SiWeatherWidgetSkeletonComponent, selector: "si-weather-widget-skeleton" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-weather-widget-body', imports: [
                         NgTemplateOutlet,
@@ -1508,7 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiWeatherWidgetForecastComponent,
                         SiWeatherWidgetIllustrationComponent,
                         SiWeatherWidgetSkeletonComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'layoutClass()' }, template: "@let data = value();\n@let current = data?.current;\n@let metrics = data?.metrics;\n@let forecast = data?.forecast;\n@let loading = showLoadingIndicator();\n\n@if (loading) {\n  <si-weather-widget-skeleton />\n} @else if (current) {\n  @if (isCompact()) {\n    <div class=\"si-weather-widget-today\">\n      <si-weather-widget-illustration\n        size=\"sm\"\n        [illustration]=\"current.illustration\"\n        [condition]=\"current.condition\"\n        [altFallback]=\"current.illustrationAlt\"\n      />\n      <div class=\"si-weather-widget-today-info\">\n        @if (location()) {\n          <div class=\"si-weather-widget-location\">{{ location() | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  } @else {\n    <div class=\"si-weather-widget-today\">\n      <div class=\"si-weather-widget-temperature\">{{ current.temperature }}</div>\n      <div class=\"si-weather-widget-today-info\">\n        <si-weather-widget-illustration\n          size=\"lg\"\n          [illustration]=\"current.illustration\"\n          [condition]=\"current.condition\"\n          [altFallback]=\"current.illustrationAlt\"\n        />\n        @if (current.condition) {\n          <div class=\"si-weather-widget-condition\">{{ current.condition | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  }\n\n  @if (metrics?.length) {\n    <ul class=\"si-weather-widget-metrics\" [attr.aria-label]=\"metricsLabel() | translate\">\n      @for (metric of metrics; track $index) {\n        <li class=\"si-weather-widget-metric\">\n          <span class=\"si-weather-widget-metric-label\">{{ metric.label | translate }}</span>\n          <span class=\"si-weather-widget-metric-value\">{{ metric.value }}</span>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (!isCompact() && forecast && forecast.days.length) {\n    <si-weather-widget-forecast\n      [forecast]=\"forecast\"\n      [layout]=\"layout() === 'horizontal' ? 'horizontal' : 'vertical'\"\n      [forecastLabel]=\"forecastLabel()\"\n    />\n  }\n}\n\n<ng-template #rangeTpl let-c siWeatherRangeDef>\n  @if (c.minTemperature !== undefined || c.maxTemperature !== undefined) {\n    <div class=\"si-weather-widget-range\">\n      @if (c.minTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-min\">{{ c.minTemperature }}</span>\n      }\n      @if (c.maxTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-max\">{{ c.maxTemperature }}</span>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:32px;block-size:100%}.si-weather-widget-condition,:host.si-weather-widget-vertical .si-weather-widget-range,:host.si-weather-widget-horizontal .si-weather-widget-range{font-size:1rem;font-weight:400;line-height:1.25}.si-weather-widget-today{display:flex;align-items:start;gap:8px}:host.si-weather-widget-vertical .si-weather-widget-today,:host.si-weather-widget-horizontal .si-weather-widget-today{justify-content:space-between}:host.si-weather-widget-vertical .si-weather-widget-today-info,:host.si-weather-widget-horizontal .si-weather-widget-today-info{align-items:flex-end;text-align:end}.si-weather-widget-today-info{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.si-weather-widget-temperature{font-size:3.5rem;font-weight:400;line-height:1.2857142857;color:var(--element-text-primary)}.si-weather-widget-condition{color:var(--element-text-primary)}.si-weather-widget-location{font-weight:600;color:var(--element-text-primary)}.si-weather-widget-range{display:flex;gap:4px}.si-weather-widget-range-min{color:var(--element-text-secondary)}.si-weather-widget-range-max{color:var(--element-text-primary);font-weight:600}.si-weather-widget-metrics{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin-block:0;inline-size:100%}.si-weather-widget-metric{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.si-weather-widget-metric-label{color:var(--element-text-secondary)}.si-weather-widget-metric-value{color:var(--element-text-primary);font-weight:600;text-align:end}\n"] }]
+                    ], host: { '[class]': 'layoutClass()' }, template: "@let data = value();\n@let current = data?.current;\n@let metrics = data?.metrics;\n@let forecast = data?.forecast;\n@let loading = showLoadingIndicator();\n\n@if (loading) {\n  <si-weather-widget-skeleton />\n} @else if (current) {\n  @if (isCompact()) {\n    <div class=\"si-weather-widget-today\">\n      <si-weather-widget-illustration\n        size=\"sm\"\n        [illustration]=\"current.illustration\"\n        [condition]=\"current.condition\"\n        [altFallback]=\"current.illustrationAlt\"\n      />\n      <div class=\"si-weather-widget-today-info\">\n        @if (location()) {\n          <div class=\"si-weather-widget-location\">{{ location() | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  } @else {\n    <div class=\"si-weather-widget-today\">\n      <div class=\"si-weather-widget-temperature\">{{ current.temperature }}</div>\n      <div class=\"si-weather-widget-today-info\">\n        <si-weather-widget-illustration\n          size=\"lg\"\n          [illustration]=\"current.illustration\"\n          [condition]=\"current.condition\"\n          [altFallback]=\"current.illustrationAlt\"\n        />\n        @if (current.condition) {\n          <div class=\"si-weather-widget-condition\">{{ current.condition | translate }}</div>\n        }\n        <ng-container *ngTemplateOutlet=\"rangeTpl; context: { $implicit: current }\" />\n      </div>\n    </div>\n  }\n\n  @if (metrics?.length) {\n    <ul class=\"si-weather-widget-metrics\" [attr.aria-label]=\"metricsLabel() | translate\">\n      @for (metric of metrics; track $index) {\n        <li class=\"si-weather-widget-metric\">\n          <span class=\"si-weather-widget-metric-label\">{{ metric.label | translate }}</span>\n          <span class=\"si-weather-widget-metric-value\">{{ metric.value }}</span>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (!isCompact() && forecast && forecast.days.length) {\n    <si-weather-widget-forecast\n      [forecast]=\"forecast\"\n      [layout]=\"layout() === 'horizontal' ? 'horizontal' : 'vertical'\"\n      [forecastLabel]=\"forecastLabel()\"\n    />\n  }\n}\n\n<ng-template #rangeTpl let-c siWeatherRangeDef>\n  @if (c.minTemperature !== undefined || c.maxTemperature !== undefined) {\n    <div class=\"si-weather-widget-range\">\n      @if (c.minTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-min\">{{ c.minTemperature }}</span>\n      }\n      @if (c.maxTemperature !== undefined) {\n        <span class=\"si-weather-widget-range-max\">{{ c.maxTemperature }}</span>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-90) var(--si-sys-sizing-spacing-x-90);block-size:100%}.si-weather-widget-condition,:host.si-weather-widget-vertical .si-weather-widget-range,:host.si-weather-widget-horizontal .si-weather-widget-range{font-size:var(--si-sys-typography-font-size-body-lg);font-weight:400;line-height:var(--si-sys-typography-line-height-body-lg)}.si-weather-widget-today{display:flex;align-items:start;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}:host.si-weather-widget-vertical .si-weather-widget-today,:host.si-weather-widget-horizontal .si-weather-widget-today{justify-content:space-between}:host.si-weather-widget-vertical .si-weather-widget-today-info,:host.si-weather-widget-horizontal .si-weather-widget-today-info{align-items:flex-end;text-align:end}.si-weather-widget-today-info{display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10);min-inline-size:0}.si-weather-widget-temperature{font-size:var(--si-sys-typography-font-size-display-xl);font-weight:400;line-height:var(--si-sys-typography-line-height-display-xl);color:var(--si-sys-text-primary)}.si-weather-widget-condition{color:var(--si-sys-text-primary)}.si-weather-widget-location{font-weight:600;color:var(--si-sys-text-primary)}.si-weather-widget-range{display:flex;gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.si-weather-widget-range-min{color:var(--si-sys-text-secondary)}.si-weather-widget-range-max{color:var(--si-sys-text-primary);font-weight:600}.si-weather-widget-metrics{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40);margin-block:0;inline-size:100%}.si-weather-widget-metric{display:flex;align-items:baseline;justify-content:space-between;gap:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}.si-weather-widget-metric-label{color:var(--si-sys-text-secondary)}.si-weather-widget-metric-value{color:var(--si-sys-text-primary);font-weight:600;text-align:end}\n"] }]
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], metricsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricsLabel", required: false }] }], forecastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forecastLabel", required: false }] }] } });
 
 /**
@@ -1543,93 +1641,109 @@ class SiWeatherWidgetComponent {
      * layouts. In the `compact` layout, the location is rendered inside the body
      * instead and this input is ignored.
      */
-    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Location displayed next to the illustration in the `compact` layout. Has
      * no effect in `vertical` or `horizontal` layouts; use {@link heading} there.
      */
-    location = input(...(ngDevMode ? [undefined, { debugName: "location" }] : []));
+    location = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "location" }] : /* istanbul ignore next */ []));
     /**
      * Visual layout. {@link SiWeatherWidgetLayout}.
      *
      * @defaultValue 'vertical'
      */
-    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    layout = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /**
      * Composite weather payload of type {@link SiWeatherWidgetData}.
      */
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Input list of primary action items. Supports up to **4** actions and omits additional ones.
      *
      * @defaultValue []
      */
-    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
+    primaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Input list of secondary action items.
      *
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Option to disable automatic start of skeleton loading indication.
      *
      * @defaultValue false
      */
-    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : {}), transform: booleanAttribute });
+    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Input to start and stop the skeleton loading indication.
      *
      * @defaultValue false
      */
-    showLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicator" } : {}), transform: booleanAttribute });
+    showLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Initial delay time in milliseconds before enabling loading indicator.
      * Only used once initially during construction.
      *
      * @defaultValue 300
      */
-    initialLoadingIndicatorDebounceTime = input(300, ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : []));
+    initialLoadingIndicatorDebounceTime = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : /* istanbul ignore next */ []));
     /**
      * Image source for the card.
      */
-    imgSrc = input(...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : []));
+    imgSrc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : /* istanbul ignore next */ []));
     /**
      * Alt text for a provided image.
      */
-    imgAlt = input(...(ngDevMode ? [undefined, { debugName: "imgAlt" }] : []));
+    imgAlt = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imgAlt" }] : /* istanbul ignore next */ []));
     /**
      * Defines if an image is placed on top or start (left) of the card.
      *
      * @defaultValue 'vertical'
      */
-    imgDir = input('vertical', ...(ngDevMode ? [{ debugName: "imgDir" }] : []));
+    imgDir = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imgDir" }] : /* istanbul ignore next */ []));
     /**
      * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
      *
      * @defaultValue 'scale-down'
      */
-    imgObjectFit = input('scale-down', ...(ngDevMode ? [{ debugName: "imgObjectFit" }] : []));
+    imgObjectFit = input('scale-down', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imgObjectFit" }] : /* istanbul ignore next */ []));
     /**
      * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
      */
-    imgObjectPosition = input(...(ngDevMode ? [undefined, { debugName: "imgObjectPosition" }] : []));
+    imgObjectPosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imgObjectPosition" }] : /* istanbul ignore next */ []));
     /**
      * Optional accent line.
      */
-    accentLine = input(...(ngDevMode ? [undefined, { debugName: "accentLine" }] : []));
+    accentLine = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accentLine" }] : /* istanbul ignore next */ []));
     accentClass = computed(() => {
         const accentLine = this.accentLine();
         return accentLine ? 'accent-' + accentLine : '';
-    }, ...(ngDevMode ? [{ debugName: "accentClass" }] : []));
-    cardHeading = computed(() => this.layout() === 'compact' ? undefined : this.heading(), ...(ngDevMode ? [{ debugName: "cardHeading" }] : []));
-    bodyLocation = computed(() => this.layout() === 'compact' ? this.location() : undefined, ...(ngDevMode ? [{ debugName: "bodyLocation" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiWeatherWidgetComponent, isStandalone: true, selector: "si-weather-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, disableAutoLoadingIndicator: { classPropertyName: "disableAutoLoadingIndicator", publicName: "disableAutoLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, showLoadingIndicator: { classPropertyName: "showLoadingIndicator", publicName: "showLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, initialLoadingIndicatorDebounceTime: { classPropertyName: "initialLoadingIndicatorDebounceTime", publicName: "initialLoadingIndicatorDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "si-weather-widget" }, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"cardHeading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-weather-widget-body\n      [layout]=\"layout()\"\n      [value]=\"value()\"\n      [location]=\"bodyLocation()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n</si-card>\n", dependencies: [{ kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "component", type: SiWeatherWidgetBodyComponent, selector: "si-weather-widget-body", inputs: ["layout", "location", "metricsLabel", "forecastLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentClass" }] : /* istanbul ignore next */ []));
+    cardHeading = computed(() => this.layout() === 'compact' ? undefined : this.heading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardHeading" }] : /* istanbul ignore next */ []));
+    bodyLocation = computed(() => this.layout() === 'compact' ? this.location() : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyLocation" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiWeatherWidgetComponent, isStandalone: true, selector: "si-weather-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, disableAutoLoadingIndicator: { classPropertyName: "disableAutoLoadingIndicator", publicName: "disableAutoLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, showLoadingIndicator: { classPropertyName: "showLoadingIndicator", publicName: "showLoadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, initialLoadingIndicatorDebounceTime: { classPropertyName: "initialLoadingIndicatorDebounceTime", publicName: "initialLoadingIndicatorDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null }, accentLine: { classPropertyName: "accentLine", publicName: "accentLine", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "si-weather-widget" }, ngImport: i0, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"cardHeading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-weather-widget-body\n      [layout]=\"layout()\"\n      [value]=\"value()\"\n      [location]=\"bodyLocation()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n</si-card>\n", dependencies: [{ kind: "component", type: SiCardComponent, selector: "si-card", inputs: ["primaryActions", "secondaryActions", "actionParam", "actionBarViewType", "actionBarTitle"] }, { kind: "component", type: SiWeatherWidgetBodyComponent, selector: "si-weather-widget-body", inputs: ["layout", "location", "metricsLabel", "forecastLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiWeatherWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-weather-widget', imports: [SiCardComponent, SiWeatherWidgetBodyComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'si-weather-widget' }, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"cardHeading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-weather-widget-body\n      [layout]=\"layout()\"\n      [value]=\"value()\"\n      [location]=\"bodyLocation()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n</si-card>\n" }]
+            args: [{ selector: 'si-weather-widget', imports: [SiCardComponent, SiWeatherWidgetBodyComponent], host: { class: 'si-weather-widget' }, template: "<si-card\n  class=\"h-100\"\n  [class]=\"accentClass()\"\n  [heading]=\"cardHeading()\"\n  [primaryActions]=\"primaryActions()\"\n  [secondaryActions]=\"secondaryActions()\"\n  [imgSrc]=\"imgSrc()\"\n  [imgDir]=\"imgDir()\"\n  [imgAlt]=\"imgAlt()\"\n  [imgObjectFit]=\"imgObjectFit()\"\n  [imgObjectPosition]=\"imgObjectPosition()\"\n>\n  <div class=\"card-body\" body>\n    <si-weather-widget-body\n      [layout]=\"layout()\"\n      [value]=\"value()\"\n      [location]=\"bodyLocation()\"\n      [disableAutoLoadingIndicator]=\"disableAutoLoadingIndicator()\"\n      [showLoadingIndicator]=\"showLoadingIndicator()\"\n      [initialLoadingIndicatorDebounceTime]=\"initialLoadingIndicatorDebounceTime()\"\n    />\n  </div>\n</si-card>\n" }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], disableAutoLoadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoLoadingIndicator", required: false }] }], showLoadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingIndicator", required: false }] }], initialLoadingIndicatorDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLoadingIndicatorDebounceTime", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: false }] }], imgAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgAlt", required: false }] }], imgDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgDir", required: false }] }], imgObjectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgObjectFit", required: false }] }], imgObjectPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgObjectPosition", required: false }] }], accentLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentLine", required: false }] }] } });
 
 /**