npm - @siemens/element-ng - Versions diffs - 51.0.0 → 51.0.1 - Mend

@siemens/element-ng 51.0.0 → 51.0.1

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

Files changed (129) hide show

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

@@ -774,11 +774,11 @@ class SiListWidgetBodyComponent extends SiWidgetBaseDirective {
     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 });
+    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-color-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: "22.0.8", ngImport: i0, type: SiListWidgetBodyComponent, decorators: [{
             type: Component,
-            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"] }]
+            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-color-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"] }] } });
 /**
@@ -1005,11 +1005,11 @@ class SiTimelineWidgetBodyComponent extends SiWidgetBaseDirective {
     }, /* @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 });
+    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-color-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: "22.0.8", ngImport: i0, type: SiTimelineWidgetBodyComponent, decorators: [{
             type: Component,
-            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"] }]
+            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-color-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 }] }] } });
 /**
@@ -1468,11 +1468,11 @@ class SiWeatherWidgetForecastComponent {
         return column.values?.[index];
     }
     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" }] });
+    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-color-text-secondary)}.si-weather-widget-forecast-range-max{color:var(--si-sys-color-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-color-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-color-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: "22.0.8", ngImport: i0, type: SiWeatherWidgetForecastComponent, decorators: [{
             type: Component,
-            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"] }]
+            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-color-text-secondary)}.si-weather-widget-forecast-range-max{color:var(--si-sys-color-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-color-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-color-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 }] }] } });
 /**
@@ -1595,7 +1595,7 @@ class SiWeatherWidgetBodyComponent extends SiWidgetBaseDirective {
     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" }] });
+    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-color-text-primary)}.si-weather-widget-condition{color:var(--si-sys-color-text-primary)}.si-weather-widget-location{font-weight:600;color:var(--si-sys-color-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-color-text-secondary)}.si-weather-widget-range-max{color:var(--si-sys-color-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-color-text-secondary)}.si-weather-widget-metric-value{color:var(--si-sys-color-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: "22.0.8", ngImport: i0, type: SiWeatherWidgetBodyComponent, decorators: [{
             type: Component,
@@ -1606,7 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         SiWeatherWidgetForecastComponent,
                         SiWeatherWidgetIllustrationComponent,
                         SiWeatherWidgetSkeletonComponent
-                    ], 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"] }]
+                    ], 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-color-text-primary)}.si-weather-widget-condition{color:var(--si-sys-color-text-primary)}.si-weather-widget-location{font-weight:600;color:var(--si-sys-color-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-color-text-secondary)}.si-weather-widget-range-max{color:var(--si-sys-color-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-color-text-secondary)}.si-weather-widget-metric-value{color:var(--si-sys-color-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 }] }] } });
 /**