@spike-rabbit/dashboards-ng 49.0.0-next.1

package/index.d.ts

@@ -0,0 +1,1071 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, InputSignal, OutputEmitterRef, EventEmitter, TemplateRef, OnInit, OnChanges, OnDestroy, ViewContainerRef, SimpleChanges, Type, Injector, EnvironmentInjector, ComponentRef, Provider, ModuleWithProviders } from '@angular/core';
+import { AccentLineType, MenuItem } from '@spike-rabbit/element-ng/common';
+import { SiDashboardComponent } from '@spike-rabbit/element-ng/dashboard';
+import { Subject, BehaviorSubject, Observable } from 'rxjs';
+import { GridStackOptions, GridStackNode, GridStack, GridItemHTMLElement } from 'gridstack';
+import { NavigationExtras } from '@angular/router';
+import { TranslatableString } from '@spike-rabbit/element-translate-ng/translate';
+import { SiLoadingService } from '@spike-rabbit/element-ng/loading-spinner';
+import { ViewType, ContentActionBarMainItem } from '@spike-rabbit/element-ng/content-action-bar';
+import { MenuItem as MenuItem$1 } from '@spike-rabbit/element-ng/menu';
+export * from '@spike-rabbit/dashboards-ng/translate';
+
+/**
+ * Configuration object for the si-grid component, including
+ * the options of gridstack.
+ */
+interface GridConfig {
+    /**
+     * The configuration options of gridstack.
+     */
+    gridStackOptions?: GridStackOptions;
+}
+/**
+ * The default gridstack configuration options.
+ */
+declare const DEFAULT_GRIDSTACK_OPTIONS: GridStackOptions;
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Dashboard configuration object. Inject globally using the {@link SI_DASHBOARD_CONFIGURATION}
+ * or configure individual dashboard instances.
+ */
+type Config = {
+    grid?: GridConfig;
+};
+/**
+ * Injection token to configure dashboards. Use `{ provide: SI_DASHBOARD_CONFIGURATION, useValue: config }`
+ * in your app configuration.
+ */
+declare const SI_DASHBOARD_CONFIGURATION: InjectionToken<Config>;
+/**
+ * @deprecated Use SI_DASHBOARD_CONFIGURATION instead.
+ */
+declare const CONFIG_TOKEN: InjectionToken<Config>;
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Widgets describe the entries within the widget catalog and holds all
+ * default configuration and factory functionality to instantiate a widget
+ * instance, represented as {@link WidgetConfig} objects.
+ */
+interface Widget {
+    /** A unique id of the widget. */
+    id: string;
+    /** An optional version string. */
+    version?: string;
+    /** The name of the widget that is presented in the widget catalog. */
+    name: string;
+    /** 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;
+    /** 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'>;
+    /** Optional default payload object that is copied into every widget instance {@link WidgetConfig}. */
+    payload?: any;
+}
+/** Factory type that is either a {@link WidgetComponentTypeFactory}, {@link FederatedModule} or {@link WebComponent}. */
+type WidgetComponentFactory = WidgetComponentTypeFactory | FederatedModule | WebComponent;
+type CommonFactoryFields = {
+    componentName: string;
+    editorComponentName?: string;
+    /**
+     * CSS class that is added to the modal dialog when component editor dialog is shown.
+     * Provides the option to change the size if the dialog.
+     */
+    editorModalClass?: string;
+};
+type WidgetComponentTypeFactory = CommonFactoryFields & {
+    factoryType?: 'default';
+    moduleName: string;
+    moduleLoader: (name: string) => Promise<any>;
+    [index: string]: any;
+};
+type FederatedModule = CommonFactoryFields & LoadRemoteModuleOptions & {
+    factoryType: 'module-federation';
+    [index: string]: any;
+};
+type WebComponent = CommonFactoryFields & {
+    factoryType: 'web-component';
+    url: string;
+    [index: string]: any;
+};
+/**
+ * ObjectFit configuration options for a widget image.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit}
+ */
+type ObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+/**
+ * Image is used to configure an image to be displayed on a widget instance.
+ */
+interface WidgetImage {
+    /**
+     * The image URL (See [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src)).
+     */
+    src: string;
+    /**
+     * The HTMLImageElement property [alt](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes)
+     * provides fallback (alternate) text to display when the image specified by the <img> 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](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
+     */
+    objectFit?: ObjectFit;
+    /**
+     * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
+     */
+    objectPosition?: string;
+}
+/**
+ * A {@link 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.
+ */
+interface WidgetConfig {
+    /** A unique id of a widget instance */
+    id: string;
+    /**
+     * The id of the widget descriptor that was used to instantiate
+     * the `WidgetConfig` and the widget instance component.
+     */
+    widgetId: string;
+    /**
+     * Optionally, the version widget description that was used to create the widget config.
+     */
+    version?: string;
+    /**
+     * Width of the grid item, where number represents how many columns it spans (default?: 1)
+     */
+    width?: number;
+    /**
+     * Height of the grid item, where number represents how many rows it takes. (default?: 1)
+     */
+    height?: 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;
+    /**
+     * minimum width allowed during resize/creation (default?: undefined = un-constrained)
+     */
+    minWidth?: number;
+    /**
+     * maximum height allowed during resize/creation (default?: undefined = un-constrained)
+     */
+    minHeight?: number;
+    /**
+     * grid item header text.
+     */
+    heading?: string;
+    /** Defines whether the widget instance component can be expanded and enlarged over the dashboard. */
+    expandable?: boolean;
+    /** A widget specific payload object. Placeholder to pass in additional configuration. */
+    payload?: any;
+    actionBarViewType?: ViewType;
+    isNotRemovable?: boolean;
+    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;
+    /**
+     * Optional configuration for an image to be displayed on the widget instance.
+     */
+    image?: WidgetImage;
+    /**
+     * Optional type of the accent line.
+     */
+    accentLine?: AccentLineType;
+}
+/**
+ * Object is used to inform the editor hosting component about configuration
+ * changes to configure (e.g. enable/disable) the control buttons accordingly.
+ */
+interface WidgetConfigStatus {
+    /**
+     * Indicates that the configuration was changed. If true, canceling
+     * the editor will first show a dialog to confirm the discard.
+     */
+    modified: boolean;
+    /**
+     * If true, save or add button will be disabled.
+     */
+    invalid: 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.
+ */
+interface WidgetInstanceEditor {
+    /**
+     * 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>>;
+}
+/**
+ * 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.
+ */
+interface WidgetInstanceEditorWizardState {
+    hasNext: boolean;
+    hasPrevious: boolean;
+    disableNext?: boolean;
+}
+/**
+ * A widget instance editor component that shall support a multi-page
+ * widget configuration can implement this interface. The wizard-like
+ * page state {@link 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.
+ */
+interface WidgetInstanceEditorWizard extends WidgetInstanceEditor {
+    /**
+     * 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>;
+    /**
+     *  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;
+}
+/**
+ * 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.
+ */
+type WidgetConfigEvent = {
+    /** Primary actions that are visible in normal view mode. */
+    primaryActions?: (MenuItem | ContentActionBarMainItem)[];
+    /** Secondary (collapsed) actions that are visible in normal view mode. */
+    secondaryActions?: (MenuItem | MenuItem$1)[];
+    /** Primary actions that are visible in editable dashboard mode. */
+    primaryEditActions?: (MenuItem | ContentActionBarMainItem)[];
+    /** Secondary (collapsed) actions that are visible in editable dashboard mode. */
+    secondaryEditActions?: (MenuItem | MenuItem$1)[];
+};
+/**
+ * Every widget component implementation needs to implement the {@link WidgetInstance}
+ * interface. It provides the interface between the component implementation and the
+ * dashboard.
+ */
+interface WidgetInstance {
+    /** The WidgetConfig is set after instantiating the widget component. */
+    config: WidgetConfig | InputSignal<WidgetConfig>;
+    /**
+     * The dashboard will set the editable property to `true`, if the dashboard
+     * enters the editable mode. The attribute is used to inform every
+     * widget instance.
+     */
+    editable?: boolean;
+    /** Primary actions that are visible in normal view mode. */
+    primaryActions?: (MenuItem | ContentActionBarMainItem)[];
+    /** Secondary (collapsed) actions that are visible in normal view mode. */
+    secondaryActions?: (MenuItem | MenuItem$1)[];
+    /** Primary actions that are visible in editable dashboard mode. */
+    primaryEditActions?: (MenuItem | ContentActionBarMainItem)[];
+    /** Secondary (collapsed) actions that are visible in editable dashboard mode. */
+    secondaryEditActions?: (MenuItem | MenuItem$1)[];
+    /** {@link WidgetInstance} component implementations should emit change
+     * events after changing the instance configuration like the actions.
+     */
+    configChange?: EventEmitter<WidgetConfigEvent>;
+    /**
+     * An optional footer template that is added into the dashboard card's footer.
+     */
+    footer?: TemplateRef<unknown>;
+}
+/**
+ * Type to define the position of a widget instance, consisting of
+ * the instance id and x, y, width and height.
+ */
+type WidgetPositionConfig = Pick<WidgetConfig, 'id' | 'x' | 'y' | 'width' | 'height'>;
+/**
+ * Function creates a new {@link WidgetConfig} without id from a {@link Widget} and
+ * copies all default values into the {@link WidgetConfig}.
+ * @param widget - The source to create the new {@link WidgetConfig} from.
+ * @returns The created {@link WidgetConfig} without id.
+ */
+declare const createWidgetConfig: (widget: Widget) => Omit<WidgetConfig, "id">;
+/**
+ * The Remote Module definition is based on `@angular-architects`.
+ * We take it over into this file to prevent adding a hard dependency.
+ */
+type LoadRemoteModuleOptions = LoadRemoteModuleScriptOptions | LoadRemoteModuleEsmOptions | LoadRemoteModuleManifestOptions;
+type LoadRemoteModuleScriptOptions = {
+    type?: 'script';
+    remoteEntry?: string;
+    remoteName: string;
+    exposedModule: string;
+};
+type LoadRemoteModuleEsmOptions = {
+    type: 'module';
+    remoteEntry: string;
+    exposedModule: string;
+};
+type LoadRemoteModuleManifestOptions = {
+    type: 'manifest';
+    remoteName: string;
+    exposedModule: string;
+};
+
+interface GridWrapperEvent {
+    event: Event;
+    items?: GridStackNode[];
+    grid: GridStack;
+    el?: GridItemHTMLElement;
+}
+declare class SiGridstackWrapperComponent implements OnInit, OnChanges, OnDestroy {
+    /**
+     * Grid items to render inside the gridstack
+     *
+     * @defaultValue []
+     */
+    readonly widgetConfigs: _angular_core.InputSignal<WidgetConfig[]>;
+    /**
+     * Whenever gridstack allows to drag, resize or delete the grid item
+     *
+     * @defaultValue false
+     */
+    readonly editable: _angular_core.InputSignal<boolean>;
+    /**
+     * Module configuration
+     */
+    readonly gridConfig: _angular_core.InputSignal<GridConfig | undefined>;
+    /**
+     * Emits dashboard grid events.
+     */
+    readonly gridEvent: _angular_core.OutputEmitterRef<GridWrapperEvent>;
+    /**
+     * Emits the id of a widget instance that shall be removed.
+     */
+    readonly widgetInstanceRemove: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Emits the id of a widget instance that shall be edited.
+     */
+    readonly widgetInstanceEdit: _angular_core.OutputEmitterRef<WidgetConfig>;
+    readonly gridstackContainer: _angular_core.Signal<ViewContainerRef | undefined>;
+    private grid;
+    private markedForRender;
+    private gridItems;
+    private readonly itemIdAttr;
+    private widgetIdSubscriptionMap;
+    private ngZone;
+    private elementRef;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    mount(items: WidgetConfig[]): void;
+    unmount(items: WidgetConfig[]): void;
+    getLayout(): WidgetPositionConfig[];
+    private updateLayout;
+    private addToView;
+    private removeFromView;
+    /**
+     * GridItemComponents are created dynamically, change detection won't trigger as there is no \@Input binding.
+     * We have to update instance and run ChangeDetectionRef manually.
+     */
+    private updateViewComponents;
+    private hookEvents;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiGridstackWrapperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiGridstackWrapperComponent, "si-gridstack-wrapper", never, { "widgetConfigs": { "alias": "widgetConfigs"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; }, { "gridEvent": "gridEvent"; "widgetInstanceRemove": "widgetInstanceRemove"; "widgetInstanceEdit": "widgetInstanceEdit"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class SiWidgetInstanceEditorDialogComponent implements OnInit, OnDestroy {
+    /**
+     * Input for the widget instance configuration. It is used to populate the
+     * widget editor.
+     */
+    readonly widgetConfig: _angular_core.ModelSignal<WidgetConfig>;
+    /**
+     * Input for the widget definition. It is required to retrieve the component
+     * factory to instantiate the widget editor.
+     */
+    readonly widget: _angular_core.InputSignal<Widget>;
+    /**
+     * Emits the edited widget instance configuration if the user confirms by
+     * saving, or `undefined` if the user cancels the dialog.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<WidgetConfig | undefined>;
+    /**
+     * Emits when the editor instantiation is completed.
+     */
+    readonly editorSetupCompleted: _angular_core.OutputEmitterRef<void>;
+    protected readonly editorHost: _angular_core.Signal<ViewContainerRef>;
+    /** Indicates if the current config is valid or not. If invalid, the save button will be disabled. */
+    protected readonly invalidConfig: _angular_core.WritableSignal<boolean>;
+    protected readonly showNextButton: _angular_core.Signal<boolean>;
+    protected readonly disableNextButton: _angular_core.Signal<boolean>;
+    protected readonly showPreviousButton: _angular_core.Signal<boolean>;
+    protected readonly disablePreviousButton: _angular_core.Signal<boolean>;
+    protected labelSave: string;
+    protected labelCancel: string;
+    protected labelPrevious: string;
+    protected labelNext: string;
+    protected labelDialogMessage: string;
+    protected labelDialogHeading: string;
+    protected labelDialogSave: string;
+    protected labelDialogDiscard: string;
+    protected labelDialogCancel: string;
+    /**
+     * 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.
+     * */
+    private readonly widgetConfigModified;
+    private widgetInstanceEditor?;
+    private readonly editorWizardState;
+    private subscriptions;
+    private injector;
+    private envInjector;
+    private dialogService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected onCancel(): void;
+    protected onNext(): void;
+    protected onPrevious(): void;
+    protected onSave(): void;
+    private tearDownEditor;
+    private isEditorWizdard;
+    private handleStatusChanges;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiWidgetInstanceEditorDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiWidgetInstanceEditorDialogComponent, "si-widget-instance-editor-dialog", never, { "widgetConfig": { "alias": "widgetConfig"; "required": true; "isSignal": true; }; "widget": { "alias": "widget"; "required": true; "isSignal": true; }; }, { "widgetConfig": "widgetConfigChange"; "closed": "closed"; "editorSetupCompleted": "editorSetupCompleted"; }, never, never, true, never>;
+}
+
+declare const NEW_WIDGET_PREFIX = "new-widget-";
+/**
+ * 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.
+ */
+declare class SiGridComponent implements OnInit, OnChanges, OnDestroy {
+    private storeSubscription?;
+    private gridService;
+    private modalService;
+    private widgetStorage;
+    /**
+     * Configuration options for a grid instance. Default is the optional
+     * value from the {@link SI_DASHBOARD_CONFIGURATION}.
+     *
+     * @defaultValue inject(SI_DASHBOARD_CONFIGURATION)?.grid
+     */
+    readonly gridConfig: _angular_core.InputSignal<GridConfig | undefined>;
+    /**
+     * Sets the grid into editable mode, in which the widget instances can be moved,
+     * resized, removed or new ones added.
+     *
+     * @defaultValue false
+     */
+    readonly editable: _angular_core.ModelSignal<boolean>;
+    /**
+     * 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(...)`.
+     */
+    private editableInternal;
+    /**
+     * An optional, but recommended dashboard id that is used in persistence and passed
+     * to the widget store for saving and loading data.
+     */
+    readonly dashboardId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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.
+     *
+     * @defaultValue [] */
+    readonly widgetCatalog: _angular_core.InputSignal<Widget[]>;
+    /**
+     * 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.
+     *
+     * @defaultValue false */
+    readonly emitWidgetInstanceEditEvents: _angular_core.InputSignal<boolean>;
+    /**
+     * Option to turn off the loading spinner on save and load operations.
+     *
+     * @defaultValue false
+     */
+    readonly hideProgressIndicator: _angular_core.InputSignal<boolean>;
+    /**
+     * Option to configure a custom widget instance editor dialog component. The component provides the
+     * editor hosting and the buttons to save and cancel.
+     */
+    readonly widgetInstanceEditorDialogComponent: _angular_core.InputSignal<Type<SiWidgetInstanceEditorDialogComponent> | undefined>;
+    /**
+     * 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`.
+     */
+    readonly isModified: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Modified state that is emitted in the `isModified` output. Should only be
+     changed using the {@link setModified} method.
+     */
+    private modified;
+    /**
+     * Emits to notify about edit events of widget instances. Only emits
+     * if `emitWidgetInstanceEditEvents` is set to `true`.
+     */
+    readonly widgetInstanceEdit: _angular_core.OutputEmitterRef<WidgetConfig>;
+    /**
+     * All widget configuration objects of the visible widget instances.
+     *
+     * @internal
+     */
+    readonly visibleWidgetInstances$: BehaviorSubject<WidgetConfig[]>;
+    /**
+     * All widget instance configs that are on the grid by loading from the widget
+     * storage. Thus, these widget are persisted.
+     *
+     * @defaultValue []
+     * @internal
+     */
+    persistedWidgetInstances: WidgetConfig[];
+    /**
+     * 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.
+     *
+     * @defaultValue []
+     * @internal
+     */
+    transientWidgetInstances: WidgetConfig[];
+    /**
+     * 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.
+     *
+     * @defaultValue []
+     * @internal
+     */
+    markedForRemoval: WidgetConfig[];
+    /** @defaultValue viewChild.required(SiGridstackWrapperComponent) */
+    readonly gridStackWrapper: _angular_core.Signal<SiGridstackWrapperComponent>;
+    /**
+     * Service used to indicate load and save indication.
+     * @deprecated Use `isLoading` instead.
+     *
+     * @defaultValue inject(SiLoadingService)
+     */
+    loadingService: SiLoadingService;
+    /**
+     * Indication for load and save operations.
+     */
+    readonly isLoading: BehaviorSubject<boolean>;
+    protected initialLoad: boolean;
+    protected get showEmptyState(): boolean;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set dashboard grid in editable mode to modify widget instances.
+     */
+    edit(): void;
+    /**
+     * Persists the current widget instances to the widget storage and
+     * changes the editable and isModified modes.
+     */
+    save(): void;
+    /**
+     * Cancel current changes and restore last saved state.
+     */
+    cancel(): void;
+    /**
+     * Adds a new widget instance configuration to the dashboard grid. It is not
+     * persisted yet and is added to the transient widget instances.
+     *
+     * @param widgetInstanceConfig - The new widget configuration.
+     */
+    addWidgetInstance(widgetInstanceConfig: Omit<WidgetConfig, 'id'>): void;
+    /**
+     * Removes a widget instance from the visible widgets and puts it in the
+     * {@link markedForRemoval} array.
+     *
+     * @param widgetInstanceId - The id of the widget instance to be removed.
+     */
+    removeWidgetInstance(widgetInstanceId: string): void;
+    /**
+     * Opens the provided widget configuration in the related editor or
+     * emits on {@link widgetInstanceEdit}, if {@link emitWidgetInstanceEditEvents}
+     * is true.
+     *
+     * @param widgetInstanceConfig - The config of the widget instance to edit.
+     */
+    editWidgetInstance(widgetInstanceConfig: WidgetConfig): void;
+    /**
+     * Updates the visible widgets with an updated configuration. Will update the
+     * user interface and emit on {@link isModified}.
+     *
+     * @param editedWidgetConfig - The config of the widget instance that was updated.
+     */
+    updateWidgetInstance(editedWidgetConfig: WidgetConfig): void;
+    protected handleGridEvent(event: GridWrapperEvent): void;
+    private loadAndSubscribeWidgets;
+    private updateWidgetPositions;
+    private setModified;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiGridComponent, "si-grid", never, { "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; "widgetCatalog": { "alias": "widgetCatalog"; "required": false; "isSignal": true; }; "emitWidgetInstanceEditEvents": { "alias": "emitWidgetInstanceEditEvents"; "required": false; "isSignal": true; }; "hideProgressIndicator": { "alias": "hideProgressIndicator"; "required": false; "isSignal": true; }; "widgetInstanceEditorDialogComponent": { "alias": "widgetInstanceEditorDialogComponent"; "required": false; "isSignal": true; }; }, { "editable": "editableChange"; "isModified": "isModified"; "widgetInstanceEdit": "widgetInstanceEdit"; }, never, ["[empty-state]"], true, never>;
+}
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/** Interface representing an action item in the dashboard toolbar. */
+interface DashboardToolbarItemAction {
+    type: 'action';
+    /** Label that is shown to the user. */
+    label: TranslatableString;
+    /** Action that called when the item is triggered. */
+    action: (grid: SiGridComponent) => void;
+}
+/** Interface representing a router link item in the dashboard toolbar. */
+interface DashboardToolbarItemRouterLink {
+    type: 'router-link';
+    /** Label that is shown to the user. */
+    label: TranslatableString;
+    /** Link for the angular router. Accepts the same values as {@link RouterLink}. */
+    routerLink: string | any[];
+    /** Navigation extras that are passed to the {@link RouterLink}. */
+    extras?: NavigationExtras;
+}
+/** Interface representing a link item in the dashboard toolbar. */
+interface DashboardToolbarItemLink {
+    type: 'link';
+    /** Label that is shown to the user. */
+    label: TranslatableString;
+    /** The href property of the anchor. */
+    href: string;
+    /** The target property of the anchor. */
+    target?: string;
+}
+/** Union type for all possible items in the dashboard toolbar. */
+type DashboardToolbarItem = DashboardToolbarItemAction | DashboardToolbarItemRouterLink | DashboardToolbarItemLink;
+
+/**
+ * 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.
+ */
+declare class SiWidgetCatalogComponent implements OnInit, OnDestroy {
+    /**
+     * Placeholder text for the search input field in the widget catalog.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`)
+     * ```
+     */
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /**
+     * 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.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<Omit<WidgetConfig, "id"> | undefined>;
+    /**
+     * View defines if the catalog widget list or the widget editor is visible.
+     *
+     * @internal
+     * @defaultValue 'list'
+     */
+    readonly view: _angular_core.WritableSignal<"list" | "editor" | "editor-only">;
+    protected readonly editorHost: _angular_core.Signal<ViewContainerRef>;
+    /**
+     * 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.
+     *
+     * @defaultValue [] */
+    widgetCatalog: Widget[];
+    /**
+     * Holds the search term from the catalog to be visible when going back
+     * by pressing the previous button from the widget edit view.
+     */
+    protected searchTerm: string;
+    /**
+     * Array used to hold the search result on the widget catalog.
+     * @defaultValue [] */
+    protected filteredWidgetCatalog: Widget[];
+    protected readonly selected: _angular_core.WritableSignal<Widget | undefined>;
+    private widgetConfig?;
+    private readonly hasEditor;
+    protected labelCancel: string;
+    protected labelPrevious: string;
+    protected labelNext: string;
+    protected labelAdd: string;
+    protected labelEmpty: string;
+    protected labelDialogHeading: string;
+    protected labelDialogCancel: string;
+    protected labelDialogMessage: string;
+    protected labelDialogDiscard: string;
+    protected readonly showAddButton: _angular_core.Signal<boolean>;
+    protected readonly showNextButton: _angular_core.Signal<boolean>;
+    protected readonly showPreviousButton: _angular_core.Signal<boolean>;
+    protected readonly disableAddButton: _angular_core.Signal<boolean>;
+    protected readonly disableNextButton: _angular_core.Signal<boolean>;
+    /** Indicates if the current config is valid or not. If invalid, the add button is disabled. */
+    private readonly invalidConfig;
+    /**
+     * 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.
+     * */
+    private widgetConfigModified;
+    private widgetInstanceEditor?;
+    private readonly editorWizardState;
+    private widgetInstanceEditorRef?;
+    private subscriptions;
+    private dialogService;
+    private injector;
+    private envInjector;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected onSearch(searchTerm?: string): void;
+    protected onCancel(): void;
+    protected onNext(): void;
+    protected onPrevious(): void;
+    private setupWidgetInstanceEditor;
+    private tearDownEditor;
+    private setupCatalog;
+    protected onAddWidget(): void;
+    protected selectWidget(widget?: Widget): void;
+    private isEditorWizdard;
+    private handleStatusChanges;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiWidgetCatalogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiWidgetCatalogComponent, "si-widget-catalog", never, { "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class SiFlexibleDashboardComponent implements OnInit, OnChanges, OnDestroy {
+    /**
+     * Input to change the dashboard editable state.
+     *
+     * @defaultValue false
+     */
+    readonly editable: _angular_core.ModelSignal<boolean>;
+    /**
+     * Heading for the dashboard.
+     */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optionally, provide a custom subclass of the SiWidgetCatalogComponent
+     * to use your own catalog component.
+     */
+    readonly widgetCatalogComponent: _angular_core.InputSignal<Type<SiWidgetCatalogComponent> | undefined>;
+    /**
+     * Optionally, provide a custom subclass of the {@link SiWidgetInstanceEditorDialogComponent}
+     * to use your own implementation.
+     */
+    readonly widgetInstanceEditorDialogComponent: _angular_core.InputSignal<Type<SiWidgetInstanceEditorDialogComponent> | undefined>;
+    /**
+     * Optionally, but it is recommended to include an id for a dashboard.
+     * The id is utilized in the persistence calls on the {@link SiWidgetStorage}.
+     */
+    readonly dashboardId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Sets the available widgets for the widget catalog to the dashboard.
+     *
+     * @defaultValue [] */
+    readonly widgetCatalog: _angular_core.InputSignal<Widget[]>;
+    /**
+     * Option to remove the add widget instance button from the primary toolbar.
+     *
+     * @defaultValue false
+     */
+    readonly hideAddWidgetInstanceButton: _angular_core.InputSignal<boolean>;
+    /**
+     * Option to hide the dashboard edit button.
+     *
+     * @defaultValue false
+     */
+    readonly hideEditButton: _angular_core.InputSignal<boolean>;
+    /**
+     *  Option to display the edit button as a text button instead, only if the window is larger than xs {@link SiResponsiveContainerDirective}.
+     *
+     * @defaultValue false
+     */
+    readonly showEditButtonLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Option to turn off the loading spinner on save and load operations.
+     *
+     * @defaultValue false
+     */
+    readonly hideProgressIndicator: _angular_core.InputSignal<boolean>;
+    /**
+     * Option to configure a dashboard instance. Default is the optional value from
+     * the {@link SI_DASHBOARD_CONFIGURATION}.
+     *
+     * @defaultValue inject(SI_DASHBOARD_CONFIGURATION)
+     */
+    readonly config: _angular_core.InputSignal<Config | undefined>;
+    /**
+     * Placeholder text for the search input field in the widget catalog.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`)
+     * ```
+     */
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /**
+     * The grid component is the actual container for the widgets.
+     */
+    readonly grid: _angular_core.Signal<SiGridComponent>;
+    /** Property to access the dashboard component instance.
+     */
+    readonly dashboard: _angular_core.Signal<SiDashboardComponent>;
+    /** The view child holds the container that hosts the widget catalog.
+     */
+    protected readonly catalogHost: _angular_core.Signal<ViewContainerRef>;
+    /**
+     * 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`.
+     */
+    readonly isModified: _angular_core.OutputEmitterRef<boolean>;
+    protected labelAddWidget: string;
+    protected labelEditor: string;
+    protected labelCatalog: string;
+    protected addWidgetInstanceAction: DashboardToolbarItem;
+    /**
+     * The primary action menu items shown in the edit mode of the dashboard.
+     */
+    readonly primaryEditActions$: 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.
+     */
+    readonly secondaryEditActions$: BehaviorSubject<(MenuItem | DashboardToolbarItem)[]>;
+    /**
+     * @returns True, if the dashboard shows its widgets and not a catalog or and editor.
+     */
+    readonly isDashboardVisible: _angular_core.Signal<boolean>;
+    /**
+     * The page title of the dashboard, which is either {@link 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 pageTitle: _angular_core.Signal<string | undefined>;
+    private readonly viewState;
+    private subscriptions;
+    private widgetStorage;
+    private hideAddWidgetInstanceButton$;
+    private dashboardId$;
+    private outputRefSubscription;
+    private readonly toolbar;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Shows the widget catalog of the dashboard. If a widget instance is expanded
+     * it restores the widget instances before.
+     */
+    showWidgetCatalog(): void;
+    protected onModified(event: boolean): void;
+    private setupMenuItems;
+    private setupPrimaryMenuItems;
+    private editWidgetInstance;
+    private proxyMenuItemAction;
+    private getWidget;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFlexibleDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFlexibleDashboardComponent, "si-flexible-dashboard", never, { "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "widgetCatalogComponent": { "alias": "widgetCatalogComponent"; "required": false; "isSignal": true; }; "widgetInstanceEditorDialogComponent": { "alias": "widgetInstanceEditorDialogComponent"; "required": false; "isSignal": true; }; "dashboardId": { "alias": "dashboardId"; "required": false; "isSignal": true; }; "widgetCatalog": { "alias": "widgetCatalog"; "required": false; "isSignal": true; }; "hideAddWidgetInstanceButton": { "alias": "hideAddWidgetInstanceButton"; "required": false; "isSignal": true; }; "hideEditButton": { "alias": "hideEditButton"; "required": false; "isSignal": true; }; "showEditButtonLabel": { "alias": "showEditButtonLabel"; "required": false; "isSignal": true; }; "hideProgressIndicator": { "alias": "hideProgressIndicator"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; }, { "editable": "editableChange"; "isModified": "isModified"; }, never, ["[filters-slot]", "[empty-state]"], true, never>;
+}
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Injection token to configure your widget store implementation. Use
+ * `{ provide: SI_WIDGET_STORE, useClass: AppWidgetStorage }` in your app configuration.
+ */
+declare const SI_WIDGET_STORE: InjectionToken<SiWidgetStorage>;
+/**
+ * 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.
+ */
+declare abstract class SiWidgetStorage {
+    /**
+     * Returns an observable with the dashboard widget configuration. The dashboard subscribes to the
+     * observable and updates when a new value emits.
+     */
+    abstract load(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.
+     * @param widgets - The existing and new widget config objects to be saved.
+     */
+    abstract save(widgets: (WidgetConfig | Omit<WidgetConfig, 'id'>)[], removedWidgets?: WidgetConfig[], dashboardId?: string): Observable<WidgetConfig[]>;
+    /**
+     * Optional method to provide primary and secondary toolbar menu items.
+     * @param dashboardId - The id of the dashboard if present to allow dashboard specific menu items.
+     */
+    getToolbarMenuItems?: (dashboardId?: string) => {
+        primary: Observable<(MenuItem | DashboardToolbarItem)[]>;
+        secondary: Observable<(MenuItem | DashboardToolbarItem)[]>;
+    };
+}
+/**
+ * The {@link SiDefaultWidgetStorage} uses this key to persist the dashboard
+ * configurations in the session of local storage.
+ */
+declare const STORAGE_KEY = "dashboard-store";
+/**
+ * Injection token to optionally inject the {@link Storage} implementation
+ * that will be used by the {@link SiDefaultWidgetStorage}. The default implementation
+ * is {@link sessionStorage}.
+ *
+ * @example
+ * The following shows how to provide the localStorage.
+ * ```
+ * providers: [..., { provide: DEFAULT_WIDGET_STORAGE_TOKEN, useValue: localStorage }]
+ * ```
+ *
+ */
+declare const DEFAULT_WIDGET_STORAGE_TOKEN: InjectionToken<Storage>;
+/**
+ * Default implementation of {@link SiWidgetStorage} that uses the
+ * {@link Storage} implementation provided by the {@link DEFAULT_WIDGET_STORAGE_TOKEN}.
+ * In general, it persists the dashboard's configurations in the Browser's session or local
+ * storage. *
+ */
+declare class SiDefaultWidgetStorage extends SiWidgetStorage {
+    storage: Storage;
+    private map;
+    private widgets?;
+    constructor();
+    load(dashboardId?: string): Observable<WidgetConfig[]>;
+    save(widgets: (WidgetConfig | Omit<WidgetConfig, 'id'>)[], removedWidgets?: WidgetConfig[], dashboardId?: string): Observable<WidgetConfig[]>;
+    protected update(newConfigs: WidgetConfig[], dashboardId?: string): void;
+    protected loadFromStorage(dashboardId?: string): WidgetConfig[];
+}
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+type SetupComponentFn = <T>(factory: WidgetComponentFactory, componentName: string, host: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector) => Observable<ComponentRef<T>>;
+declare const widgetFactoryRegistry: {
+    _factories: {
+        [key: string]: SetupComponentFn;
+    };
+    register(name: string, factoryFn: SetupComponentFn): void;
+    getFactoryFn(name: string): SetupComponentFn;
+    hasFactoryFn(name: string): boolean;
+};
+declare const setupWidgetInstance: (widgetComponentFactory: WidgetComponentFactory, host: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector) => Observable<ComponentRef<WidgetInstance>>;
+declare const setupWidgetEditor: (widgetComponentFactory: WidgetComponentFactory, host: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector) => Observable<ComponentRef<WidgetInstanceEditor>>;
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+declare class SiDashboardsNgModule {
+    /**
+     * @deprecated The module configuration `forRoot` is not needed any more. You can use the injection tokens
+     * `SI_DASHBOARD_CONFIGURATION` and `SI_WIDGET_STORE` direct in your app configuration. We migrated to standalone
+     * components already and will delete this module definition later.
+     */
+    static forRoot({ config, dashboardApi }: {
+        config?: Config;
+        /**
+         * Provide a custom widget storage.
+         *
+         * @deprecated Use the provider tokens in your app config instead.
+         *
+         * @example
+         * ```typescript
+         * const appConfig: ApplicationConfig = {
+         *  providers: [{provide: SI_WIDGET_STORE, useClass: YourWidgetStorage}]
+         * }
+         * ```
+         */
+        dashboardApi?: Provider;
+    }): ModuleWithProviders<SiDashboardsNgModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDashboardsNgModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiDashboardsNgModule, never, [typeof SiFlexibleDashboardComponent, typeof SiGridComponent, typeof SiWidgetCatalogComponent, typeof SiWidgetInstanceEditorDialogComponent], [typeof SiFlexibleDashboardComponent, typeof SiGridComponent, typeof SiWidgetCatalogComponent, typeof SiWidgetInstanceEditorDialogComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiDashboardsNgModule>;
+}
+
+export { CONFIG_TOKEN, DEFAULT_GRIDSTACK_OPTIONS, DEFAULT_WIDGET_STORAGE_TOKEN, NEW_WIDGET_PREFIX, SI_DASHBOARD_CONFIGURATION, SI_WIDGET_STORE, STORAGE_KEY, SiDashboardsNgModule, SiDefaultWidgetStorage, SiFlexibleDashboardComponent, SiGridComponent, SiWidgetCatalogComponent, SiWidgetInstanceEditorDialogComponent, SiWidgetStorage, SiDashboardsNgModule as SimplDashboardsNgModule, createWidgetConfig, setupWidgetEditor, setupWidgetInstance, widgetFactoryRegistry };
+export type { Config, DashboardToolbarItem, DashboardToolbarItemAction, DashboardToolbarItemLink, DashboardToolbarItemRouterLink, FederatedModule, GridConfig, LoadRemoteModuleEsmOptions, LoadRemoteModuleManifestOptions, LoadRemoteModuleOptions, LoadRemoteModuleScriptOptions, ObjectFit, SetupComponentFn, WebComponent, Widget, WidgetComponentFactory, WidgetComponentTypeFactory, WidgetConfig, WidgetConfigEvent, WidgetConfigStatus, WidgetImage, WidgetInstance, WidgetInstanceEditor, WidgetInstanceEditorWizard, WidgetInstanceEditorWizardState, WidgetPositionConfig };