Skip to content

SiTimelineWidgetComponent documentation

selector
si-timeline-widget

Input Properties

NameTypeDefaultDescription
accentLine
AccentLineTypeOptional accent line
disableAutoLoadingIndicator
booleanfalseOption to disable automatic start of skeleton loading indication.
heading
TranslatableStringTimeline widget header text.
initialLoadingIndicatorDebounceTime
number300Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
LinkLink that leads the user to more information or triggers and action. The link.title is displayed. The title will be translated.
numberOfItems
number4Number of skeleton progress indication items.
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.
showDescription
booleantrueWhether to show or hide the description row during skeleton progress indication.
showLoadingIndicator
booleanfalseInput to start and stop the skeleton loading indication.
value
Required		(undefined | SiTimelineWidgetItem[])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
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

(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)
Represents an item in the timeline widget. Each item may contain a timestamp, a title, an icon, an optional description and optional action elements. Actions can be buttons, links, router links, or menus.
Properties
The related action of the item
action?: TimelineWidgetItemAction
Optional translatable description.
description?: TranslatableString
The icon of the item.
icon: string
The alt text of the icon
iconAlt?: TranslatableString
The color of the icon.
iconColor?: string
The stacked icon of the item.
stackedIcon?: string
The color of the stacked icon.
stackedIconColor?: string
The timestamp of the item.
timeStamp: TranslatableString
The title of the item.
title: TranslatableString
("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"
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
(TimelineWidgetActionButton | TimeLineWidgetLink | TimeLineWidgetRouterLink | TimelineWidgetMenu)
Union type for all possible action items in the timeline widget.
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
extends TimelineWidgetActionBase
Interface representing an action item in the timeline widget.
Properties
Action that called when the item action is triggered.
action: (source: this) => void
The class name to define the button style
customClass?: string
The web font icon class name (e.g. element-settings-outline).
icon?: string from icon
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean from iconOnly
Label that is shown to the user.
label: string from label
type: "action"
Interface representing a menu item in the timeline widget.
Properties
menuItems: MenuItem[]
type: "menu"
Base for action items in the timeline widget.
Properties
The web font icon class name (e.g. element-settings-outline).
icon?: string
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean
Label that is shown to the user.
label: string
Used in events emitted from SiLinkActionService
Properties
param: any
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(undefined | readonly (MenuItem | MenuItem)[])> = ...
linkActionService: (null | SiLinkActionService) = ...
menuActionService: (null | SiMenuActionService) = ...
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.