Skip to content

SiWeatherWidgetComponent documentation

selector
si-weather-widget

Dashboard widget for current weather conditions, additional metrics and an optional multi-day forecast.

The widget supports three layouts (see 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 location is rendered next to the illustration. The forecast is not shown.

Data is supplied as a composite value payload of type 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 .

Input Properties

NameTypeDefaultDescription
accentLine
AccentLineTypeOptional accent line.
disableAutoLoadingIndicator
booleanfalseOption to disable automatic start of skeleton loading indication.
heading
TranslatableStringCard 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.
imgAlt
TranslatableStringAlt text for a provided image.
imgDir
("horizontal" | "vertical")'vertical'Defines if an image is placed on top or start (left) of the card.
imgObjectFit
("fill" | "none" | "contain" | "cover" | "scale-down")'scale-down'Sets the image object-fit CSS property.
imgObjectPosition
stringSets the image object-position CSS property.
imgSrc
stringImage source for the card.
initialLoadingIndicatorDebounceTime
number300Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
layout
SiWeatherWidgetLayout'vertical'Visual layout. SiWeatherWidgetLayout .
location
TranslatableStringLocation displayed next to the illustration in the compact layout. Has no effect in vertical or horizontal layouts; use heading there.
primaryActions
ContentActionBarMainItem[][]Input list of primary action items. Supports up to 4 actions and omits additional ones.
secondaryActions
MenuItem[][]Input list of secondary action items.
showLoadingIndicator
booleanfalseInput to start and stop the skeleton loading indication.
value
SiWeatherWidgetDataComposite weather payload of type SiWeatherWidgetData .

Types Documentation

("vertical" | "horizontal" | "compact")
Visual layout of the SiWeatherWidgetComponent .

- vertical : full vertical card layout with header, today block, optional additional data and an optional vertical forecast table. - horizontal : wider card with the today block laid out side by side and a horizontal forecast strip below. - compact : condensed card without a card header. Location and min/max temperature are rendered next to the illustration. Does not show a forecast.
Composite payload accepted by the body component. Granular widget/body inputs ( current , metrics , forecast ) take precedence when set.
Properties
current: SiWeatherWidgetCurrent
forecast?: SiWeatherWidgetForecast
metrics?: readonly SiWeatherWidgetMetric[]
(StatusType | "caution" | "primary" | "inactive")
(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.
((MenuItemAction | MenuItemCheckbox | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & { iconOnly: boolean })
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
("success" | "info" | "warning" | "danger" | "caution" | "critical")
Translatable
import
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
Today block of the weather widget.
Properties
Translatable condition label, e.g. "Sunny" .
condition?: TranslatableString
Weather illustration. A string is shorthand for { src } .
illustration?: (string | SiWeatherIcon)
Optional alt text used when illustration is given as a string.
illustrationAlt?: TranslatableString
Today's maximum temperature, pre-formatted by the caller.
maxTemperature?: (string | number)
Today's minimum temperature, pre-formatted by the caller.
minTemperature?: (string | number)
Current temperature, pre-formatted by the caller (e.g. "26°" or 26 ).
temperature: (string | number)
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[]
A single metric row in the additional-data block (e.g. wind, precipitation).
Properties
Translatable label, e.g. "Wind" .
label: TranslatableString
Pre-formatted value, e.g. "7km/h" .
value: (string | number)
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
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
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)
("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

Used in events emitted from SiLinkActionService
Properties
param: any
() => {}
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(readonly (MenuItem | MenuItem)[] | undefined)> = ...
linkActionService: (SiLinkActionService | null) = ...
menuActionService: (SiMenuActionService | null) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
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
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

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