Skip to content

SiWeatherWidgetForecast Type documentation

Forecast block of the weather widget.

The vertical layout supports up to five optional columns in addition to the mandatory rightmost min/max temperature column. The horizontal layout ignores columns and renders only day label, illustration and min/max temperature per column. A horizontal forecast should provide at least three days for a visually balanced layout.
Properties
Optional extra columns (vertical layout only). At most five are rendered.
columns?: readonly SiWeatherWidgetForecastColumn[]
The forecast days in display order.
days: readonly SiWeatherWidgetForecastDay[]

Types Documentation

readonly SiWeatherWidgetForecastColumn[]
Property
Optional extra columns (vertical layout only). At most five are rendered.
An optional forecast column shown left of the temperature column in vertical layouts. The widget supports up to five of these columns; additional columns are ignored. The temperature column is mandatory and always rendered on the right; it does not need to be modelled as a column here.
Properties
element-icons icon name shown next to each row value.
icon?: string
Translatable column label, used as aria-label for the column.
label?: TranslatableString
Per-day values, aligned by index with SiWeatherWidgetForecast.days . Missing entries are rendered as empty cells.
values: readonly (string | number | undefined)[]
A single day in the forecast block.
Properties
Weather illustration for the day. A string is shorthand for { src } .
illustration?: (string | SiWeatherIcon)
Translatable day label, e.g. "Mon" .
label: TranslatableString
Maximum temperature, pre-formatted by the caller.
maxTemperature: (string | number)
Minimum temperature, pre-formatted by the caller.
minTemperature: (string | number)
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
readonly SiWeatherWidgetForecastDay[]
Property
The forecast days in display order.
Describes how a weather illustration should be resolved. Callers can either provide a direct SiWeatherIcon.src or a semantic SiWeatherIcon.condition token resolved by a SiWeatherIconResolver .
Properties
Translatable alt text for accessibility.
alt?: TranslatableString
Semantic condition token, used by the resolver. Apps with custom resolvers may pass any string.
condition?: string
Direct URL/path. Wins over condition .
src?: string
Translatable
import
string
Property
Direct URL/path. Wins over condition .
string
Property
Semantic condition token, used by the resolver. Apps with custom resolvers may pass any string.
("clear" | "clouds" | "rain" | "storm" | "wind" | "unknown")
Built-in weather condition vocabulary. Mapped 1:1 by the library's default SiWeatherIconResolver to Element icons. Applications that need provider-specific vocabularies (Xweather, OpenWeather, …) should register their own resolver and may accept any string in their public APIs.
Result returned by a SiWeatherIconResolver . Implementations should return either icon (rendered via <​si-icon​> ) or src (rendered as a plain <​img​> ). When both are present, icon wins.
Properties
Resolved alt text. The widget falls back to a sensible default.
alt?: TranslatableString
Resolved Element icon name (e.g. "element-sun" ). Rendered via <​si-icon​> .
icon?: string
Resolved image URL. Rendered as a plain <​img​> .
src?: string
() => {}
Constructor

string
Property
Resolved Element icon name (e.g. "element-sun" ). Rendered via <​si-icon​> .
string
Property
Resolved image URL. Rendered as a plain <​img​> .
() => {}
Maps a semantic SiWeatherIcon to a renderable illustration. The library ships a SiDefaultWeatherIconResolver that maps the built-in 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:
@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.
Constructor
() => {}
Methods
(icon: SiWeatherIcon) => (SiWeatherIconResolution | null)
Parameters
icon: SiWeatherIcon
extends SiWeatherIconResolver
Built-in resolver that maps the library's minimal 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.
Constructor
() => {} from SiWeatherIconResolver
Methods
(icon: SiWeatherIcon) => (SiWeatherIconResolution | null)
Parameters
icon: SiWeatherIcon

Except where otherwise noted, content on this site is licensed under MIT License.