Skip to content

SiWeatherWidgetLayout Type 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.

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[]
(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
readonly SiWeatherWidgetForecastColumn[]
Property
Optional extra columns (vertical layout only). At most five are rendered.
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
(string | number)
Property
Badge that is rendered after the label.
string
Property
Color of the badge (not iconBadge).
boolean
Property
Whether the menu item id disabled.
string
Property
Optional icon that will be rendered before the label.
(string | number | boolean)
Property
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
string
Property
ID that will be attached to the DOM node.
TranslatableString
Property
Label that is shown to the user.
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)
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.
readonly SiWeatherWidgetForecastDay[]
Property
The forecast days in display order.
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
string
Property
Resolved Element icon name (e.g. "element-sun" ). Rendered via <​si-icon​> .
string
Property
Resolved image URL. Rendered as a plain <​img​> .
() => {}
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)> = ...
InputSignal<(TranslatableString | undefined)> = ...
Property
▶
Location displayed next to the illustration in the compact layout. Has no effect in vertical or horizontal layouts; use heading there.
InputSignal<(SiWeatherWidgetData | undefined)> = ...
Property
▶
Composite weather payload of type SiWeatherWidgetData .
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.