Skip to content

SiWeatherWidgetBodyComponent documentation

selector
si-weather-widget-body

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 value payload of type SiWeatherWidgetData .

The body delegates illustration resolution to the injected SiWeatherIconResolver . The library ships a default resolver that maps the built-in 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.

Input Properties

NameTypeDefaultDescription
disableAutoLoadingIndicator
booleanfalseOption to disable automatic start of skeleton loading indication.
forecastLabel
TranslatableString$localize`:@@SI_WEATHER_WIDGET.FORECAST_LABEL:Weather forecast`Accessible label for the forecast section.
initialLoadingIndicatorDebounceTime
number300Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
layout
SiWeatherWidgetLayout'vertical'Visual layout. SiWeatherWidgetLayout .
location
TranslatableStringOptional 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 .
metricsLabel
TranslatableString$localize`:@@SI_WEATHER_WIDGET.METRICS_LABEL:Additional weather data`Accessible label for the additional data list.
showLoadingIndicator
booleanfalseInput to start and stop the skeleton loading indication.
value
Required		(SiWeatherWidgetData | undefined)The main value to be displayed. If no value is set, the skeleton indicates the loading of the value. Disable the automatic loading mechanism by setting SiWidgetBodyBaseComponent.disableAutoLoadingIndicator .

Attributes and Methods

NameTypeDefaultDescription
ngOnChanges()
() => voidA callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
ngOnInit()
() => voidA callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
(readonly) showLoadingIndicator
Signal<boolean>...

Types Documentation

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[]
("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.
(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.
("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.
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
import
imported from @types/node
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)
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

(StatusType | "caution" | "primary" | "inactive")
((MenuItemAction | MenuItemCheckbox | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & { iconOnly: boolean })
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
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)
() => {}
("success" | "info" | "warning" | "danger" | "caution" | "critical")
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"
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
Used in events emitted from SiLinkActionService
Properties
param: any
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
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 .
Constructor
() => {}
Properties
accentClass: Signal<string> = ...
Optional accent line.
accentLine: InputSignal<(AccentLineType | undefined)> = ...
bodyLocation: Signal<(TranslatableString | undefined)> = ...
cardHeading: Signal<(TranslatableString | undefined)> = ...
Option to disable automatic start of skeleton loading indication.
disableAutoLoadingIndicator: InputSignalWithTransform<boolean, unknown> = false
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: InputSignal<(TranslatableString | undefined)> = ...
Alt text for a provided image.
imgAlt: InputSignal<(TranslatableString | undefined)> = ...
Defines if an image is placed on top or start (left) of the card.
imgDir: InputSignal<("horizontal" | "vertical")> = 'vertical'
Sets the image object-fit CSS property.
imgObjectFit: InputSignal<("fill" | "none" | "contain" | "cover" | "scale-down")> = 'scale-down'
Sets the image object-position CSS property.
imgObjectPosition: InputSignal<(string | undefined)> = ...
Image source for the card.
imgSrc: InputSignal<(string | undefined)> = ...
Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
initialLoadingIndicatorDebounceTime: InputSignal<number> = 300
Visual layout. SiWeatherWidgetLayout .
layout: InputSignal<SiWeatherWidgetLayout> = 'vertical'
Location displayed next to the illustration in the compact layout. Has no effect in vertical or horizontal layouts; use heading there.
location: InputSignal<(TranslatableString | undefined)> = ...
Input list of primary action items. Supports up to 4 actions and omits additional ones.
primaryActions: InputSignal<ContentActionBarMainItem[]> = []
Input list of secondary action items.
secondaryActions: InputSignal<MenuItem[]> = []
Input to start and stop the skeleton loading indication.
showLoadingIndicator: InputSignalWithTransform<boolean, unknown> = false
Composite weather payload of type SiWeatherWidgetData .
value: InputSignal<(SiWeatherWidgetData | undefined)> = ...
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)
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.