Skip to content

SiFlexibleDashboardComponent documentation

selector
si-flexible-dashboard

The component implements a dashboard with adding, removing and resizing widgets. It consists and connects a toolbar, a grid with widgets, and a widget catalog.

Input Properties

NameTypeDefaultDescription
config
Configinject(SI_DASHBOARD_CONFIGURATION)Option to configure a dashboard instance. Default is the optional value from the SI_DASHBOARD_CONFIGURATION .
dashboardId
stringOptionally, but it is recommended to include an id for a dashboard. The id is utilized in the persistence calls on the SiWidgetStorage .
editable
booleanfalseInput to change the dashboard editable state.
heading
stringHeading for the dashboard.
hideAddWidgetInstanceButton
booleanfalseOption to remove the add widget instance button from the primary toolbar.
hideEditButton
booleanfalseOption to hide the dashboard edit button.
hideProgressIndicator
booleanfalseOption to turn off the loading spinner on save and load operations.
searchPlaceholder
TranslatableString$localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`Placeholder text for the search input field in the widget catalog.
showEditButtonLabel
booleanfalseOption to display the edit button as a text button instead, only if the window is larger than xs SiResponsiveContainerDirective .
widgetCatalog
Widget[][]Sets the available widgets for the widget catalog to the dashboard.
widgetCatalogComponent
Type<SiWidgetCatalogComponent>Optionally, provide a custom subclass of the SiWidgetCatalogComponent to use your own catalog component.
widgetInstanceEditorDialogComponent
Type<SiWidgetInstanceEditorDialogComponent>Optionally, provide a custom subclass of the SiWidgetInstanceEditorDialogComponent to use your own implementation.

Output Properties

NameTypeDescription
editableChange
booleanInput to change the dashboard editable state.
isModified
booleanEmits the modification state of the grid. It is unmodified when the visible state is equal to the loaded state from the widget storage. When the user modifies the dashboard by e.g. while moving the widgets, the dashboard is marked as modified and emits true and when the user persists the change by saving, or reverts the state by canceling, the state is unmodified again and emits false .

Attributes and Methods

NameTypeDefaultDescription
(readonly) dashboard
Signal<SiDashboardComponent>...Property to access the dashboard component instance.
(readonly) grid
Signal<SiGridComponent>...The grid component is the actual container for the widgets.
(readonly) isDashboardVisible
Signal<boolean>...Returns True, if the dashboard shows its widgets and not a catalog or and editor.
(readonly) pageTitle
Signal<(undefined | string)>...The page title of the dashboard, which is either SiFlexibleDashboardComponent.heading for the default widget view or DASHBOARD.WIDGET_EDITOR_DIALOG.TITLE or 'DASHBOARD.WIDGET_LIBRARY.TITLE' when adding new or editing widgets.
(readonly) primaryEditActions$
BehaviorSubject<(MenuItem | DashboardToolbarItem)[]>...The primary action menu items shown in the edit mode of the dashboard.
(readonly) secondaryEditActions$
BehaviorSubject<(MenuItem | DashboardToolbarItem)[]>...The secondary action menu items shown in the edit mode of the dashboard. When all menu items are more than three, they will be places in the secondary menu of the content action bar.
showWidgetCatalog()
() => voidShows the widget catalog of the dashboard. If a widget instance is expanded it restores the widget instances before.

Types Documentation

{ grid: GridConfig }
Dashboard configuration object. Inject globally using the SI_DASHBOARD_CONFIGURATION or configure individual dashboard instances.
InjectionToken<Config> = ...
Variable
Injection token to configure dashboards. Use { provide: SI_DASHBOARD_CONFIGURATION, useValue: config } in your app configuration.
Widget storage api to provide the persistence layer of the widgets of a dashboard (typically from a web service). The dashboard grid uses this API to load and save the widget configurations. Applications using siemens-dashboard needs to implement this abstract class and provide it in the module configuration.
Constructor
() => {}
Properties
Optional method to provide primary and secondary toolbar menu items.
getToolbarMenuItems?: (dashboardId: string) => { primary: Observable<(MenuItem | DashboardToolbarItem)[]>, secondary: Observable<(MenuItem | DashboardToolbarItem)[]> }
Methods
(dashboardId: string) => Observable<WidgetConfig[]>
Returns an observable with the dashboard widget configuration. The dashboard subscribes to the observable and updates when a new value emits.
Parameters
dashboardId?: string
(widgets: (WidgetConfig | Omit<WidgetConfig, "id">)[], removedWidgets: WidgetConfig[], dashboardId: string) => Observable<WidgetConfig[]>
Saves the given widget configuration. Existing widgets have a id . New widgets have no id and it is in the responsibility of the implementor to set the ids of the new widgets. In addition, the implementor needs to check if objects that have been available before are missing. These widgets have been removed by the user. As a result of this method, the observables returned by the load() method should emit the new widget config objects, before also returning them.
Parameters
The existing and new widget config objects to be saved.
widgets: (WidgetConfig | Omit<WidgetConfig, "id">)[]
removedWidgets?: WidgetConfig[]
dashboardId?: string
(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.
Widgets describe the entries within the widget catalog and holds all default configuration and factory functionality to instantiate a widget instance, represented as WidgetConfig objects.
Properties
The factory to instantiate a widget instance component that is added to the dashboard.
componentFactory: WidgetComponentFactory
Optional default values that can be set to widget instances.
defaults?: Pick<WidgetConfig, ("width" | "height" | "minWidth" | "minHeight" | "heading" | "expandable" | "immutable" | "image" | "accentLine")>
An optional description that is visible in the widget catalog.
description?: string
A CSS icon class that specifies the widget icon, displayed in the catalog.
iconClass?: string
A unique id of the widget.
id: string
The name of the widget that is presented in the widget catalog.
name: string
Optional default payload object that is copied into every widget instance WidgetConfig .
payload?: any
An optional version string.
version?: string
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
(DashboardToolbarItemAction | DashboardToolbarItemRouterLink | DashboardToolbarItemLink)
Union type for all possible items in the dashboard toolbar.
A WidgetConfig holds the configuration of a widget instance component that is visible on a dashboard. It can be persisted and used to restore a dashboards state.
Properties
Optional type of the accent line.
accentLine?: AccentLineType
actionBarViewType?: ViewType
Defines whether the widget instance component can be expanded and enlarged over the dashboard.
expandable?: boolean
grid item header text.
heading?: string
Height of the grid item, where number represents how many rows it takes. (default?: 1)
height?: number
A unique id of a widget instance
id: string
Optional configuration for an image to be displayed on the widget instance.
image?: WidgetImage
immutable?: boolean
Widget instance editor components can use this property to indicate an invalid configuration. True if the config is invalid. False, undefined or null indicate a valid configuration.
Deprecated: Use the statusChanges emitter to notify about configuration status changes.
invalid?: boolean
isNotRemovable?: boolean
maximum height allowed during resize/creation (default?: undefined = un-constrained)
minHeight?: number
minimum width allowed during resize/creation (default?: undefined = un-constrained)
minWidth?: number
A widget specific payload object. Placeholder to pass in additional configuration.
payload?: any
Optionally, the version widget description that was used to create the widget config.
version?: string
The id of the widget descriptor that was used to instantiate the WidgetConfig and the widget instance component.
widgetId: string
Width of the grid item, where number represents how many columns it spans (default?: 1)
width?: number
Grid item position on x axis of the grid (default?: 0)
x?: number
Grid item position on y axis of the grid (default?: 0)
y?: number
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"
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"
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 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
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"
Interface representing an action item in the dashboard toolbar.
Properties
Action that called when the item is triggered.
action: (grid: SiGridComponent) => void
Label that is shown to the user.
label: TranslatableString
type: "action"
(WidgetComponentTypeFactory | FederatedModule | WebComponent)
Factory type that is either a WidgetComponentTypeFactory , FederatedModule or WebComponent .
State to control the behavior of a widget instance editor wizard. The wizard state is used to control the behavior of the dialog buttons provided by the catalog and editor components.
Properties
disableNext?: boolean
hasNext: boolean
hasPrevious: boolean
An editor component for a widget instance need to implement this interface. After initializing the instance editor component, with widget configuration is set. Optionally, the component can emit changes during editing to control e.g. the dialog behavior like disabling the save button.
Properties
The hosting component of the widget instance editor sets the configuration after initialization. The editor component should use the configuration as input and persist all relevant changes within the config. The hosting component takes the config after adding of saving the widget instance and updates the dashboard.
config: (WidgetConfig | Omit<WidgetConfig, "id"> | InputSignal<(WidgetConfig | Omit<WidgetConfig, "id">)>)
Optionally, emit updated widget configuration using an event emitter.
configChange?: (Subject<(WidgetConfig | Omit<WidgetConfig, "id">)> | OutputEmitterRef<(WidgetConfig | Omit<WidgetConfig, "id">)>)
Optionally, inform the hosting component about widget configuration status changes.
statusChanges?: (Subject<Partial<WidgetConfigStatus>> | OutputEmitterRef<Partial<WidgetConfigStatus>>)
Properties
height: number
width: number
Configuration object for the si-grid component, including the options of gridstack.
Properties
The configuration options of gridstack.
gridStackOptions?: GridStackOptions
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
(CommonFactoryFields & { [ index: string ]: any } })
(CommonFactoryFields & LoadRemoteModuleOptions & { [ index: string ]: any } })
(CommonFactoryFields & { [ index: string ]: any } })
(StatusType | "caution" | "primary" | "inactive")
("collapsible" | "expanded" | "mobile")
Image is used to configure an image to be displayed on a widget instance.
Properties
The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.
alt: string
Defines if an image is placed on top or start (left) of the card.
dir?: ("horizontal" | "vertical")
Sets the image object-fit CSS property.
objectFit?: ObjectFit
Sets the image object-position CSS property.
objectPosition?: string
The image URL (See ).
src: string
extends WidgetInstanceEditor
A widget instance editor component that shall support a multi-page widget configuration can implement this interface. The wizard-like page state WidgetInstanceEditorWizardState needs to be managed by the editor itself and is used to control wizard dialog buttons that are provided by the catalog and editor component.
Properties
The hosting component of the widget instance editor sets the configuration after initialization. The editor component should use the configuration as input and persist all relevant changes within the config. The hosting component takes the config after adding of saving the widget instance and updates the dashboard.
config: (WidgetConfig | Omit<WidgetConfig, "id"> | InputSignal<(WidgetConfig | Omit<WidgetConfig, "id">)>) from config
Optionally, emit updated widget configuration using an event emitter.
configChange?: (Subject<(WidgetConfig | Omit<WidgetConfig, "id">)> | OutputEmitterRef<(WidgetConfig | Omit<WidgetConfig, "id">)>) from configChange
The current state of the multi-page widget instance editor. The state is access after #next() or #previous() is invoked.
state: WidgetInstanceEditorWizardState
Emit changes as needed during the user interaction with the editor.
stateChange?: (Subject<WidgetInstanceEditorWizardState> | OutputEmitterRef<WidgetInstanceEditorWizardState>)
Optionally, inform the hosting component about widget configuration status changes.
statusChanges?: (Subject<Partial<WidgetConfigStatus>> | OutputEmitterRef<Partial<WidgetConfigStatus>>) from statusChanges
Methods
Is invoked from the next button. Display next page as consequence. For web components, implementing next() requires adding an event listener for the next event on the element.
next: () => void
Is invoked from the previous button. Display previous page as consequence. For web components, implementing previous() requires adding an event listener for the previous event on the element.
previous: () => void
(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.
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
(LoadRemoteModuleScriptOptions | LoadRemoteModuleEsmOptions | LoadRemoteModuleManifestOptions)
The Remote Module definition is based on @angular-architects . We take it over into this file to prevent adding a hard dependency.
("success" | "info" | "warning" | "danger" | "caution" | "critical")
Object is used to inform the editor hosting component about configuration changes to configure (e.g. enable/disable) the control buttons accordingly.
Properties
If true, save or add button will be disabled.
invalid: boolean
Indicates that the configuration was changed. If true, canceling the editor will first show a dialog to confirm the discard.
modified: boolean
((MenuItemAction | MenuItemCheckbox | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & { iconOnly: boolean })
import
imported from gridstack
Translatable
import
{ exposedModule: string, remoteEntry: string, remoteName: string, type: "script" }
{ exposedModule: string, remoteEntry: string, type: "module" }
{ exposedModule: string, remoteName: string, type: "manifest" }
("contain" | "cover" | "fill" | "none" | "scale-down")
ObjectFit configuration options for a widget image.
See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
<(T: ActionDialogBase<any>)> T extends AlertDialog ? AlertDialogResult : T extends ConfirmationDialog ? ConfirmationDialogResult : T extends EditDiscardDialog ? EditDiscardDialogResult : T extends DeleteConfirmationDialog ? DeleteConfirmationDialogResult : never
Returns the return value type for the given action dialog type
typeof ConfirmationDialogResult[ keyof typeof ConfirmationDialogResult]
typeof DeleteConfirmationDialogResult[ keyof typeof DeleteConfirmationDialogResult]
typeof EditDiscardDialogResult[ keyof typeof EditDiscardDialogResult]
<T: never, CT: any>
Reference to a modal dialog
Constructor
() => {}
Properties
The default close value of the modal.
closeValue?: CT
The modal options passed during creation.
See SiModalService
data: ModalOptions = {}
detach: () => void = () =​> {}
Custom class for modal-dialog
dialogClass: string = ''
Emits the close value when the modal is hidden.
hidden: Subject<(undefined | CT)> = ...
Close the modal with a custom close value.
hide: (reason: CT) => void = () =​> {}
ignoreBackdropClick: boolean = true
isCurrent: () => boolean = () =​> false
The layer of the modal. The modal with the highest layer will be shown on top.
layer: number = 0
Allows messaging state to consumer w/o closing the dialog.
message: Subject<(undefined | CT)> = ...
Emits the modal element reference when it is shown.
shown: ReplaySubject<ElementRef<any>> = ...
Accessors
get content: T
Methods
(reason: CT) => void
When data.disableAutoHide is set, messages the reason , otherwise calls hide .
Parameters
reason?: CT
(input: string, value: unknown) => void
Set the input of a component shown in the modal.
Parameters
input: string
value: unknown
(AlertDialog | ConfirmationDialog | EditDiscardDialog | DeleteConfirmationDialog | never)
All possible action dialogs.
extends ActionDialogBase<AlertDialogResult>
An action dialog showing an alert
Properties
Label of the confirmation button.
confirmBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: "confirm") => Observable<"confirm"> from ActionDialogBase.delayDismiss
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "alert"
typeof AlertDialogResult[ keyof typeof AlertDialogResult]
extends ActionDialogBase<ConfirmationDialogResult>
An action dialog for a confirmation.
Properties
Label of the confirmation button.
confirmBtnName?: TranslatableString
Label of the decline button.
declineBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: ConfirmationDialogResult) => Observable<ConfirmationDialogResult> from ActionDialogBase.delayDismiss
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "confirmation"
extends ActionDialogBase<EditDiscardDialogResult>
An action dialog for an edit/discard prompt.
Properties
Label of the cancel button.
cancelBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: EditDiscardDialogResult) => Observable<EditDiscardDialogResult> from ActionDialogBase.delayDismiss
Whether to disable the save button.
disableSave?: boolean
Label of the discard button when disableSave is set.
disableSaveDiscardBtnName?: TranslatableString
Message when disableSave is set.
disableSaveMessage?: TranslatableString
Label of the discard button.
discardBtnName?: TranslatableString
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Label of the save button.
saveBtnName?: TranslatableString
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "edit-discard"
extends ActionDialogBase<DeleteConfirmationDialogResult>
An action dialog for a delete confirmation.
Properties
Label of the cancel button.
cancelBtnName?: TranslatableString
Callback for delaying dismiss with a progress indicator until the returned Observable: Observable emits.
delayDismiss?: (result: DeleteConfirmationDialogResult) => Observable<DeleteConfirmationDialogResult> from ActionDialogBase.delayDismiss
Label of the delete button.
deleteBtnName?: TranslatableString
The heading.
heading?: TranslatableString from ActionDialogBase.heading
Icon displayed in the heading.
icon?: string from ActionDialogBase.icon
The message.
message?: TranslatableString from ActionDialogBase.message
Parameters for the translate pipe.
translationParams?: Record<string, any> from ActionDialogBase.translationParams
type: "delete-confirm"
Properties
Optional environment Injector.
environmentInjector?: EnvironmentInjector
Optional element Injector.
injector?: Injector
Additional providers for the modal.
providers?: StaticProvider[]
{ Confirm: 'confirm', Decline: 'decline' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
{ Cancel: 'cancel', Delete: 'delete' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
{ Cancel: 'cancel', Discard: 'discard', Save: 'save' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
<T: Record<string, any>> extends ModalDependencyInjectionOptions
Properties
Whether to enable animation.
animated?: boolean
aria-labelled-by value.
ariaLabelledBy?: string
Additional CSS class.
class?: string
Optional environment Injector.
environmentInjector?: EnvironmentInjector from environmentInjector
When set to true, clicking the backdrop has no effect.
ignoreBackdropClick?: boolean
Assign all values to the target component using Object.assign(component, initialState) .
Deprecated: Use inputValues instead.
initialState?: Partial<T>
Optional element Injector.
injector?: Injector from injector
Use this to assign values to either @Input() or input() fields of the provided component. If a template is used, the values are available in the template context.
inputValues?: Record<string, unknown>
Handle Esc to close/message.
keyboard?: boolean
When set to true, backdrop click or Esc don't close the modal. Instead a message will be sent.
messageInsteadOfAutoHide?: boolean
Additional providers for the modal.
providers?: StaticProvider[] from providers
{ Confirm: 'confirm' } = ...
Variable
Deprecated: Will be removed in a future release. Use the string values directly.
Used in events emitted from SiLinkActionService
Properties
param: any
implements OnInit, OnDestroy
Default widget catalog implementation to show all available widgets that can be added to a dashboard. It consists of a list view, that lists all available widgets and after selection, a host in which the widget specific editor is loaded. Applications can either stay with the default catalog or implement their own by extending this class.
Constructor
() => {}
Properties
Emits when the catalog is closed , either by canceling or by adding or saving a widget configuration. On cancel undefined is emitted, otherwise the related widget configuration is emitted.
closed: OutputEmitterRef<(undefined | Omit<WidgetConfig, "id">)> = ...
dialogService: SiActionDialogService = ...
disableAddButton: Signal<boolean> = ...
disableNextButton: Signal<boolean> = ...
editorHost: Signal<ViewContainerRef> = ...
editorWizardState: WritableSignal<(undefined | WidgetInstanceEditorWizardState)> = ...
envInjector: EnvironmentInjector = ...
Array used to hold the search result on the widget catalog.
filteredWidgetCatalog: Widget[] = []
hasEditor: WritableSignal<boolean> = ...
injector: Injector = ...
Indicates if the current config is valid or not. If invalid, the add button is disabled.
invalidConfig: WritableSignal<boolean> = ...
labelAdd: TranslatableString = ...
labelCancel: TranslatableString = ...
labelDialogCancel: TranslatableString = ...
labelDialogDiscard: TranslatableString = ...
labelDialogHeading: TranslatableString = ...
labelDialogMessage: TranslatableString = ...
labelEmpty: TranslatableString = ...
labelNext: TranslatableString = ...
labelPrevious: TranslatableString = ...
Placeholder text for the search input field in the widget catalog.
searchPlaceholder: InputSignal<TranslatableString> = $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`
Holds the search term from the catalog to be visible when going back by pressing the previous button from the widget edit view.
searchTerm: string = ''
selected: WritableSignal<(undefined | Widget)> = ...
showAddButton: Signal<boolean> = ...
showNextButton: Signal<boolean> = ...
showPreviousButton: Signal<boolean> = ...
subscriptions: (OutputRefSubscription[] | Subscription[]) = []
View defines if the catalog widget list or the widget editor is visible.
view: WritableSignal<("list" | "editor" | "editor-only")> = 'list'
Property to provide the available widgets to the catalog. The flexible dashboard creates the catalog by Angular's createComponent() method and sets the available widgets to this attribute.
widgetCatalog: Widget[] = []
widgetConfig?: Omit<WidgetConfig, "id">
Marks the widget configuration as modified. Is set when widget editor instance emits configChange events. Triggers edit discard confirmation dialog when widget config is modified but not added to the dashboard.
widgetConfigModified: boolean = false
widgetInstanceEditor?: WidgetInstanceEditor
widgetInstanceEditorRef?: ComponentRef<WidgetInstanceEditor>
Methods
(statusChanges: Partial<WidgetConfigStatus>) => void
Parameters
statusChanges: Partial<WidgetConfigStatus>
(editor: (WidgetInstanceEditor | WidgetInstanceEditorWizard)) => editor is WidgetInstanceEditorWizard
Parameters
editor?: (WidgetInstanceEditor | WidgetInstanceEditorWizard)
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
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.
ngOnInit: () => void from OnInit.ngOnInit
onAddWidget: () => void
onCancel: () => void
onNext: () => void
onPrevious: () => void
(searchTerm: string) => void
Parameters
searchTerm?: string
(widget: Widget) => void
Parameters
widget?: Widget
setupCatalog: () => void
setupWidgetInstanceEditor: () => void
tearDownEditor: () => void
implements OnInit, OnDestroy
The Dialog component is utilized when editing a widget instance within a dashboard. It dynamically loads and creates the associated widget editor and incorporates it into its content. The dialog component is accountable for interacting with the dashboard and offers options for saving changes or terminating the editing process.
Constructor
() => {}
Properties
Emits the edited widget instance configuration if the user confirms by saving, or undefined if the user cancels the dialog.
closed: OutputEmitterRef<(undefined | WidgetConfig)> = ...
dialogService: SiActionDialogService = ...
disableNextButton: Signal<boolean> = ...
disablePreviousButton: Signal<boolean> = ...
editorHost: Signal<ViewContainerRef> = ...
Emits when the editor instantiation is completed.
editorSetupCompleted: OutputEmitterRef<void> = ...
editorWizardState: WritableSignal<(undefined | WidgetInstanceEditorWizardState)> = ...
envInjector: EnvironmentInjector = ...
injector: Injector = ...
Indicates if the current config is valid or not. If invalid, the save button will be disabled.
invalidConfig: WritableSignal<boolean> = ...
labelCancel: TranslatableString = ...
labelDialogCancel: TranslatableString = ...
labelDialogDiscard: TranslatableString = ...
labelDialogHeading: TranslatableString = ...
labelDialogMessage: TranslatableString = ...
labelDialogSave: TranslatableString = ...
labelNext: TranslatableString = ...
labelPrevious: TranslatableString = ...
labelSave: TranslatableString = ...
showNextButton: Signal<boolean> = ...
showPreviousButton: Signal<boolean> = ...
subscriptions: (OutputRefSubscription[] | Subscription[]) = []
Input for the widget definition. It is required to retrieve the component factory to instantiate the widget editor.
widget: InputSignal<Widget> = ...
Input for the widget instance configuration. It is used to populate the widget editor.
widgetConfig: ModelSignal<WidgetConfig> = ...
Marks the widget configuration as modified. Is set when widget editor instance emits configChange events. Triggers edit discard confirmation dialog when widget config is modified but not dialog is canceled.
widgetConfigModified: WritableSignal<boolean> = ...
widgetInstanceEditor?: WidgetInstanceEditor
Methods
(statusChanges: Partial<WidgetConfigStatus>) => void
Parameters
statusChanges: Partial<WidgetConfigStatus>
(editor: (WidgetInstanceEditor | WidgetInstanceEditorWizard)) => editor is WidgetInstanceEditorWizard
Parameters
editor?: (WidgetInstanceEditor | WidgetInstanceEditorWizard)
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
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.
ngOnInit: () => void from OnInit.ngOnInit
onCancel: () => void
onNext: () => void
onPrevious: () => void
onSave: () => void
tearDownEditor: () => void
implements OnChanges, OnDestroy, AfterViewInit
Constructor
() => {}
Properties
_isExpanded: boolean = false
cards: SiDashboardCardComponent[] = []
cdRef: ChangeDetectorRef = ...
dashboard: Signal<ElementRef<HTMLElement>> = ...
dashboardDimensions?: ElementDimensions
dashboardFrame: Signal<ElementRef<HTMLElement>> = ...
dashboardFrameDimensions?: ElementDimensions
dashboardFrameEndPadding: (null | number) = null
dashboardService: SiDashboardService = ...
document: Document = ...
Opt-in to enable expand interaction for all cards.
enableExpandInteractions: InputSignalWithTransform<boolean, unknown> = false
expandedPortalOutlet: Signal<CdkPortalOutlet> = ...
Heading for the dashboard page.
heading: InputSignal<(undefined | string)> = ...
Option to hide the menu bar.
hideMenubar: InputSignalWithTransform<boolean, unknown> = false
hideMenubarComputed: Signal<boolean> = ...
hideMenubarInternal: WritableSignal<boolean> = ...
resizeObserver: ResizeObserverService = ...
scrollbarHelper: ScrollbarHelper = ...
scroller: ViewportScroller = ...
scrollPosition: [ number, number ] = ...
Option to turn off the sticky behavior of the heading and menu bar.
sticky: InputSignalWithTransform<boolean, unknown> = true
unsubscribe: Subject<void> = ...
Accessors
Is true if a card is expanded.
get isExpanded: boolean = false
Methods
(card: SiDashboardCardComponent) => void
Expands the provided card to full size in the dashboard.
Parameters
The card to be expanded.
card: SiDashboardCardComponent
initCards: () => void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
Restores the expanded card to it's previous position.
restore: () => void
Restored the UI state of the dashboard. This method is only part of restoring a card and needs to be invoked after the card.restore() method. In general this is achieved by listening to card events.
restoreDashboard: () => void
(dashboardFrameDimensions: ElementDimensions, dashboardDimensions: ElementDimensions) => void
Parameters
dashboardFrameDimensions?: ElementDimensions
dashboardDimensions?: ElementDimensions
(cards: SiDashboardCardComponent[]) => void
Parameters
cards: SiDashboardCardComponent[]
(expand: boolean) => void
Parameters
expand: boolean
implements OnInit, OnChanges, OnDestroy
The grid component is the actual component on which the widget instances are placed and visualized. You can think of a headless dashboard, without a title, toolbar or edit buttons.
Constructor
() => {}
Properties
An optional, but recommended dashboard id that is used in persistence and passed to the widget store for saving and loading data.
dashboardId: InputSignal<(undefined | string)> = ...
Sets the grid into editable mode, in which the widget instances can be moved, resized, removed or new ones added.
editable: ModelSignal<boolean> = false
This is the internal owner of the current editable state and is used to track if editable or not. Not editable can be changed by either calling the edit() api method or by setting the editable input. When setting the input, the ngOnChanges(...) hook is used to call the edit() method. Similar, to get from editable to not editable, cancel() or save() is used and can be triggered from ngOnChanges(...) .
editableInternal: boolean = false
When the user clicks edit on a widget instance, an editor need to appear and the widget editor component need to be loaded. When the grid is used standalone, it takes care and opens a modal dialog and loads the configured widget editor component. When the grid is used in a container like the flexible dashboard, the container manages where the widget instance editor is displayed. In this case this options prevents the grid from showing the editor in the dialog, and emits on widgetInstanceEdit on clicking the widget edit action.
emitWidgetInstanceEditEvents: InputSignal<boolean> = false
Configuration options for a grid instance. Default is the optional value from the SI_DASHBOARD_CONFIGURATION .
gridConfig: InputSignal<(undefined | GridConfig)> = inject(SI_DASHBOARD_CONFIGURATION)?.grid
gridService: SiGridService = ...
gridStackWrapper: Signal<SiGridstackWrapperComponent> = viewChild.required(SiGridstackWrapperComponent)
Option to turn off the loading spinner on save and load operations.
hideProgressIndicator: InputSignal<boolean> = false
initialLoad: boolean = true
Indication for load and save operations.
isLoading: BehaviorSubject<boolean> = ...
Emits the modification state of the grid. It is unmodified when the visible state is equal to the loaded state from the widget storage. When the user modifies the dashboard by e.g. while moving the widgets, the dashboard is marked as modified and emits true and when the user persists the change by saving, or reverts the state by canceling, the state is unmodified again and emits false .
isModified: OutputEmitterRef<boolean> = ...
Service used to indicate load and save indication.
Deprecated: Use isLoading instead.
loadingService: SiLoadingService = inject(SiLoadingService)
All widget instance configurations that are removed from the grid in edit mode. These instances are persistently removed on save or re-added again on cancel.
markedForRemoval: WidgetConfig[] = []
modalService: SiModalService = ...
Modified state that is emitted in the isModified output. Should only be changed using the setModified method.
modified: boolean = false
All widget instance configs that are on the grid by loading from the widget storage. Thus, these widget are persisted.
persistedWidgetInstances: WidgetConfig[] = []
storeSubscription?: Subscription
Widget instance configs that are added to the grid in edit mode, but not persisted yet, as the user did not confirm the modification by save.
transientWidgetInstances: WidgetConfig[] = []
All widget configuration objects of the visible widget instances.
visibleWidgetInstances$: BehaviorSubject<WidgetConfig[]> = ...
Provides the available widgets to the grid. When loading the widget configurations from the storage, we need to have the widget definition available to be able to create the widget instances on the grid.
widgetCatalog: InputSignal<Widget[]> = []
Emits to notify about edit events of widget instances. Only emits if emitWidgetInstanceEditEvents is set to true .
widgetInstanceEdit: OutputEmitterRef<WidgetConfig> = ...
Option to configure a custom widget instance editor dialog component. The component provides the editor hosting and the buttons to save and cancel.
widgetInstanceEditorDialogComponent: InputSignal<(undefined | Type<SiWidgetInstanceEditorDialogComponent>)> = ...
widgetStorage: SiWidgetStorage = ...
Accessors
get showEmptyState: boolean
Methods
(widgetInstanceConfig: Omit<WidgetConfig, "id">) => void
Adds a new widget instance configuration to the dashboard grid. It is not persisted yet and is added to the transient widget instances.
Parameters
The new widget configuration.
widgetInstanceConfig: Omit<WidgetConfig, "id">
Cancel current changes and restore last saved state.
cancel: () => void
Set dashboard grid in editable mode to modify widget instances.
edit: () => void
(widgetInstanceConfig: WidgetConfig) => void
Opens the provided widget configuration in the related editor or emits on widgetInstanceEdit , if emitWidgetInstanceEditEvents is true.
Parameters
The config of the widget instance to edit.
widgetInstanceConfig: WidgetConfig
(event: GridWrapperEvent) => void
Parameters
event: GridWrapperEvent
loadAndSubscribeWidgets: () => void
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
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.
ngOnInit: () => void from OnInit.ngOnInit
(widgetInstanceId: string) => void
Removes a widget instance from the visible widgets and puts it in the markedForRemoval array.
Parameters
The id of the widget instance to be removed.
widgetInstanceId: string
Persists the current widget instances to the widget storage and changes the editable and isModified modes.
save: () => void
(modified: boolean) => void
Parameters
modified: boolean
(editedWidgetConfig: WidgetConfig) => void
Updates the visible widgets with an updated configuration. Will update the user interface and emit on isModified .
Parameters
The config of the widget instance that was updated.
editedWidgetConfig: WidgetConfig
(widgetConfigs: WidgetConfig[]) => WidgetConfig[]
Parameters
widgetConfigs: WidgetConfig[]
The service provides convenient methods to show common modal dialogs. All return an observable, which emit the dialog results. After emitting, the observables complete. Therefore, clients do not need to unsubscribe.
Constructor
() => {}
Properties
modalService: SiModalService = ...
Methods
<(T: ActionDialog)> (dialog: T, diOptions: ModalDependencyInjectionOptions) => Observable<ActionDialogReturnType<T>>
Shows an action dialog
Returns Observable for the result of the dialog. Need to subscribe() to show the dialog
Parameters
The dialog configuration
dialog: T
Optional DI configuration.
diOptions?: ModalDependencyInjectionOptions
(message: string, heading: string, confirmBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<"confirm">
Show an alert dialog.
Deprecated: use showActionDialog({ type: 'alert', ... }) instead
Parameters
message: string
heading?: string
confirmBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
(message: string, heading: string, confirmBtnName: string, declineBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<ConfirmationDialogResult>
Show a confirmation dialog.
Deprecated: use showActionDialog({ type: 'confirmation', ... }) instead
Parameters
message: string
heading?: string
confirmBtnName?: string
declineBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
(message: string, heading: string, deleteBtnName: string, cancelBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<DeleteConfirmationDialogResult>
Show a dialog confirming a deletion.
Deprecated: use showActionDialog({ type: 'delete-confirm', ... }) instead
Parameters
message?: string
heading?: string
deleteBtnName?: string
cancelBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
(disableSave: boolean, message: string, heading: string, saveBtnName: string, discardBtnName: string, cancelBtnName: string, disableSaveMessage: string, disableSaveDiscardBtnName: string, translationParams: { [ key: string ]: any } }, icon: string, diOptions: ModalDependencyInjectionOptions) => Observable<EditDiscardDialogResult>
Show an edit dialog with the option to discard.
Deprecated: use showActionDialog({ type: 'edit-discard', ... }) instead
Parameters
disableSave?: boolean
message?: string
heading?: string
saveBtnName?: string
discardBtnName?: string
cancelBtnName?: string
disableSaveMessage?: string
disableSaveDiscardBtnName?: string
translationParams?: { [ key: string ]: any } }
icon?: string
diOptions?: ModalDependencyInjectionOptions
extends SiCardComponent implements OnDestroy
Constructor
() => {}
Properties
Optional setting of html title attribute for the content action bar. Helpful for a11y when only one action is configured in expand mode.
actionBarTitle: InputSignal<TranslatableString> from actionBarTitle = ''
actionBarTitleComputed: Signal<TranslatableString> = ...
The view type of the content action bar of the card. Default is collapsible for dashboards. However, in some cases you might need to change to expanded or mobile .
actionBarViewType: InputSignal<ViewType> from actionBarViewType = 'collapsible'
actionBarViewTypeComputed: Signal<ViewType> = ...
A param that will be passed to the action in the primary/secondary actions. This allows to re-use the same primary/secondary action arrays across rows in a table.
actionParam: InputSignal<any> from actionParam = ...
In case the card uses an image and horizontal direction is used we set flex row direction.
classCardHorizontal: Signal<boolean> from classCardHorizontal = ...
dashboardService: (null | SiDashboardService) = ...
Returns true when primary or secondary actions are set.
displayContentActionBar: Signal<boolean> = ...
element: ElementRef<any> = ...
Option to enable and show the UI controls for card expand functionality. Expand and restore action items will be added to the content action bar. The expand resizing has to be implemented by the container of the card.
enableExpandInteraction: InputSignalWithTransform<boolean, unknown> = false
enableExpandInteractionComputed: Signal<boolean> = ...
enableExpandInteractionInternal: WritableSignal<boolean> = ...
expandActionItem: Signal<ContentActionBarMainItem> = ...
Emitter for size state change
expandChange: OutputEmitterRef<boolean> = ...
expandRestoreIconTooltip: Signal<TranslatableString> = ...
Description of expand button & action.
expandText: InputSignal<TranslatableString> = $localize`:@@SI_DASHBOARD.EXPAND:Expand`
hasContentBarActions: Signal<boolean> = ...
Card header text.
heading: InputSignal<(undefined | TranslatableString)> from heading = ...
hide: boolean = false
Alt text for a provided image.
imgAlt: InputSignal<(undefined | string)> from imgAlt = ...
Defines if an image is placed on top or start (left) of the card.
imgDir: InputSignal<(undefined | "horizontal" | "vertical")> from imgDir = 'vertical'
Sets the image object-fit CSS property, Sets the image object-fit CSS property.
imgObjectFit: InputSignal<(undefined | "fill" | "contain" | "cover" | "none" | "scale-down")> from imgObjectFit = 'scale-down'
Sets the image object-position CSS property.
imgObjectPosition: InputSignal<(undefined | string)> from imgObjectPosition = ...
Image source for the card.
imgSrc: InputSignal<(undefined | string)> from imgSrc = ...
Whether the card is currently expanded.
isExpanded: WritableSignal<boolean> = false
Input list of primary action items. Supports up to 4 actions and omits additional ones.
primaryActions: InputSignal<(MenuItem | ContentActionBarMainItem)[]> from primaryActions = []
primaryActionsComputed: Signal<(MenuItem | ContentActionBarMainItem)[]> = ...
restoreActionItem: Signal<ContentActionBarMainItem> = ...
Description of cancel button & action.
restoreText: InputSignal<TranslatableString> = $localize`:@@SI_DASHBOARD.RESTORE:Restore`
Input list of secondary action items.
secondaryActions: InputSignal<(MenuItem | MenuItem)[]> from secondaryActions = []
Used in combination with si-dashboard to show filters when a card is expanded or not.
showMenubar: InputSignalWithTransform<boolean, unknown> = true
Methods
Expand the dashboard card.
expand: () => void
(expand: boolean) => void
Parameters
expand: boolean
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
Restore the dashboard card to the original, non-expanded state.
restore: () => void
Constructor
() => {}
Properties
cards: BehaviorSubject<SiDashboardCardComponent[]> = ...
Subject containing the current dashboard cards as a list.
cards$: Observable<SiDashboardCardComponent[]> = this.cards.asObservable()
Methods
(card: SiDashboardCardComponent) => void
Registers a new dashboard card.
Parameters
card: SiDashboardCardComponent
(card: SiDashboardCardComponent) => void
Removes a registered dashboard card.
Parameters
card: SiDashboardCardComponent
A service wrapping ResizeObserver . This is a service for those reasons: - only one ResizeObserver should be used for performance reason. - For Angular change detection to work, explicit ngZone calls are necessary - Observable stream
Constructor
() => {}
Properties
listeners: Map<Element, Listener> = ...
resizeObserver?: ResizeObserver
timerQueue: Map<number, QueueEntry[]> = ...
zone: NgZone = ...
Methods
check size on all observed elements. Only use in testing!
_checkAll: () => void
(element: Element, entry: ResizeSubscriber, force: boolean = false) => void
Parameters
element: Element
entry: ResizeSubscriber
force: boolean = false
(element: Element) => void
Parameters
element: Element
(element: Element, entry: ResizeSubscriber) => void
Parameters
element: Element
entry: ResizeSubscriber
(element: Element, throttle: number, emitInitial: boolean, emitImmediate: boolean) => Observable<ElementDimensions>
Observe the size of an element. Returns an observable with the changes.
Parameters
The element to observe
element: Element
Throttle time in ms. Will emit this time after the resize
throttle: number
Emit the initial size after subscribe?
emitInitial?: boolean
Emit an event immediately after the size changes. Useful e.g. for visibility checks.
emitImmediate?: boolean
(queue: QueueEntry[]) => void
Parameters
queue: QueueEntry[]
(timeout: number, element: Element, subscriber: ResizeSubscriber, unblock: boolean, force: boolean = false) => void
Parameters
timeout: number
element: Element
subscriber: ResizeSubscriber
unblock: boolean
force: boolean = false
(entry: Listener, subscriber: ResizeSubscriber, emitInitial: boolean) => void
Parameters
entry: Listener
subscriber: ResizeSubscriber
emitInitial?: boolean
(entry: Listener, subscriber: ResizeSubscriber) => void
Parameters
entry: Listener
subscriber: ResizeSubscriber
(entry: ResizeSubscriber) => void
Parameters
entry: ResizeSubscriber
Gets the width of the scrollbar. Nesc for windows http://stackoverflow.com/a/13382873/888165
Constructor
() => {}
Properties
document: Document = ...
The width of the scrollbar.
width: number = this.getWidth()
Methods
getWidth: () => number
Constructor
() => {}
Properties
Counts the number of loads active, is 0 when all loading is finished (or hasn't started).
counter: BehaviorSubject<number> = ...
Methods
Start the loading.
startLoad: () => void
Stop the loading.
stopLoad: () => void
Constructor
() => {}
Properties
appRef: ApplicationRef = ...
environmentInjector: EnvironmentInjector = ...
injector: Injector = ...
modalsCount: number = 0
overlay: Overlay = ...
Methods
<T, CT> (modalRef: ModalRefImpl<T, CT>) => ComponentRef<SiModalComponent>
Parameters
modalRef: ModalRefImpl<T, CT>
buildInjector: () => Injector
(modalRef: ModalRef<unknown, any>) => void
Parameters
modalRef: ModalRef<unknown, any>
<T, CT> (injector: Injector, modalRef: ModalRefImpl<T, CT>) => Node[][]
Parameters
injector: Injector
modalRef: ModalRefImpl<T, CT>
<T, CT: any> (content: (TemplateRef<any> | (args: any[]) => {}), config: ModalOptions<T>, closeValue: CT) => ModalRef<T, CT>
Shows a modal with the given content and configuration.
Returns A reference to the modal.
Parameters
Content to be displayed in the modal can be a template reference or a component.
content: (TemplateRef<any> | (args: any[]) => {})
Configuration for the modal.
config: ModalOptions<T>
Default closing value which can be overridden by calling modalRef.hide(value) .
closeValue?: CT
Constructor
() => {}
Properties
Optional setting of html title attribute for the content action bar. Helpful for a11y when only one action is configured in expand mode.
actionBarTitle: InputSignal<TranslatableString> = ''
The view type of the content action bar of the card. Default is collapsible for dashboards. However, in some cases you might need to change to expanded or mobile .
actionBarViewType: InputSignal<ViewType> = 'collapsible'
A param that will be passed to the action in the primary/secondary actions. This allows to re-use the same primary/secondary action arrays across rows in a table.
actionParam: InputSignal<any> = ...
In case the card uses an image and horizontal direction is used we set flex row direction.
classCardHorizontal: Signal<boolean> = ...
Returns true when primary or secondary actions are set.
displayContentActionBar: Signal<boolean> = ...
Card header text.
heading: InputSignal<(undefined | TranslatableString)> = ...
Alt text for a provided image.
imgAlt: InputSignal<(undefined | string)> = ...
Defines if an image is placed on top or start (left) of the card.
imgDir: InputSignal<(undefined | "horizontal" | "vertical")> = 'vertical'
Sets the image object-fit CSS property, Sets the image object-fit CSS property.
imgObjectFit: InputSignal<(undefined | "fill" | "contain" | "cover" | "none" | "scale-down")> = 'scale-down'
Sets the image object-position CSS property.
imgObjectPosition: InputSignal<(undefined | string)> = ...
Image source for the card.
imgSrc: InputSignal<(undefined | string)> = ...
Input list of primary action items. Supports up to 4 actions and omits additional ones.
primaryActions: InputSignal<(MenuItem | ContentActionBarMainItem)[]> = []
Input list of secondary action items.
secondaryActions: InputSignal<(MenuItem | MenuItem)[]> = []
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.