@siemens/element-ng 49.9.0 → 49.11.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, booleanAttribute, output, signal, computed, inject, ElementRef, Component, DestroyRef, viewChild, ChangeDetectorRef, DOCUMENT, NgModule, Directive, model } from '@angular/core';
+import { Injectable, input, booleanAttribute, output, signal, computed, inject, ElementRef, Component, DestroyRef, viewChild, ChangeDetectorRef, DOCUMENT, NgModule, Directive, model, ChangeDetectionStrategy } from '@angular/core';
 import { elementZoom, elementPinch, elementRight2, elementSortUp, elementSortDown } from '@siemens/element-icons';
 import { SiCardComponent, SiCardHeaderComponent } from '@siemens/element-ng/card';
 import { addIcons, SiIconComponent, SiStatusIconComponent } from '@siemens/element-ng/icon';
@@ -7,7 +7,7 @@ import { t, SiTranslatePipe, injectSiTranslateService } from '@siemens/element-t
 import { BehaviorSubject, Subject, takeUntil, switchMap, of, map } from 'rxjs';
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortalOutlet, DomPortal, PortalModule } from '@angular/cdk/portal';
-import { ViewportScroller } from '@angular/common';
+import { ViewportScroller, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed, outputToObservable, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { ScrollbarHelper } from '@siemens/element-ng/common';
 import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
@@ -495,7 +495,7 @@ class SiWidgetBaseDirective {
         // eslint-disable-next-line @angular-eslint/no-input-rename
         alias: 'showLoadingIndicator',
         transform: booleanAttribute });
-    showLoadingIndicatorInternal = signal(false, ...(ngDevMode ? [{ debugName: "showLoadingIndicatorInternal" }] : []));
+    showLoadingIndicatorInternal = signal(undefined, ...(ngDevMode ? [{ debugName: "showLoadingIndicatorInternal" }] : []));
     showLoadingIndicator = computed(() => {
         return this.showLoadingIndicatorInternal() ?? this.showLoadingIndicatorInput();
     }, ...(ngDevMode ? [{ debugName: "showLoadingIndicator" }] : []));
