SiListWidgetComponent documentation¶

selector

si-list-widget

The <si-list-widget> supports an easy composition of links and actions with support for skeleton loading indicator, wrapped in a card.

Input Properties¶

Name	Type	Default	Description
accentLine ¶	`AccentLineType`		Optional accent line
compareFn ¶	(a: `SiListWidgetItem`, b: `SiListWidgetItem`) => (`undefined` \| `number`)	`( a: SiListWidgetItem, b: SiListWidgetItem ) => { const aLabel = typeof a.label === 'object' ? a.label.title! : a.label; const bLabel = typeof b.label === 'object' ? b.label.title! : b.label; return aLabel.localeCompare(bLabel); }`	Compare function of for two `SiListWidgetItem` s that is used to sort the array of items. The default compares the item labels by using the string `localeCompare()` function. @param: first `SiListWidgetItem` of the comparison. @param: second `SiListWidgetItem` of the comparison. Returns A value `< 0` if `a` is smaller, `> 0` if `b` is smaller, otherwise `0` .
disableAutoLoadingIndicator ¶	`boolean`	`false`	Option to disable automatic start of skeleton loading indication.
filterFn ¶	(item: `SiListWidgetItem`, searchTerm: `string`) => (`undefined` \| `boolean`)	`( item: SiListWidgetItem, searchTerm: string ) => { const aLabel = typeof item.label === 'object' ? item.label.title! : item.label; return aLabel.toLowerCase().includes(searchTerm.toLowerCase()); }`	Filter function that is used to filter down the list items when the user enters a term in the search bar. Default function. @param: The item be checked if it matches the searchTerm. @param: The string the user typed in the search bar. Returns `true` if the `searchTerm` matches the `item` and the `item` shall be kept in the list.
heading ¶	`TranslatableString`		List widget heading.
initialLoadingIndicatorDebounceTime ¶	`number`	`300`	Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
link ¶	`Link`		Optional footer link for the list widget
numberOfLinks ¶	`number`	`6`	The number of skeleton progress indication rows.
search ¶	`boolean`	`false`	Enables the search functionality.
searchPlaceholderLabel ¶	`TranslatableString`	$localize`:@@SI_LIST_WIDGET.SEARCH_PLACEHOLDER:Search...`	label for the "search placeholder" name
showLoadingIndicator ¶	`boolean`	`false`	Input to start and stop the skeleton loading indication.
sort ¶	`SortOrder`		Set `ASC` of ascending sorting, `DSC` for descending sorting and `undefined` for no sorting.
sortAscendingLabel ¶	`TranslatableString`	$localize`:@@SI_LIST_WIDGET.SORT_ASCENDING:Sort ascending`
sortDescendingLabel ¶	`TranslatableString`	$localize`:@@SI_LIST_WIDGET.SORT_DESCENDING:Sort descending`
value ¶	(`undefined` \| `SiListWidgetItem`[])		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` .

Output Properties¶

Name	Type	Description
sortChange ¶	`SortOrder`	Set `ASC` of ascending sorting, `DSC` for descending sorting and `undefined` for no sorting.

Attributes and Methods¶

Name	Type	Default	Description
ngOnInit() ¶	() => `void`		A 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¶

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

SortOrder (`"ASC"` \| `"DSC"`)¶ Type alias Defines the sort order.

SiListWidgetItem

¶

Interface

Interface for objects to configure the the list widget.

Properties
Optional right aligned action. action?: `Link`¶
The action icon. actionIcon?: `string`¶
Optional translatable string to be displayed in a badge. badge?: `TranslatableString`¶
Defines the badge color. Must be one of the element `bg-<color>` CSS classes, like `bg-primary` , `bg-secondary` , 'bg-caution'. Use only the name without `bg` . badgeColor?: `string`¶
Optional translatable description. description?: `TranslatableString`¶
Label is either a translatable string or a link. label: (`Link` \| `TranslatableString`)¶
Optional translatable text that is display to the right. text?: `TranslatableString`¶

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

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

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