SiValueWidgetComponent documentation¶

selector

si-value-widget

Is a dynamic UI component that not only displays information, but also includes embedded actions which the user can interact with to perform tasks directly related to the card's content. Actions might include editing settings, initiating processes, or deleting resources.

The actionable widget turns data representation into an interactive hub, streamlining the user's tasks and decisions associated with the card's content.

This component is a wrapper using the .si-value-widget CSS classes and the <si-card> component. For more configuration options, use the CSS classes directly.

Input Properties¶

Name	Type	Default	Description
accentLine ¶	`AccentLineType`		Optional accent line
description ¶	`TranslatableString`		Short description of the value. A description is mandatory to show an icon. Only visible if `value` is available.
disableAutoLoadingIndicator ¶	`boolean`	`false`	Option to disable automatic start of skeleton loading indication.
heading ¶	`TranslatableString`		Value widget header text.
icon ¶	`string`		The element icon name. Only visible if `value` is available.
imgAlt ¶	`string`		Alt 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"` \| `"contain"` \| `"cover"` \| `"none"` \| `"scale-down"`)	`'scale-down'`	Sets the image object-fit CSS property.
imgObjectPosition ¶	`string`		Sets the image object-position CSS property.
imgSrc ¶	`string`		Image source for the card.
initialLoadingIndicatorDebounceTime ¶	`number`	`300`	Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
link ¶	`Link`		Link that leads the user to more information or triggers and action. The `link.title` is displayed. The title will be translated.
primaryActions ¶	(`MenuItem` \| `ContentActionBarMainItem`)[]	`[]`	Input list of primary action items. Supports up to 4 actions and omits additional ones.
secondaryActions ¶	(`MenuItem` \| `MenuItem`)[]	`[]`	Input list of secondary action items.
showLoadingIndicator ¶	`boolean`	`false`	Input to start and stop the skeleton loading indication.
status ¶	`EntityStatusType`		Show a status icon instead of the icon .
unit ¶	`TranslatableString`		The unit of the value (e.g. kWh or users). Only visible if `value` is available.
value ¶	`TranslatableString`		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 `SiValueWidgetComponent.disableAutoLoadingIndicator` .

Types Documentation¶

AccentLineType (`StatusType` \| `"caution"` \| `"primary"` \| `"inactive"`)¶ Type alias

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

Link

¶

Interface

Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc. action?: (`string` \| (param: `any`) => `any`)¶
A boolean that lets the link know whether it is disabled or not. disabled?: `boolean`¶
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set. href?: `string`¶
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route. isActive?: `boolean`¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of `any` as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (`string` \| `any`[])¶
The navigation extras provide additional routing options when using the router link. navigationExtras?: `NavigationExtras`¶
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab. target?: `string`¶
The title of the menu item. Can be either the title to be displayed or the translation key. title?: `TranslatableString`¶
The optional tooltip of the link. Can be either the text to be displayed or the translation key. tooltip?: `TranslatableString`¶

ContentActionBarMainItem ((`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemLink` \| `MenuItemRouterLink` \| `MenuItemGroup`) & { iconOnly: `boolean` })¶ Type alias

MenuItem (`MenuItemGroup` \| `MenuItemAction` \| `MenuItemRouterLink` \| `MenuItemLink` \| `MenuItemRadioGroup` \| `MenuItemCheckbox` \| `MenuItemRadio` \| `MenuItemHeader` \| `MenuDivider`)¶ Type alias

EntityStatusType (`ExtendedStatusType` \| `"pending"` \| `"progress"`)¶ Type alias

StatusType (`"success"` \| `"info"` \| `"warning"` \| `"danger"` \| `"caution"` \| `"critical"`)¶ Type alias

Translatable ¶ import imported from @siemens/element-translate-ng

MenuItemAction

extends MenuItemBase¶

Interface

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"`¶

MenuItemCheckbox

extends MenuItemBase¶

Interface

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"`¶

MenuItemLink

extends MenuItemBase¶

Interface

Properties
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`¶
The href property of the anchor. href: `string`¶
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`¶
The target property of the anchor. target?: `string`¶
type: `"link"`¶

MenuItemRouterLink

extends MenuItemBase¶

Interface

Represents a menu item that navigates using the Angular Router.

Requires a configured Angular Router.

Properties
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`¶
Navigation extras that are passed to the `RouterLink` . extras?: `NavigationExtras`¶
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`¶
Link for the angular router. Accepts the same values as `RouterLink` . routerLink: (`string` \| `any`[])¶
type: `"router-link"`¶

MenuItemGroup

extends MenuItemBase¶

Interface

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"`¶

MenuItemRadioGroup

¶

Interface

Properties
Items that are part of the radio group. children: [ `MenuItemHeader`, ...(`MenuItemRadio` \| `MenuItemHeader` \| `MenuDivider`)[] ]¶
type: `"radio-group"`¶

MenuItemRadio

extends MenuItemBase¶

Interface

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"`¶

MenuItemHeader

¶

Interface

Properties
The label of the header. label: `string`¶
type: `"header"`¶

MenuDivider

¶

Interface

Properties
type: `"divider"`¶

ExtendedStatusType (`StatusType` \| `"unknown"`)¶ Type alias

MenuItemBase

¶

Interface

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`¶

SiMenuActionService

¶

Class

Implement and provide this to an SiMenuFactoryComponent to receive trigger events.

Constructor
() => `{}`¶

Methods

actionTriggered

(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`¶

LinkAction

¶

Interface

Used in events emitted from SiLinkActionService

Properties
link: `Link`¶
param: `any`¶

SiMenuFactoryComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
actionParam: `InputSignal`<`unknown`> = ...¶
items: `InputSignal`<(`undefined` \| readonly (`MenuItem` \| `MenuItem`)[])> = ...¶
linkActionService: (`null` \| `SiLinkActionService`) = ...¶
menuActionService: (`null` \| `SiMenuActionService`) = ...¶

Methods

isLegacyItemStyle

(item: (MenuItem | MenuItem)) => item is MenuItem¶

Parameters
item: (`MenuItem` \| `MenuItem`)¶

isNewItemStyle

(item: (MenuItem | MenuItem)) => item is MenuItem¶

Parameters
item: (`MenuItem` \| `MenuItem`)¶

radioOrCheckboxTriggered

(item: MenuItem) => void¶

Parameters
item: `MenuItem`¶

runAction

(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void¶

Parameters
item: (`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemRadio`)¶

SiLinkActionService

¶

Class

▶

Constructor
() => `{}`¶

Properties
Observable which emits the link and param to run the action on. action$: `Observable`<`LinkAction`> = `this.actionSubject.asObservable()`¶
actionSubject: `Subject`<`LinkAction`> = ...¶

Methods

emit

(link: Link, param: any) => void¶

Emit a new link and param pair to run the action on.

Parameters
link: `Link`¶
param: `any`¶

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