@@ -507,16 +507,22 @@ class SiWidgetBaseDirective {
      */
     initialLoadingIndicatorDebounceTime = input(300, ...(ngDevMode ? [{ debugName: "initialLoadingIndicatorDebounceTime" }] : []));
     loadingTimer;
-    ngOnChanges(changes) {
-        if (!this.disableAutoLoadingIndicator() &&
-            !changes.value?.firstChange &&
-            changes.value?.currentValue) {
+    ngOnChanges() {
+        if (this.disableAutoLoadingIndicator()) {
+            return;
+        }
+        if (this.value()) {
             if (this.loadingTimer) {
                 clearTimeout(this.loadingTimer);
                 this.loadingTimer = undefined;
             }
             this.showLoadingIndicatorInternal.set(false);
         }
+        else {
+            // Data was removed: yield control back to the `showLoadingIndicator` input
+            // so callers can drive the loader manually.
+            this.showLoadingIndicatorInternal.set(undefined);
+        }
     }
     ngOnInit() {
         if (!this.disableAutoLoadingIndicator() && !this.value()) {
@@ -1164,6 +1170,451 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             args: [{ selector: 'si-value-widget', imports: [SiCardComponent, SiLinkDirective, SiTranslatePipe, SiValueWidgetBodyComponent], 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 }] }] } });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Maps a semantic {@link SiWeatherIcon} to a renderable illustration. The
+ * library ships a {@link SiDefaultWeatherIconResolver} that maps the built-in
+ * {@link SiWeatherCondition} vocabulary to Element icons, so the widget renders
+ * a reasonable illustration out of the box. Applications can override the
+ * mapping or add provider-specific vocabularies by registering their own
+ * resolver:
+ *
+ * @example
+ * ```ts
+ * @Injectable({ providedIn: 'root' })
+ * export class MyWeatherIconResolver extends SiWeatherIconResolver {
+ *   override resolve(icon: SiWeatherIcon): SiWeatherIconResolution | null {
+ *     // ...
+ *   }
+ * }
+ * ```
+ *
+ * Resolvers SHOULD return `null` for unknown or `'unknown'` conditions so the
+ * 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) });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherIconResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: () => inject(SiDefaultWeatherIconResolver)
+                }]
+        }] });
+const DEFAULT_CONDITION_ICONS = {
+    clear: 'element-sun',
+    clouds: 'element-cloudy',
+    rain: 'element-rain',
+    storm: 'element-storm',
+    wind: 'element-wind',
+    unknown: null
+};
+/**
+ * Built-in resolver that maps the library's minimal
+ * {@link SiWeatherCondition} vocabulary to Element icons:
+ *
+ * - `clear` → `element-sun`
+ * - `clouds` → `element-cloudy`
+ * - `rain` → `element-rain`
+ * - `storm` → `element-storm`
+ * - `wind` → `element-wind`
+ * - `unknown` → no illustration
+ *
+ * Unknown tokens fall through to `null` so callers can register a more
+ * capable resolver without losing the built-in fallback.
+ */
+class SiDefaultWeatherIconResolver extends SiWeatherIconResolver {
+    resolve(icon) {
+        if (!icon.condition) {
+            return null;
+        }
+        const mapped = DEFAULT_CONDITION_ICONS[icon.condition];
+        if (!mapped) {
+            return null;
+        }
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDefaultWeatherIconResolver, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Renders a weather illustration as either an `<si-icon>` (when the resolver
+ * yields an icon name) or an `<img>` (when a raster `src` is provided).
+ * Owns the icon resolution logic and the alt-text fallback chain. Not exported
+ * from the public entry point.
+ *
+ * @internal
+ */
+class SiWeatherWidgetIllustrationComponent {
+    illustration = input(...(ngDevMode ? [undefined, { debugName: "illustration" }] : []));
+    condition = input(...(ngDevMode ? [undefined, { debugName: "condition" }] : []));
+    altFallback = input(...(ngDevMode ? [undefined, { debugName: "altFallback" }] : []));
+    /** @defaultValue 'lg' */
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    resolver = inject(SiWeatherIconResolver);
+    defaultAlt = t(() => $localize `:@@SI_WEATHER_WIDGET.ILLUSTRATION_ALT:Weather illustration`);
+    resolved = computed(() => {
+        const illustration = this.illustration();
+        if (!illustration) {
+            return null;
+        }
+        const icon = typeof illustration === 'string' ? { src: illustration } : illustration;
+        let resolution;
+        if (icon.src) {
+            resolution = { src: icon.src, alt: icon.alt };
+        }
+        else {
+            resolution = this.resolver.resolve(icon);
+        }
+        if (!resolution || (!resolution.icon && !resolution.src)) {
+            return null;
+        }
+        return {
+            icon: resolution.icon,
+            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: `
+    @let res = resolved();
+    @if (res) {
+      @if (res.icon) {
+        <si-icon
+          role="img"
+          class="si-weather-widget-illustration"
+          [icon]="res.icon"
+          [attr.aria-label]="res.alt | translate"
+        />
+      } @else if (res.src) {
+        <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetIllustrationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-weather-widget-illustration', imports: [SiIconComponent, SiTranslatePipe], template: `
+    @let res = resolved();
+    @if (res) {
+      @if (res.icon) {
+        <si-icon
+          role="img"
+          class="si-weather-widget-illustration"
+          [icon]="res.icon"
+          [attr.aria-label]="res.alt | translate"
+        />
+      } @else if (res.src) {
+        <img class="si-weather-widget-illustration" [src]="res.src" [alt]="res.alt | translate" />
+      }
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, 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'"
+                    }, 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"] }]
+        }], propDecorators: { illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: false }] }], condition: [{ type: i0.Input, args: [{ isSignal: true, alias: "condition", required: false }] }], altFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "altFallback", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Forecast block of the weather widget. Renders either a vertical grid (with
+ * optional extra data columns) or a horizontal day strip depending on
+ * {@link layout}. Not exported from the public entry point.
+ *
+ * @internal
+ */
+class SiWeatherWidgetForecastComponent {
+    forecast = input.required(...(ngDevMode ? [{ debugName: "forecast" }] : []));
+    /** @defaultValue 'vertical' */
+    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    forecastLabel = input(...(ngDevMode ? [undefined, { debugName: "forecastLabel" }] : []));
+    columns = computed(() => {
+        const cols = this.forecast().columns;
+        if (!cols) {
+            return [];
+        }
+        // Hard cap at 5 extra columns; matches the breakpoint set declared in
+        // 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" }] : []));
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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"] }]
+        }], 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 }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Skeleton loading state for the `<si-weather-widget-body>`. Not exported from
+ * the public entry point.
+ *
+ * @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: `
+    <div class="si-weather-widget-skeleton-row">
+      <div class="si-weather-widget-skeleton-value si-skeleton"></div>
+      <div class="si-weather-widget-skeleton-col">
+        <div class="si-weather-widget-skeleton-illustration si-skeleton"></div>
+        <div class="si-weather-widget-skeleton-line si-skeleton"></div>
+        <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-weather-widget-skeleton', 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">
+        <div class="si-weather-widget-skeleton-illustration si-skeleton"></div>
+        <div class="si-weather-widget-skeleton-line si-skeleton"></div>
+        <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"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const LAYOUT_CLASS = {
+    vertical: 'si-weather-widget-vertical',
+    horizontal: 'si-weather-widget-horizontal',
+    compact: 'si-weather-widget-compact'
+};
+/**
+ * Marker directive that types the `let-` context of the shared range
+ * `<ng-template>` so its body gets full type checking instead of `any`.
+ *
+ *  @internal
+ */
+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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherRangeDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[siWeatherRangeDef]' }]
+        }] });
+/**
+ * Body of the `<si-weather-widget>`. Useful for compositions that do not need
+ * the surrounding `<si-card>` chrome (e.g. embedding the weather inside a
+ * custom container).
+ *
+ * Data is supplied as a composite {@link value} payload of type
+ * {@link SiWeatherWidgetData}.
+ *
+ * The body delegates illustration resolution to the injected
+ * {@link SiWeatherIconResolver}. The library ships a default resolver that
+ * maps the built-in {@link SiWeatherCondition} vocabulary to Element icons.
+ *
+ * In the `vertical` layout the forecast list responsively hides additional
+ * data columns (wind, humidity, …) via pure CSS container queries when the
+ * widget becomes too narrow. See `si-weather-widget-body.component.scss` for
+ * the thresholds.
+ */
+class SiWeatherWidgetBodyComponent extends SiWidgetBaseDirective {
+    /**
+     * Visual layout. {@link SiWeatherWidgetLayout}.
+     *
+     * @defaultValue 'vertical'
+     */
+    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * 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" }] : []));
+    /**
+     * Accessible label for the additional data list.
+     *
+     * @defaultValue
+     * ```
+     * 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" }] : []));
+    /**
+     * Accessible label for the forecast section.
+     *
+     * @defaultValue
+     * ```
+     * 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiWeatherWidgetBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-weather-widget-body', imports: [
+                        NgTemplateOutlet,
+                        SiTranslatePipe,
+                        SiWeatherRangeDefDirective,
+                        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"] }]
+        }], 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 }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Dashboard widget for current weather conditions, additional metrics and an
+ * optional multi-day forecast.
+ *
+ * The widget supports three layouts (see {@link SiWeatherWidgetLayout}):
+ *
+ * - `vertical` (default): full vertical card with `<si-card>` heading,
+ *   illustration, today block, optional additional data and an optional
+ *   forecast table with up to five extra columns.
+ * - `horizontal`: wider card with the today block laid out side by side and a
+ *   horizontal forecast strip below. The forecast SHOULD contain at least three
+ *   days for a visually balanced layout.
+ * - `compact`: condensed variant without a card header. The {@link location} is
+ *   rendered next to the illustration. The forecast is not shown.
+ *
+ * Data is supplied as a composite {@link value} payload of type
+ * {@link SiWeatherWidgetData}.
+ *
+ * Weather illustrations are resolved by an optional `SiWeatherIconResolver`
+ * that application developers register. Without a resolver the widget only
+ * renders illustrations when callers pass a direct `illustration.src`.
+ */
+class SiWeatherWidgetComponent {
+    /**
+     * Card heading text. Used as the card header in `vertical` and `horizontal`
+     * layouts. In the `compact` layout, the location is rendered inside the body
+     * instead and this input is ignored.
+     */
+    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+    /**
+     * 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" }] : []));
+    /**
+     * Visual layout. {@link SiWeatherWidgetLayout}.
+     *
+     * @defaultValue 'vertical'
+     */
+    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Composite weather payload of type {@link SiWeatherWidgetData}.
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /**
+     * Input list of primary action items. Supports up to **4** actions and omits additional ones.
+     *
+     * @defaultValue []
+     */
+    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
+    /**
+     * Input list of secondary action items.
+     *
+     * @defaultValue []
+     */
+    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    /**
+     * Option to disable automatic start of skeleton loading indication.
+     *
+     * @defaultValue false
+     */
+    disableAutoLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "disableAutoLoadingIndicator" } : {}), transform: booleanAttribute });
+    /**
+     * Input to start and stop the skeleton loading indication.
+     *
+     * @defaultValue false
+     */
+    showLoadingIndicator = input(false, { ...(ngDevMode ? { debugName: "showLoadingIndicator" } : {}), 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" }] : []));
+    /**
+     * Image source for the card.
+     */
+    imgSrc = input(...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : []));
+    /**
+     * Alt text for a provided image.
+     */
+    imgAlt = input(...(ngDevMode ? [undefined, { debugName: "imgAlt" }] : []));
+    /**
+     * Defines if an image is placed on top or start (left) of the card.
+     *
+     * @defaultValue 'vertical'
+     */
+    imgDir = input('vertical', ...(ngDevMode ? [{ debugName: "imgDir" }] : []));
+    /**
+     * 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" }] : []));
+    /**
+     * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
+     */
+    imgObjectPosition = input(...(ngDevMode ? [undefined, { debugName: "imgObjectPosition" }] : []));
+    /**
+     * Optional accent line.
+     */
+    accentLine = input(...(ngDevMode ? [undefined, { debugName: "accentLine" }] : []));
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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" }]
+        }], 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 }] }] } });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -1173,5 +1624,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiDashboardCardComponent, SiDashboardComponent, SiDashboardModule, SiDashboardService, SiLinkWidgetComponent, SiListWidgetBodyComponent, SiListWidgetComponent, SiListWidgetItemComponent, SiTimelineWidgetBodyComponent, SiTimelineWidgetComponent, SiTimelineWidgetItemComponent, SiValueWidgetBodyComponent, SiValueWidgetComponent };
+export { SiDashboardCardComponent, SiDashboardComponent, SiDashboardModule, SiDashboardService, SiDefaultWeatherIconResolver, SiLinkWidgetComponent, SiListWidgetBodyComponent, SiListWidgetComponent, SiListWidgetItemComponent, SiTimelineWidgetBodyComponent, SiTimelineWidgetComponent, SiTimelineWidgetItemComponent, SiValueWidgetBodyComponent, SiValueWidgetComponent, SiWeatherIconResolver, SiWeatherRangeDefDirective, SiWeatherWidgetBodyComponent, SiWeatherWidgetComponent };
 //# sourceMappingURL=siemens-element-ng-dashboard.mjs.map