WidgetConfigEvent Type documentation¶

WidgetConfigEvent

{ primaryActions: (MenuItemLegacy | ContentActionBarMainItem)[], primaryEditActions: (MenuItemLegacy | ContentActionBarMainItem)[], secondaryActions: (MenuItemLegacy | MenuItem)[], secondaryEditActions: (MenuItemLegacy | MenuItem)[] }¶

Type alias

Event type used when a widget config is changed from within a widget instance. For example, a widget instance component may assign and change the primary actions. It needs to publish the change so that the UI in the hosting dashboard card can be updated.

Types Documentation¶

MenuItemLegacy ¶ import imported from @siemens/element-ng

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

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

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

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

badge? (`string` \| `number`)¶ Property Badge that is rendered after the label.

badgeColor? `string`¶ Property Color of the badge (not iconBadge).

disabled? `boolean`¶ Property Whether the menu item id disabled.

icon? `string`¶ Property Optional icon that will be rendered before the label.

iconBadge? (`string` \| `number` \| `boolean`)¶ Property Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.

id? `string`¶ Property ID that will be attached to the DOM node.

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.

label `TranslatableString`¶ Property Label that is shown to the user.

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

LinkAction

¶

Interface

Used in events emitted from SiLinkActionService

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

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

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.