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

package/fesm2022/spike-rabbit-dashboards-ng.mjs

@@ -0,0 +1,2184 @@
+import { NgClass, AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, model, output, computed, ViewChild, Component, Injectable, Renderer2, DOCUMENT, ElementRef, Input, EventEmitter, createNgModule, Injector, EnvironmentInjector, viewChild, ViewContainerRef, isSignal, NgZone, signal, NgModule } from '@angular/core';
+import { SiDashboardCardComponent, SiDashboardComponent } from '@spike-rabbit/element-ng/dashboard';
+import * as i1 from '@spike-rabbit/element-translate-ng/translate';
+import { t, SiTranslateModule, SiTranslatePipe } from '@spike-rabbit/element-translate-ng/translate';
+import { BehaviorSubject, of, Subject, throwError, ReplaySubject, combineLatest } from 'rxjs';
+import { takeUntil, take, map } from 'rxjs/operators';
+import { BOOTSTRAP_BREAKPOINTS, SiResponsiveContainerDirective } from '@spike-rabbit/element-ng/resize-observer';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { SiContentActionBarComponent } from '@spike-rabbit/element-ng/content-action-bar';
+import { SiLinkDirective } from '@spike-rabbit/element-ng/link';
+import { SiLoadingSpinnerComponent, SiLoadingService, SiLoadingSpinnerDirective } from '@spike-rabbit/element-ng/loading-spinner';
+import { SiModalService } from '@spike-rabbit/element-ng/modal';
+import { GridStack } from 'gridstack';
+import { SiActionDialogService } from '@spike-rabbit/element-ng/action-modal';
+import { SiCircleStatusComponent } from '@spike-rabbit/element-ng/circle-status';
+import { SiEmptyStateComponent } from '@spike-rabbit/element-ng/empty-state';
+import { SiSearchBarComponent } from '@spike-rabbit/element-ng/search-bar';
+export * from '@spike-rabbit/dashboards-ng/translate';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The default gridstack configuration options.
+ */
+const DEFAULT_GRIDSTACK_OPTIONS = {
+    handle: '.draggable-overlay',
+    cellHeight: 100,
+    columnOpts: { breakpoints: [{ w: BOOTSTRAP_BREAKPOINTS.smMinimum, c: 1 }] },
+    column: 12,
+    margin: '0',
+    placeholderClass: 'si-grid-stack-placeholder'
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Injection token to configure dashboards. Use `{ provide: SI_DASHBOARD_CONFIGURATION, useValue: config }`
+ * in your app configuration.
+ */
+const SI_DASHBOARD_CONFIGURATION = new InjectionToken('Injection token to configure dashboards.', {
+    providedIn: 'root',
+    factory: () => ({ grid: { gridStackOptions: DEFAULT_GRIDSTACK_OPTIONS } })
+});
+/**
+ * @deprecated Use SI_DASHBOARD_CONFIGURATION instead.
+ */
+const CONFIG_TOKEN = SI_DASHBOARD_CONFIGURATION;
+
+/**
+ * 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.
+ */
+const SI_WIDGET_STORE = new InjectionToken('Injection token to configure your widget store implementation.', { providedIn: 'root', factory: () => new SiDefaultWidgetStorage() });
+/**
+ * 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.
+ */
+class SiWidgetStorage {
+    /**
+     * 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;
+}
+/**
+ * The {@link SiDefaultWidgetStorage} uses this key to persist the dashboard
+ * configurations in the session of local storage.
+ */
+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 }]
+ * ```
+ *
+ */
+const DEFAULT_WIDGET_STORAGE_TOKEN = new InjectionToken('default storage for dashboard store');
+/**
+ * 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. *
+ */
+class SiDefaultWidgetStorage extends SiWidgetStorage {
+    storage;
+    map = new Map();
+    widgets;
+    constructor() {
+        super();
+        this.storage = inject(DEFAULT_WIDGET_STORAGE_TOKEN, { optional: true }) ?? sessionStorage;
+    }
+    load(dashboardId) {
+        if (!dashboardId) {
+            this.widgets ??= new BehaviorSubject(this.loadFromStorage());
+            return this.widgets;
+        }
+        else if (!this.map.has(dashboardId)) {
+            this.map.set(dashboardId, new BehaviorSubject(this.loadFromStorage(dashboardId)));
+        }
+        return this.map.get(dashboardId);
+    }
+    save(widgets, removedWidgets, dashboardId) {
+        const newWidgets = widgets.map(widget => {
+            if (widget.id === undefined) {
+                return { ...widget, id: Math.random().toString(36).substring(2, 9) };
+            }
+            else {
+                return widget;
+            }
+        });
+        this.update(newWidgets, dashboardId);
+        return of(newWidgets);
+    }
+    update(newConfigs, dashboardId) {
+        const widgets$ = this.load(dashboardId);
+        widgets$.next(newConfigs);
+        if (!dashboardId) {
+            this.storage.setItem(STORAGE_KEY, JSON.stringify(newConfigs));
+        }
+        else {
+            this.storage.setItem(`${STORAGE_KEY}-${dashboardId}`, JSON.stringify(newConfigs));
+        }
+    }
+    loadFromStorage(dashboardId) {
+        let configStr;
+        if (!dashboardId) {
+            configStr = this.storage.getItem(STORAGE_KEY);
+        }
+        else {
+            configStr = this.storage.getItem(`${STORAGE_KEY}-${dashboardId}`);
+        }
+        let widgetConfigs = [];
+        if (configStr) {
+            widgetConfigs = JSON.parse(configStr);
+        }
+        return widgetConfigs;
+    }
+}
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The toolbar of the flexible dashboard is either `editable` or not. When not
+ * `editable`, it supports content projection for applications to inject toolbar
+ * controls for e.g. filtering. Use the attribute `filters-slot` to inject the filters.
+ * In addition it shows the button to switch to the `editable`. When `editable`, it support
+ * the cancel and save buttons, as well as displaying primary and secondary actions.
+ */
+class SiDashboardToolbarComponent {
+    /**
+     * Set primary actions that are in `editable` mode first visible or in
+     * the expanded content action bar of the toolbar.
+     *
+     * @defaultValue []
+     */
+    primaryEditActions = input([]);
+    /**
+     * Set secondary actions that are in `editable` mode second visible or in
+     * the dropdown part of the content action bar of the toolbar.
+     *
+     * @defaultValue [] */
+    secondaryEditActions = input([]);
+    /**
+     * Input to disable the save button. Note, the input `disabled` disables all
+     * actions and the save button of the toolbar.
+     *
+     * @defaultValue true
+     */
+    disableSaveButton = model(true);
+    /**
+     * Input to disable all actions and buttons of the toolbar.
+     *
+     * @defaultValue false */
+    disabled = input(false);
+    /**
+     * Input option to set the `editable` mode. When editable
+     * the toolbar shows a cancel and save button. Otherwise,
+     * it displays an edit button.
+     *
+     * @defaultValue false */
+    editable = model(false);
+    /**
+     * Option to hide the dashboard edit button.
+     *
+     * @defaultValue false
+     */
+    hideEditButton = input(false);
+    /**
+     *  Option to display the edit button as a text button instead, only if the window is larger than xs {@link SiResponsiveContainerDirective}.
+     *
+     * @defaultValue false
+     */
+    showEditButtonLabel = input(false);
+    /**
+     * Emits on save button click.
+     */
+    save = output();
+    /**
+     * Emits on cancel button click.
+     */
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    cancel = output();
+    labelEdit = t(() => $localize `:@@DASHBOARD.EDIT:Edit`);
+    labelCancel = t(() => $localize `:@@DASHBOARD.CANCEL:Cancel`);
+    labelSave = t(() => $localize `:@@DASHBOARD.SAVE:Save`);
+    activatedRoute = inject(ActivatedRoute, { optional: true });
+    dashboardToolbarContainer;
+    showContentActionBar = computed(() => this.primaryEditActions()?.length + this.secondaryEditActions()?.length > 3);
+    editActions = computed(() => [
+        ...this.primaryEditActions(),
+        ...this.secondaryEditActions()
+    ]);
+    onEdit() {
+        this.editable.set(true);
+    }
+    onSave() {
+        if (this.editable()) {
+            this.save.emit();
+        }
+    }
+    onCancel() {
+        if (this.editable()) {
+            this.cancel.emit();
+        }
+    }
+    isToolbarItem(item) {
+        return 'label' in item;
+    }
+    showEditButtonLabelDesktop() {
+        return this.showEditButtonLabel() && !this.dashboardToolbarContainer?.xs();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiDashboardToolbarComponent, isStandalone: true, selector: "si-dashboard-toolbar", inputs: { primaryEditActions: { classPropertyName: "primaryEditActions", publicName: "primaryEditActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryEditActions: { classPropertyName: "secondaryEditActions", publicName: "secondaryEditActions", isSignal: true, isRequired: false, transformFunction: null }, disableSaveButton: { classPropertyName: "disableSaveButton", publicName: "disableSaveButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, hideEditButton: { classPropertyName: "hideEditButton", publicName: "hideEditButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButtonLabel: { classPropertyName: "showEditButtonLabel", publicName: "showEditButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disableSaveButton: "disableSaveButtonChange", editable: "editableChange", save: "save", cancel: "cancel" }, viewQueries: [{ propertyName: "dashboardToolbarContainer", first: true, predicate: SiResponsiveContainerDirective, descendants: true }], ngImport: i0, template: "<div class=\"row mb-3\" siResponsiveContainer>\n  <div class=\"col-12 d-flex justify-content-between\">\n    @if (!editable()) {\n      <ng-content select=\"[filters-slot]\" />\n      @if (!hideEditButton()) {\n        <button\n          type=\"button\"\n          class=\"btn ms-auto\"\n          [ngClass]=\"\n            showEditButtonLabelDesktop()\n              ? 'btn-secondary'\n              : 'btn-circle btn-sm btn-tertiary element-edit'\n          \"\n          [attr.aria-label]=\"labelEdit | translate\"\n          [attr.title]=\"!showEditButtonLabelDesktop() ? (labelEdit | translate) : undefined\"\n          [disabled]=\"disabled()\"\n          (click)=\"onEdit()\"\n        >\n          @if (showEditButtonLabelDesktop()) {\n            {{ labelEdit | translate }}\n          }\n        </button>\n      }\n    } @else {\n      @if (showContentActionBar()) {\n        <si-content-action-bar\n          toggleItemLabel=\"toggle\"\n          viewType=\"expanded\"\n          [disabled]=\"disabled()\"\n          [primaryActions]=\"primaryEditActions()\"\n          [secondaryActions]=\"secondaryEditActions()\"\n        />\n      } @else {\n        <div>\n          @for (action of editActions(); track $index) {\n            @if (isToolbarItem(action)) {\n              @if (disabled()) {\n                <!-- Links do not support disabled, so we need to render a button instead in this case. -->\n                <button type=\"button\" class=\"btn btn-secondary me-4\" disabled>\n                  {{ action.label! | translate }}\n                </button>\n              } @else {\n                @switch (action.type) {\n                  @case ('action') {\n                    <!-- eslint-disable @angular-eslint/template/no-any -->\n                    <!-- This item has a patched action which will inject the grid. But our types do not reflect this. -->\n                    <!-- TODO: make our types reflect that this item has a patched action. -->\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-secondary me-4\"\n                      (click)=\"$any(action.action)()\"\n                    >\n                      {{ action.label! | translate }}\n                    </button>\n                    <!-- eslint-disable-enable @angular-eslint/template/no-any -->\n                  }\n                  @case ('router-link') {\n                    <a\n                      class=\"btn btn-secondary me-4\"\n                      [routerLink]=\"action.routerLink\"\n                      [queryParams]=\"action.extras?.queryParams\"\n                      [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n                      [fragment]=\"action.extras?.fragment\"\n                      [state]=\"action.extras?.state\"\n                      [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n                      [preserveFragment]=\"action.extras?.preserveFragment\"\n                      [skipLocationChange]=\"action.extras?.skipLocationChange\"\n                      [replaceUrl]=\"action.extras?.replaceUrl\"\n                    >\n                      {{ action.label! | translate }}\n                    </a>\n                  }\n                  @case ('link') {\n                    <a class=\"btn btn-secondary me-4\" [href]=\"action.href\" [target]=\"action.target\">\n                      {{ action.label! | translate }}\n                    </a>\n                  }\n                }\n              }\n            } @else {\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary me-4\"\n                [disabled]=\"disabled()\"\n                [siLink]=\"action\"\n              >\n                {{ action.title! | translate }}\n              </button>\n            }\n          }\n        </div>\n      }\n      <div>\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary me-4\"\n          [disabled]=\"disabled()\"\n          (click)=\"onCancel()\"\n        >\n          {{ labelCancel | translate }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          [disabled]=\"disableSaveButton() || disabled()\"\n          (click)=\"onSave()\"\n        >\n          @if (disabled()) {\n            <si-loading-spinner />\n          } @else {\n            <span>{{ labelSave | translate }}</span>\n          }\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column}si-loading-spinner{--loading-spinner-size: 1rem;--loading-spinner-color: var(--element-text-inverse)}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SiResponsiveContainerDirective, selector: "[siResponsiveContainer]", inputs: ["resizeThrottle", "breakpoints"], exportAs: ["siResponsiveContainer"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-dashboard-toolbar', imports: [
+                        SiContentActionBarComponent,
+                        SiLinkDirective,
+                        SiLoadingSpinnerComponent,
+                        SiTranslateModule,
+                        RouterLink,
+                        NgClass,
+                        SiResponsiveContainerDirective
+                    ], template: "<div class=\"row mb-3\" siResponsiveContainer>\n  <div class=\"col-12 d-flex justify-content-between\">\n    @if (!editable()) {\n      <ng-content select=\"[filters-slot]\" />\n      @if (!hideEditButton()) {\n        <button\n          type=\"button\"\n          class=\"btn ms-auto\"\n          [ngClass]=\"\n            showEditButtonLabelDesktop()\n              ? 'btn-secondary'\n              : 'btn-circle btn-sm btn-tertiary element-edit'\n          \"\n          [attr.aria-label]=\"labelEdit | translate\"\n          [attr.title]=\"!showEditButtonLabelDesktop() ? (labelEdit | translate) : undefined\"\n          [disabled]=\"disabled()\"\n          (click)=\"onEdit()\"\n        >\n          @if (showEditButtonLabelDesktop()) {\n            {{ labelEdit | translate }}\n          }\n        </button>\n      }\n    } @else {\n      @if (showContentActionBar()) {\n        <si-content-action-bar\n          toggleItemLabel=\"toggle\"\n          viewType=\"expanded\"\n          [disabled]=\"disabled()\"\n          [primaryActions]=\"primaryEditActions()\"\n          [secondaryActions]=\"secondaryEditActions()\"\n        />\n      } @else {\n        <div>\n          @for (action of editActions(); track $index) {\n            @if (isToolbarItem(action)) {\n              @if (disabled()) {\n                <!-- Links do not support disabled, so we need to render a button instead in this case. -->\n                <button type=\"button\" class=\"btn btn-secondary me-4\" disabled>\n                  {{ action.label! | translate }}\n                </button>\n              } @else {\n                @switch (action.type) {\n                  @case ('action') {\n                    <!-- eslint-disable @angular-eslint/template/no-any -->\n                    <!-- This item has a patched action which will inject the grid. But our types do not reflect this. -->\n                    <!-- TODO: make our types reflect that this item has a patched action. -->\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-secondary me-4\"\n                      (click)=\"$any(action.action)()\"\n                    >\n                      {{ action.label! | translate }}\n                    </button>\n                    <!-- eslint-disable-enable @angular-eslint/template/no-any -->\n                  }\n                  @case ('router-link') {\n                    <a\n                      class=\"btn btn-secondary me-4\"\n                      [routerLink]=\"action.routerLink\"\n                      [queryParams]=\"action.extras?.queryParams\"\n                      [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n                      [fragment]=\"action.extras?.fragment\"\n                      [state]=\"action.extras?.state\"\n                      [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n                      [preserveFragment]=\"action.extras?.preserveFragment\"\n                      [skipLocationChange]=\"action.extras?.skipLocationChange\"\n                      [replaceUrl]=\"action.extras?.replaceUrl\"\n                    >\n                      {{ action.label! | translate }}\n                    </a>\n                  }\n                  @case ('link') {\n                    <a class=\"btn btn-secondary me-4\" [href]=\"action.href\" [target]=\"action.target\">\n                      {{ action.label! | translate }}\n                    </a>\n                  }\n                }\n              }\n            } @else {\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary me-4\"\n                [disabled]=\"disabled()\"\n                [siLink]=\"action\"\n              >\n                {{ action.title! | translate }}\n              </button>\n            }\n          }\n        </div>\n      }\n      <div>\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary me-4\"\n          [disabled]=\"disabled()\"\n          (click)=\"onCancel()\"\n        >\n          {{ labelCancel | translate }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          [disabled]=\"disableSaveButton() || disabled()\"\n          (click)=\"onSave()\"\n        >\n          @if (disabled()) {\n            <si-loading-spinner />\n          } @else {\n            <span>{{ labelSave | translate }}</span>\n          }\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column}si-loading-spinner{--loading-spinner-size: 1rem;--loading-spinner-color: var(--element-text-inverse)}\n"] }]
+        }], propDecorators: { dashboardToolbarContainer: [{
+                type: ViewChild,
+                args: [SiResponsiveContainerDirective]
+            }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiGridService {
+    /** @defaultValue [] */
+    widgetCatalog = [];
+    /**
+     * Observable that emits true if si-grid is set to editable.
+     * The owner of the editable state is the si-grid component.
+     * This subject is used to propagate these state changes via
+     * the si-widget-host components to the widgets.
+     */
+    editable$ = new BehaviorSubject(false);
+    getWidget(id) {
+        return this.widgetCatalog.find(widget => widget.id === id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiWebComponentWrapperBaseComponent {
+    _config;
+    get config() {
+        return this._config;
+    }
+    set config(config) {
+        this._config = config;
+        if (this.webComponentHost.nativeElement.children.length > 0) {
+            this.webComponentHost.nativeElement.children[0].config = config;
+        }
+    }
+    elementTagName;
+    url;
+    webComponentHost;
+    webComponent;
+    renderer2 = inject(Renderer2);
+    document = inject(DOCUMENT);
+    ngAfterViewInit() {
+        if (!this.isScriptLoaded(this.url)) {
+            const script = this.renderer2.createElement('script');
+            script.src = this.url;
+            this.renderer2.appendChild(this.document.body, script);
+        }
+        this.webComponent = this.renderer2.createElement(this.elementTagName);
+        this.webComponent.config = this.config;
+    }
+    isScriptLoaded(url) {
+        const script = document.querySelector(`script[src='${url}']`);
+        return script ? true : false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiWebComponentWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { config: "config", elementTagName: "elementTagName", url: "url" }, viewQueries: [{ propertyName: "webComponentHost", first: true, predicate: ["webComponentHost"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentWrapperBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], elementTagName: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], webComponentHost: [{
+                type: ViewChild,
+                args: ['webComponentHost', { static: true, read: ElementRef }]
+            }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiWebComponentEditorWrapperComponent extends SiWebComponentWrapperBaseComponent {
+    state;
+    stateChange = new Subject();
+    configChange = new Subject();
+    /**
+     * This will be set when setupWidgetInstanceEditor is executed
+     */
+    statusChangesHandler;
+    webComponentEventListener = (event) => this.configChange.next(event.detail);
+    webComponentStateChangeListener = (event) => {
+        this.state = event.detail;
+        this.stateChange.next(event.detail);
+    };
+    webComponentStatusChangesListener = (event) => {
+        this.statusChangesHandler?.(event.detail);
+    };
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.webComponent?.addEventListener('stateChange', this.webComponentStateChangeListener);
+        this.webComponent?.addEventListener('statusChanges', this.webComponentStatusChangesListener);
+        this.webComponent?.addEventListener('configChange', this.webComponentEventListener);
+        this.webComponentHost.nativeElement.appendChild(this.webComponent);
+    }
+    ngOnDestroy() {
+        this.webComponent?.removeEventListener('stateChange', this.webComponentStateChangeListener);
+        this.webComponent?.removeEventListener('statusChanges', this.webComponentStatusChangesListener);
+        this.webComponent?.removeEventListener('configChange', this.webComponentEventListener);
+    }
+    next() {
+        this.webComponent?.dispatchEvent(new CustomEvent('next'));
+    }
+    previous() {
+        this.webComponent?.dispatchEvent(new CustomEvent('previous'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentEditorWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiWebComponentEditorWrapperComponent, isStandalone: true, selector: "si-web-component-editor-wrapper", usesInheritance: true, ngImport: i0, template: "<div #webComponentHost class=\"h-100\"></div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentEditorWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-web-component-editor-wrapper', template: "<div #webComponentHost class=\"h-100\"></div>\n" }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiWebComponentWrapperComponent extends SiWebComponentWrapperBaseComponent {
+    _editable;
+    get editable() {
+        return this._editable ?? false;
+    }
+    set editable(editable) {
+        this._editable = editable;
+        if (this.webComponentHost.nativeElement.children.length > 0) {
+            this.webComponentHost.nativeElement.children[0].editable = editable;
+        }
+    }
+    primaryActions;
+    secondaryActions;
+    primaryEditActions;
+    secondaryEditActions;
+    configChange = new EventEmitter();
+    webComponentEventListener = (event) => this.configChanged(event.detail);
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.webComponent?.addEventListener('configChange', this.webComponentEventListener);
+        this.webComponentHost.nativeElement.appendChild(this.webComponent);
+    }
+    ngOnDestroy() {
+        this.webComponent?.removeEventListener('configChange', this.webComponentEventListener);
+    }
+    configChanged(event) {
+        this.primaryActions = event.primaryActions ?? this.primaryActions;
+        this.secondaryActions = event.secondaryActions ?? this.secondaryActions;
+        this.primaryEditActions = event.primaryEditActions ?? this.primaryEditActions;
+        this.secondaryEditActions = event.secondaryEditActions ?? this.secondaryEditActions;
+        this.configChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiWebComponentWrapperComponent, isStandalone: true, selector: "si-web-component-wrapper", inputs: { editable: "editable" }, usesInheritance: true, ngImport: i0, template: "<div #webComponentHost class=\"h-100\"></div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-web-component-wrapper', template: "<div #webComponentHost class=\"h-100\"></div>\n" }]
+        }], propDecorators: { editable: [{
+                type: Input
+            }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+const widgetFactoryRegistry = {
+    _factories: {},
+    register(name, factoryFn) {
+        this._factories[name] = factoryFn;
+    },
+    getFactoryFn(name) {
+        return this._factories[name];
+    },
+    hasFactoryFn(name) {
+        return this._factories[name] !== undefined;
+    }
+};
+const setupWidgetInstance = (widgetComponentFactory, host, injector, envInjector) => setupComponent(widgetComponentFactory, host, injector, envInjector, 'componentName');
+const setupWidgetEditor = (widgetComponentFactory, host, injector, envInjector) => setupComponent(widgetComponentFactory, host, injector, envInjector, 'editorComponentName');
+const setupComponent = (widgetComponentFactory, host, injector, envInjector, componentName) => {
+    if (!widgetComponentFactory.factoryType || widgetComponentFactory.factoryType === 'default') {
+        return loadAndAttachComponent(widgetComponentFactory, componentName, host, injector, envInjector);
+    }
+    else if (widgetComponentFactory.factoryType === 'web-component') {
+        return loadAndAttachWebComponentWrapper(widgetComponentFactory, componentName, host);
+    }
+    else if (widgetFactoryRegistry.hasFactoryFn(widgetComponentFactory.factoryType)) {
+        const setupFn = widgetFactoryRegistry.getFactoryFn(widgetComponentFactory.factoryType);
+        return setupFn(widgetComponentFactory, componentName, host, injector, envInjector);
+    }
+    else {
+        return throwError(() => new Error(`Unknown widget factory type ${widgetComponentFactory.factoryType}.`));
+    }
+};
+const loadAndAttachComponent = (factory, componentName, host, injector, envInjector) => {
+    const result = new Subject();
+    if (factory[componentName]) {
+        factory.moduleLoader(factory[componentName]).then(module => {
+            const ngModuleRef = createNgModule(module[factory.moduleName], envInjector);
+            const componentKey = factory[componentName];
+            if (!componentKey) {
+                throw new Error(`Component configuration for ${componentName} is undefined.`);
+            }
+            const componentType = module[componentKey];
+            const widgetInstanceRef = host.createComponent(componentType, { injector, ngModuleRef });
+            result.next(widgetInstanceRef);
+            result.complete();
+        }, rejection => {
+            const msg = rejection
+                ? `Loading widget module ${factory.moduleName} failed with ${JSON.stringify(rejection.toString())}`
+                : `Loading widget module ${factory.moduleName} failed`;
+            result.error(msg);
+            result.complete();
+        });
+    }
+    else {
+        result.error(`Provided component factory has no ${componentName} component configuration`);
+    }
+    return result;
+};
+const loadAndAttachWebComponentWrapper = (factory, componentName, host) => {
+    const result = new ReplaySubject();
+    if (factory[componentName]) {
+        let widgetInstanceRef;
+        if (componentName === 'componentName') {
+            widgetInstanceRef = host.createComponent(SiWebComponentWrapperComponent);
+        }
+        else {
+            widgetInstanceRef = host.createComponent(SiWebComponentEditorWrapperComponent);
+        }
+        widgetInstanceRef.instance.elementTagName = factory[componentName];
+        widgetInstanceRef.instance.url = factory.url;
+        result.next(widgetInstanceRef);
+        result.complete();
+    }
+    else {
+        result.error(`Provided component factory has no ${componentName} component configuration`);
+    }
+    return result;
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiWidgetHostComponent {
+    siModal = inject(SiActionDialogService);
+    gridService = inject(SiGridService);
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    unsubscribe = new Subject();
+    widgetConfig = input.required();
+    remove = output();
+    edit = output();
+    initCompleted = output();
+    card = viewChild.required('card');
+    widgetHost = viewChild.required('widgetHost', { read: ViewContainerRef });
+    labelEdit = t(() => $localize `:@@DASHBOARD.WIDGET.EDIT:Edit`);
+    labelRemove = t(() => $localize `:@@DASHBOARD.WIDGET.REMOVE:Remove`);
+    labelExpand = t(() => $localize `:@@DASHBOARD.WIDGET.EXPAND:Expand`);
+    labelRestore = t(() => $localize `:@@DASHBOARD.WIDGET.RESTORE:Restore`);
+    labelDialogMessage = t(() => $localize `:@@DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.MESSAGE:Do you really want to remove the widget?`);
+    labelDialogHeading = t(() => $localize `:@@DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.HEADING:Remove widget`);
+    labelDialogRemove = t(() => $localize `:@@DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.REMOVE:Remove`);
+    labelDialogCancel = t(() => $localize `:@@DASHBOARD.REMOVE_WIDGET_CONFIRMATION_DIALOG.CANCEL:Cancel`);
+    widgetInstance;
+    widgetRef;
+    /** @defaultValue [] */
+    primaryActions = [];
+    /** @defaultValue [] */
+    secondaryActions = [];
+    /** @defaultValue 'expanded' */
+    actionBarViewType = 'expanded';
+    editable$ = this.gridService.editable$;
+    /** @defaultValue [] */
+    editablePrimaryActions = [];
+    /** @defaultValue [] */
+    editableSecondaryActions = [];
+    /**
+     * @defaultValue
+     * ```
+     * {
+     *   type: 'action',
+     *   label: this.labelEdit,
+     *   icon: 'element-edit',
+     *   iconOnly: true,
+     *   action: () => this.onEdit()
+     * }
+     * ```
+     */
+    editAction = {
+        type: 'action',
+        label: this.labelEdit,
+        icon: 'element-edit',
+        iconOnly: true,
+        action: () => this.onEdit()
+    };
+    /**
+     * @defaultValue
+     * ```
+     * {
+     *   type: 'action',
+     *   label: this.labelRemove,
+     *   icon: 'element-delete',
+     *   iconOnly: true,
+     *   action: () => this.onRemove()
+     * }
+     * ```
+     */
+    removeAction = {
+        type: 'action',
+        label: this.labelRemove,
+        icon: 'element-delete',
+        iconOnly: true,
+        action: () => this.onRemove()
+    };
+    widgetInstanceFooter;
+    get accentLine() {
+        const widgetConfig = this.widgetConfig();
+        return widgetConfig.accentLine ? 'accent-' + widgetConfig.accentLine : '';
+    }
+    ngOnChanges(changes) {
+        if (changes.widgetConfig) {
+            if (this.widgetRef) {
+                if (isSignal(this.widgetRef.instance.config)) {
+                    this.widgetRef.setInput('config', this.widgetConfig());
+                }
+                else {
+                    this.widgetRef.instance.config = this.widgetConfig();
+                }
+            }
+        }
+    }
+    ngOnInit() {
+        this.attachWidgetInstance();
+        this.editable$
+            .pipe(takeUntil(this.unsubscribe))
+            .subscribe(editable => this.setupEditable(editable));
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    attachWidgetInstance() {
+        const widget = this.gridService.getWidget(this.widgetConfig().widgetId);
+        if (widget) {
+            setupWidgetInstance(widget.componentFactory, this.widgetHost(), this.injector, this.envInjector).subscribe({
+                next: (widgetRef) => {
+                    this.widgetInstance = widgetRef.instance;
+                    this.widgetRef = widgetRef;
+                    if (this.widgetInstance.configChange) {
+                        // Note: setTimeout is needed to prevent ExpressionChangedAfterItHasBeenCheckedError
+                        // on web component, who pushes their configuration through an event after being attached
+                        // to the DOM.
+                        this.widgetInstance.configChange
+                            .pipe(takeUntil(this.unsubscribe))
+                            .subscribe(event => setTimeout(() => this.setupEditable(this.editable$.value, event)));
+                    }
+                    if (isSignal(this.widgetInstance.config)) {
+                        this.widgetRef.setInput('config', this.widgetConfig());
+                    }
+                    else {
+                        this.widgetInstance.config = this.widgetConfig();
+                    }
+                    this.widgetInstanceFooter = this.widgetInstance.footer;
+                    this.setupEditable(this.gridService.editable$.value);
+                    this.initCompleted.emit();
+                },
+                error: error => console.error('Error: ', error)
+            });
+        }
+        else {
+            console.error(`Cannot find widget with id ${this.widgetConfig().widgetId}`);
+            this.initCompleted.emit();
+        }
+    }
+    setupEditable(editable, widgetConfig) {
+        widgetConfig ??= {
+            primaryActions: this.widgetInstance?.primaryActions,
+            secondaryActions: this.widgetInstance?.secondaryActions,
+            primaryEditActions: this.widgetInstance?.primaryEditActions,
+            secondaryEditActions: this.widgetInstance?.secondaryEditActions
+        };
+        if (editable) {
+            this.editablePrimaryActions = [];
+            if (this.isEditable()) {
+                this.editablePrimaryActions.push(this.editAction);
+            }
+            if (!this.widgetConfig().isNotRemovable) {
+                this.editablePrimaryActions.push(this.removeAction);
+            }
+            if (widgetConfig.primaryEditActions) {
+                this.primaryActions = [...widgetConfig.primaryEditActions, ...this.editablePrimaryActions];
+            }
+            else {
+                this.primaryActions = this.editablePrimaryActions;
+            }
+            if (widgetConfig.secondaryEditActions) {
+                this.secondaryActions = [
+                    ...widgetConfig.secondaryEditActions,
+                    ...this.editableSecondaryActions
+                ];
+            }
+            else {
+                this.secondaryActions = this.editableSecondaryActions;
+            }
+            this.actionBarViewType = 'expanded';
+        }
+        else {
+            this.actionBarViewType = this.widgetConfig().actionBarViewType ?? 'expanded';
+            this.primaryActions = widgetConfig.primaryActions ?? [];
+            this.secondaryActions = widgetConfig.secondaryActions ?? [];
+        }
+        if (this.widgetInstance?.editable !== undefined) {
+            if (isSignal(this.widgetInstance.editable)) {
+                this.widgetRef?.setInput('editable', editable);
+            }
+            else {
+                this.widgetInstance.editable = editable;
+            }
+        }
+    }
+    doRemove() {
+        const card = this.card();
+        if (card.isExpanded()) {
+            card.restore();
+        }
+        const widgetConfig = this.widgetConfig();
+        if (widgetConfig.id) {
+            this.remove.emit(widgetConfig.id);
+        }
+    }
+    isEditable() {
+        const widgetConfig = this.widgetConfig();
+        return (!widgetConfig.immutable &&
+            !!this.gridService.getWidget(widgetConfig.widgetId)?.componentFactory?.editorComponentName);
+    }
+    onEdit() {
+        this.edit.emit(this.widgetConfig());
+    }
+    onRemove() {
+        this.siModal
+            .showActionDialog({
+            type: 'delete-confirm',
+            message: this.labelDialogMessage,
+            heading: this.labelDialogHeading,
+            deleteBtnName: this.labelDialogRemove,
+            cancelBtnName: this.labelDialogCancel
+        })
+            .subscribe(result => {
+            if (result === 'delete') {
+                this.doRemove();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiWidgetHostComponent, isStandalone: true, selector: "si-widget-host", inputs: { widgetConfig: { classPropertyName: "widgetConfig", publicName: "widgetConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove", edit: "edit", initCompleted: "initCompleted" }, host: { classAttribute: "grid-stack-item" }, viewQueries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true, isSignal: true }, { propertyName: "widgetHost", first: true, predicate: ["widgetHost"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid-stack-item-content p-4\">\n  @if (editable$ | async) {\n    <div class=\"resize-handle\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g>\n          <path d=\"M16 16H18V18H16V16Z\" fill=\"currentColor\" />\n          <path d=\"M11 16H13V18H11V16Z\" fill=\"currentColor\" />\n          <path d=\"M11 11H13V13H11V11Z\" fill=\"currentColor\" />\n          <path d=\"M6 16H8V18H6V16Z\" fill=\"currentColor\" />\n          <path d=\"M16 11H18V13H16V11Z\" fill=\"currentColor\" />\n          <path d=\"M16 6H18V8H16V6Z\" fill=\"currentColor\" />\n        </g>\n      </svg>\n    </div>\n    <div class=\"draggable-overlay\"></div>\n  }\n  <si-dashboard-card\n    #card\n    class=\"h-100 dragging-card\"\n    [ngClass]=\"accentLine\"\n    [expandText]=\"labelExpand\"\n    [restoreText]=\"labelRestore\"\n    [heading]=\"widgetConfig().heading\"\n    [primaryActions]=\"primaryActions\"\n    [secondaryActions]=\"secondaryActions\"\n    [actionBarViewType]=\"actionBarViewType\"\n    [enableExpandInteraction]=\"widgetConfig().expandable\"\n    [imgAlt]=\"widgetConfig().image?.alt\"\n    [imgDir]=\"widgetConfig().image?.dir\"\n    [imgObjectFit]=\"widgetConfig().image?.objectFit\"\n    [imgObjectPosition]=\"widgetConfig().image?.objectPosition\"\n    [imgSrc]=\"widgetConfig().image?.src\"\n  >\n    <div class=\"card-body overflow-auto\" body>\n      <ng-container #widgetHost />\n    </div>\n\n    @if (widgetInstanceFooter) {\n      <div class=\"card-footer\" footer>\n        <ng-container *ngTemplateOutlet=\"widgetInstanceFooter\" />\n      </div>\n    }\n  </si-dashboard-card>\n</div>\n", styles: [":host{display:flex}::ng-deep si-content-action-bar{z-index:500}::ng-deep .ui-droppable.ui-droppable-over>*:not(.ui-droppable){cursor:move!important;pointer-events:inherit!important}::ng-deep .ui-draggable-dragging .dragging-card,::ng-deep .ui-resizable-resizing .dragging-card{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)!important}::ng-deep .ui-draggable-dragging>.grid-stack-item-content,::ng-deep .ui-resizable-resizing>.grid-stack-item-content{box-shadow:none;opacity:1}::ng-deep .ui-resizable-handle{display:block!important}::ng-deep .ui-resizable-se{background-image:none!important;transform:none!important}.resize-handle{inset-block-end:6px;color:var(--element-ui-2);pointer-events:none;position:absolute;inset-inline-end:6px;text-align:center;z-index:10}.draggable-overlay{cursor:move;inset-block-end:24px;inset-block-start:40px;inset-inline:24px;position:absolute;z-index:100}\n"], dependencies: [{ kind: "component", type: SiDashboardCardComponent, selector: "si-dashboard-card", inputs: ["restoreText", "expandText", "enableExpandInteraction", "showMenubar"], outputs: ["expandChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-widget-host', imports: [SiDashboardCardComponent, AsyncPipe, NgClass, NgTemplateOutlet], host: {
+                        class: 'grid-stack-item'
+                    }, template: "<div class=\"grid-stack-item-content p-4\">\n  @if (editable$ | async) {\n    <div class=\"resize-handle\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g>\n          <path d=\"M16 16H18V18H16V16Z\" fill=\"currentColor\" />\n          <path d=\"M11 16H13V18H11V16Z\" fill=\"currentColor\" />\n          <path d=\"M11 11H13V13H11V11Z\" fill=\"currentColor\" />\n          <path d=\"M6 16H8V18H6V16Z\" fill=\"currentColor\" />\n          <path d=\"M16 11H18V13H16V11Z\" fill=\"currentColor\" />\n          <path d=\"M16 6H18V8H16V6Z\" fill=\"currentColor\" />\n        </g>\n      </svg>\n    </div>\n    <div class=\"draggable-overlay\"></div>\n  }\n  <si-dashboard-card\n    #card\n    class=\"h-100 dragging-card\"\n    [ngClass]=\"accentLine\"\n    [expandText]=\"labelExpand\"\n    [restoreText]=\"labelRestore\"\n    [heading]=\"widgetConfig().heading\"\n    [primaryActions]=\"primaryActions\"\n    [secondaryActions]=\"secondaryActions\"\n    [actionBarViewType]=\"actionBarViewType\"\n    [enableExpandInteraction]=\"widgetConfig().expandable\"\n    [imgAlt]=\"widgetConfig().image?.alt\"\n    [imgDir]=\"widgetConfig().image?.dir\"\n    [imgObjectFit]=\"widgetConfig().image?.objectFit\"\n    [imgObjectPosition]=\"widgetConfig().image?.objectPosition\"\n    [imgSrc]=\"widgetConfig().image?.src\"\n  >\n    <div class=\"card-body overflow-auto\" body>\n      <ng-container #widgetHost />\n    </div>\n\n    @if (widgetInstanceFooter) {\n      <div class=\"card-footer\" footer>\n        <ng-container *ngTemplateOutlet=\"widgetInstanceFooter\" />\n      </div>\n    }\n  </si-dashboard-card>\n</div>\n", styles: [":host{display:flex}::ng-deep si-content-action-bar{z-index:500}::ng-deep .ui-droppable.ui-droppable-over>*:not(.ui-droppable){cursor:move!important;pointer-events:inherit!important}::ng-deep .ui-draggable-dragging .dragging-card,::ng-deep .ui-resizable-resizing .dragging-card{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)!important}::ng-deep .ui-draggable-dragging>.grid-stack-item-content,::ng-deep .ui-resizable-resizing>.grid-stack-item-content{box-shadow:none;opacity:1}::ng-deep .ui-resizable-handle{display:block!important}::ng-deep .ui-resizable-se{background-image:none!important;transform:none!important}.resize-handle{inset-block-end:6px;color:var(--element-ui-2);pointer-events:none;position:absolute;inset-inline-end:6px;text-align:center;z-index:10}.draggable-overlay{cursor:move;inset-block-end:24px;inset-block-start:40px;inset-inline:24px;position:absolute;z-index:100}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiGridstackWrapperComponent {
+    /**
+     * Grid items to render inside the gridstack
+     *
+     * @defaultValue []
+     */
+    widgetConfigs = input([]);
+    /**
+     * Whenever gridstack allows to drag, resize or delete the grid item
+     *
+     * @defaultValue false
+     */
+    editable = input(false);
+    /**
+     * Module configuration
+     */
+    gridConfig = input();
+    /**
+     * Emits dashboard grid events.
+     */
+    gridEvent = output();
+    /**
+     * Emits the id of a widget instance that shall be removed.
+     */
+    widgetInstanceRemove = output();
+    /**
+     * Emits the id of a widget instance that shall be edited.
+     */
+    widgetInstanceEdit = output();
+    gridstackContainer = viewChild('gridstackContainer', { read: ViewContainerRef });
+    grid;
+    markedForRender = [];
+    gridItems = [];
+    itemIdAttr = 'item-id';
+    widgetIdSubscriptionMap = new Map();
+    ngZone = inject(NgZone);
+    elementRef = inject(ElementRef);
+    ngOnChanges(changes) {
+        if (changes.widgetConfigs) {
+            const { currentValue, previousValue, firstChange } = changes.widgetConfigs;
+            this.grid?.batchUpdate(true);
+            if (firstChange) {
+                this.markedForRender = currentValue;
+            }
+            else {
+                // Get newly added items
+                const toBeAdded = currentValue.filter((item) => !previousValue.find((i) => i.id === item.id));
+                // Get deleted items
+                const toBeRemoved = previousValue.filter((item) => !currentValue.find((i) => i.id === item.id));
+                if (toBeAdded) {
+                    this.mount(toBeAdded);
+                }
+                if (toBeRemoved) {
+                    this.unmount(toBeRemoved);
+                }
+            }
+            // Detect changes
+            this.updateViewComponents(currentValue);
+            this.updateLayout(currentValue);
+            this.grid?.batchUpdate(false);
+        }
+        if (changes.editable) {
+            const { currentValue, firstChange } = changes.editable;
+            if (!firstChange) {
+                this.grid.enableMove(currentValue);
+                this.grid.enableResize(currentValue);
+            }
+        }
+    }
+    ngOnInit() {
+        const initialViewMode = {
+            disableDrag: !this.editable(),
+            disableResize: !this.editable()
+        };
+        const options = {
+            ...DEFAULT_GRIDSTACK_OPTIONS,
+            ...this.gridConfig()?.gridStackOptions,
+            ...initialViewMode
+        };
+        this.grid = GridStack.init(options, this.elementRef.nativeElement.firstChild);
+        this.hookEvents(this.grid);
+        this.mount(this.markedForRender);
+    }
+    ngOnDestroy() {
+        this.widgetIdSubscriptionMap.forEach(subscriptions => {
+            subscriptions.forEach(subscription => subscription.unsubscribe());
+        });
+        this.widgetIdSubscriptionMap.clear();
+    }
+    mount(items) {
+        if (items.length > 0) {
+            items.forEach(item => {
+                this.addToView(item);
+            });
+        }
+    }
+    unmount(items) {
+        if (items.length > 0) {
+            items.forEach(item => {
+                this.removeFromView(item.id);
+            });
+        }
+    }
+    getLayout() {
+        const gridItems = this.grid?.getGridItems();
+        if (gridItems.length > 0) {
+            const positions = gridItems.map(gridItemHTMLElement => {
+                const id = gridItemHTMLElement.getAttribute('item-id');
+                const x = Number(gridItemHTMLElement.getAttribute('gs-x')) || 0;
+                const y = Number(gridItemHTMLElement.getAttribute('gs-y')) || 0;
+                const width = Number(gridItemHTMLElement.getAttribute('gs-w')) || 0;
+                const height = Number(gridItemHTMLElement.getAttribute('gs-h')) || 0;
+                return { id, x, y, width, height };
+            });
+            return positions;
+        }
+        else {
+            return [];
+        }
+    }
+    updateLayout(widgets) {
+        const tmp = widgets.map(w => ({ ...w, w: w.width, h: w.height }));
+        if (this.grid) {
+            const gridItems = this.grid.getGridItems();
+            gridItems.forEach(gridItem => {
+                const config = tmp.find(widget => widget.id === gridItem.getAttribute('item-id'));
+                this.grid.update(gridItem, { ...config });
+            });
+        }
+    }
+    addToView(item) {
+        const componentRef = this.gridstackContainer().createComponent(SiWidgetHostComponent);
+        componentRef.setInput('widgetConfig', item);
+        const subscriptions = [];
+        const subscriptionRemove = componentRef.instance.remove.subscribe(widgetId => {
+            const widgetSubscriptions = this.widgetIdSubscriptionMap.get(widgetId);
+            if (widgetSubscriptions) {
+                widgetSubscriptions.forEach(sub => sub.unsubscribe());
+            }
+            this.widgetInstanceRemove.emit(widgetId);
+        });
+        subscriptions.push(subscriptionRemove);
+        const subscriptionEdit = componentRef.instance.edit.subscribe(widgetConfig => {
+            this.widgetInstanceEdit.emit(widgetConfig);
+        });
+        subscriptions.push(subscriptionEdit);
+        this.widgetIdSubscriptionMap.set(item.id, subscriptions);
+        const element = componentRef.location.nativeElement;
+        element.setAttribute(this.itemIdAttr, item.id);
+        this.gridItems.push({ id: item.id, component: componentRef });
+        this.grid.makeWidget(element, {
+            w: item.width,
+            h: item.height,
+            x: item.x,
+            y: item.y,
+            minW: item.minWidth,
+            minH: item.minHeight
+        });
+    }
+    removeFromView(widgetId) {
+        const gridItemElements = this.grid.getGridItems();
+        const toRemove = gridItemElements.find((el) => el.getAttribute(this.itemIdAttr) === widgetId);
+        if (toRemove) {
+            this.grid.removeWidget(toRemove);
+            const index = this.gridItems.findIndex(i => i.id === widgetId);
+            this.gridItems[index].component.destroy();
+            this.gridItems.splice(index, 1);
+        }
+    }
+    /**
+     * GridItemComponents are created dynamically, change detection won't trigger as there is no \@Input binding.
+     * We have to update instance and run ChangeDetectionRef manually.
+     */
+    updateViewComponents(newConfigs) {
+        // TODO: lookup by id would fasten the update
+        for (const config of newConfigs) {
+            const gridItem = this.gridItems.find(item => item.id === config.id);
+            if (gridItem) {
+                gridItem.component.setInput('widgetConfig', config);
+            }
+        }
+    }
+    hookEvents(grid) {
+        grid.on('added removed dragstop resizestop disable enable dropped resize resizestart drag dragstart change', (event) => {
+            this.ngZone.run(() => {
+                this.gridEvent.emit({
+                    event,
+                    grid
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridstackWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: SiGridstackWrapperComponent, isStandalone: true, selector: "si-gridstack-wrapper", inputs: { widgetConfigs: { classPropertyName: "widgetConfigs", publicName: "widgetConfigs", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridEvent: "gridEvent", widgetInstanceRemove: "widgetInstanceRemove", widgetInstanceEdit: "widgetInstanceEdit" }, viewQueries: [{ propertyName: "gridstackContainer", first: true, predicate: ["gridstackContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid-stack\">\n  <ng-container #gridstackContainer />\n</div>\n", styles: ["::ng-deep .si-grid-stack-placeholder{background-color:var(--element-base-information);opacity:.3}:host{display:flex;flex:1 1 0;flex-direction:column;margin-inline-start:-8px;margin-inline-end:-8px;margin-block-start:-8px}.grid-stack{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridstackWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-gridstack-wrapper', template: "<div class=\"grid-stack\">\n  <ng-container #gridstackContainer />\n</div>\n", styles: ["::ng-deep .si-grid-stack-placeholder{background-color:var(--element-base-information);opacity:.3}:host{display:flex;flex:1 1 0;flex-direction:column;margin-inline-start:-8px;margin-inline-end:-8px;margin-block-start:-8px}.grid-stack{display:block}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 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.
+ */
+class SiWidgetInstanceEditorDialogComponent {
+    /**
+     * Input for the widget instance configuration. It is used to populate the
+     * widget editor.
+     */
+    widgetConfig = model.required();
+    /**
+     * Input for the widget definition. It is required to retrieve the component
+     * factory to instantiate the widget editor.
+     */
+    widget = input.required();
+    /**
+     * Emits the edited widget instance configuration if the user confirms by
+     * saving, or `undefined` if the user cancels the dialog.
+     */
+    closed = output();
+    /**
+     * Emits when the editor instantiation is completed.
+     */
+    editorSetupCompleted = output();
+    editorHost = viewChild.required('editorHost', { read: ViewContainerRef });
+    /** Indicates if the current config is valid or not. If invalid, the save button will be disabled. */
+    invalidConfig = signal(false);
+    showNextButton = computed(() => this.editorWizardState() !== undefined ? true : false);
+    disableNextButton = computed(() => {
+        const wizardState = this.editorWizardState();
+        if (!wizardState) {
+            return true;
+        }
+        else if (!wizardState.hasNext) {
+            return true;
+        }
+        else if (wizardState.disableNext !== undefined) {
+            return wizardState.disableNext;
+        }
+        else {
+            return false;
+        }
+    });
+    showPreviousButton = computed(() => !!this.editorWizardState());
+    disablePreviousButton = computed(() => {
+        const wizardState = this.editorWizardState();
+        return wizardState ? !wizardState.hasPrevious : true;
+    });
+    labelSave = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.SAVE:Save`);
+    labelCancel = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.CANCEL:Cancel`);
+    labelPrevious = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.PREVIOUS:Previous`);
+    labelNext = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.NEXT:Next`);
+    labelDialogMessage = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.MESSAGE:The widget configuration changed. Do you want to discard the changes?`);
+    labelDialogHeading = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.HEADING:Widget configuration changed`);
+    labelDialogSave = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.SAVE:Save`);
+    labelDialogDiscard = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.DISCARD:Discard`);
+    labelDialogCancel = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.DISCARD_CONFIG_CHANGE_DIALOG.CANCEL:Cancel`);
+    /**
+     * 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 = signal(false);
+    widgetInstanceEditor;
+    editorWizardState = signal(undefined);
+    subscriptions = [];
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    dialogService = inject(SiActionDialogService);
+    ngOnInit() {
+        setupWidgetEditor(this.widget().componentFactory, this.editorHost(), this.injector, this.envInjector).subscribe(componentRef => {
+            this.widgetInstanceEditor = componentRef.instance;
+            if (isSignal(this.widgetInstanceEditor.config)) {
+                componentRef.setInput('config', this.widgetConfig());
+            }
+            else {
+                this.widgetInstanceEditor.config = this.widgetConfig();
+            }
+            // To be used by webcomponent wrapper
+            if ('statusChangesHandler' in this.widgetInstanceEditor) {
+                this.widgetInstanceEditor.statusChangesHandler = this.handleStatusChanges.bind(this);
+            }
+            let hasStatusChangesEmitter = false;
+            if (this.widgetInstanceEditor.statusChanges) {
+                hasStatusChangesEmitter = true;
+                this.subscriptions.push(this.widgetInstanceEditor.statusChanges.subscribe(statusChanges => {
+                    this.handleStatusChanges(statusChanges);
+                }));
+            }
+            if (this.widgetInstanceEditor.configChange) {
+                this.subscriptions.push(this.widgetInstanceEditor.configChange.subscribe(config => {
+                    if (!hasStatusChangesEmitter) {
+                        this.invalidConfig.set(!!config.invalid);
+                        this.widgetConfigModified.set(true);
+                    }
+                }));
+            }
+            if (this.isEditorWizdard(this.widgetInstanceEditor)) {
+                this.editorWizardState.set(this.widgetInstanceEditor.state);
+                if (this.widgetInstanceEditor.stateChange) {
+                    this.subscriptions.push(this.widgetInstanceEditor.stateChange.subscribe(state => {
+                        this.editorWizardState.set(state);
+                    }));
+                }
+            }
+            this.editorSetupCompleted.emit();
+        });
+    }
+    ngOnDestroy() {
+        this.tearDownEditor();
+    }
+    onCancel() {
+        if (!this.widgetConfigModified()) {
+            this.closed.emit(undefined);
+        }
+        else {
+            this.dialogService
+                .showActionDialog({
+                type: 'edit-discard',
+                disableSave: this.invalidConfig(),
+                message: this.labelDialogMessage,
+                heading: this.labelDialogHeading,
+                saveBtnName: this.labelDialogSave,
+                discardBtnName: this.labelDialogDiscard,
+                cancelBtnName: this.labelDialogCancel,
+                disableSaveMessage: this.labelDialogMessage,
+                disableSaveDiscardBtnName: this.labelDialogDiscard
+            })
+                .subscribe(result => {
+                if (result === 'discard') {
+                    this.closed.emit(undefined);
+                }
+                else if (result === 'save') {
+                    this.closed.emit(this.widgetConfig());
+                }
+            });
+        }
+    }
+    onNext() {
+        if (this.isEditorWizdard(this.widgetInstanceEditor)) {
+            this.widgetInstanceEditor.next();
+            this.editorWizardState.set(this.widgetInstanceEditor.state);
+        }
+    }
+    onPrevious() {
+        if (this.isEditorWizdard(this.widgetInstanceEditor) && this.editorWizardState()?.hasPrevious) {
+            this.widgetInstanceEditor.previous();
+            this.editorWizardState.set(this.widgetInstanceEditor.state);
+        }
+    }
+    onSave() {
+        // In case the widget instance editor did not only change values of the config
+        // object, but set a new config object reference, we need to grab it and replace
+        // our local config object.
+        if (this.widgetInstanceEditor?.config) {
+            if (isSignal(this.widgetInstanceEditor.config)) {
+                this.widgetConfig.set(this.widgetInstanceEditor?.config());
+            }
+            else {
+                this.widgetConfig.set(this.widgetInstanceEditor?.config);
+            }
+        }
+        this.closed.emit(this.widgetConfig());
+    }
+    tearDownEditor() {
+        this.editorWizardState.set(undefined);
+        this.widgetInstanceEditor = undefined;
+        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions = [];
+    }
+    isEditorWizdard(editor) {
+        return !!editor && 'state' in editor;
+    }
+    handleStatusChanges(statusChanges) {
+        if (statusChanges.invalid !== undefined) {
+            this.invalidConfig.set(statusChanges.invalid);
+        }
+        if (statusChanges.modified !== undefined) {
+            this.widgetConfigModified.set(statusChanges.modified);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetInstanceEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiWidgetInstanceEditorDialogComponent, isStandalone: true, selector: "si-widget-instance-editor-dialog", inputs: { widgetConfig: { classPropertyName: "widgetConfig", publicName: "widgetConfig", isSignal: true, isRequired: true, transformFunction: null }, widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { widgetConfig: "widgetConfigChange", closed: "closed", editorSetupCompleted: "editorSetupCompleted" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"si-layout-fixed-height mb-8 mx-0 overflow-auto px-2 pt-2\">\n  <ng-container #editorHost />\n</div>\n\n<div class=\"editor-footer px-2\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">{{\n    labelCancel | translate\n  }}</button>\n\n  @if (showPreviousButton()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary\"\n      [disabled]=\"disablePreviousButton()\"\n      (click)=\"onPrevious()\"\n      >{{ labelPrevious | translate }}</button\n    >\n  }\n  @if (showNextButton()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary\"\n      [disabled]=\"disableNextButton()\"\n      (click)=\"onNext()\"\n      >{{ labelNext | translate }}</button\n    >\n  }\n\n  <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"invalidConfig()\" (click)=\"onSave()\">{{\n    labelSave | translate\n  }}</button>\n</div>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column;margin-inline:-4px;margin-block-start:-4px}.editor-footer{align-items:center;display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.editor-footer>*{margin-inline-start:16px}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetInstanceEditorDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-widget-instance-editor-dialog', imports: [SiTranslateModule], template: "<div class=\"si-layout-fixed-height mb-8 mx-0 overflow-auto px-2 pt-2\">\n  <ng-container #editorHost />\n</div>\n\n<div class=\"editor-footer px-2\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">{{\n    labelCancel | translate\n  }}</button>\n\n  @if (showPreviousButton()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary\"\n      [disabled]=\"disablePreviousButton()\"\n      (click)=\"onPrevious()\"\n      >{{ labelPrevious | translate }}</button\n    >\n  }\n  @if (showNextButton()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary\"\n      [disabled]=\"disableNextButton()\"\n      (click)=\"onNext()\"\n      >{{ labelNext | translate }}</button\n    >\n  }\n\n  <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"invalidConfig()\" (click)=\"onSave()\">{{\n    labelSave | translate\n  }}</button>\n</div>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column;margin-inline:-4px;margin-block-start:-4px}.editor-footer{align-items:center;display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.editor-footer>*{margin-inline-start:16px}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+const NEW_WIDGET_PREFIX = 'new-widget-';
+let idCounter = 1;
+/**
+ * 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.
+ */
+class SiGridComponent {
+    storeSubscription;
+    gridService = inject(SiGridService);
+    modalService = inject(SiModalService);
+    widgetStorage = inject(SI_WIDGET_STORE);
+    /**
+     * Configuration options for a grid instance. Default is the optional
+     * value from the {@link SI_DASHBOARD_CONFIGURATION}.
+     *
+     * @defaultValue inject(SI_DASHBOARD_CONFIGURATION)?.grid
+     */
+    gridConfig = input(inject(SI_DASHBOARD_CONFIGURATION)?.grid);
+    /**
+     * Sets the grid into editable mode, in which the widget instances can be moved,
+     * resized, removed or new ones added.
+     *
+     * @defaultValue false
+     */
+    editable = model(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 = false;
+    /**
+     * An optional, but recommended dashboard id that is used in persistence and passed
+     * to the widget store for saving and loading data.
+     */
+    dashboardId = input();
+    /**
+     * 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 [] */
+    widgetCatalog = input([]);
+    /**
+     * 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 */
+    emitWidgetInstanceEditEvents = input(false);
+    /**
+     * Option to turn off the loading spinner on save and load operations.
+     *
+     * @defaultValue false
+     */
+    hideProgressIndicator = input(false);
+    /**
+     * Option to configure a custom widget instance editor dialog component. The component provides the
+     * editor hosting and the buttons to save and cancel.
+     */
+    widgetInstanceEditorDialogComponent = input();
+    /**
+     * 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 = output();
+    /**
+     * Modified state that is emitted in the `isModified` output. Should only be
+     changed using the {@link setModified} method.
+     */
+    modified = false;
+    /**
+     * Emits to notify about edit events of widget instances. Only emits
+     * if `emitWidgetInstanceEditEvents` is set to `true`.
+     */
+    widgetInstanceEdit = output();
+    /**
+     * All widget configuration objects of the visible widget instances.
+     *
+     * @internal
+     */
+    visibleWidgetInstances$ = new BehaviorSubject([]);
+    /**
+     * All widget instance configs that are on the grid by loading from the widget
+     * storage. Thus, these widget are persisted.
+     *
+     * @defaultValue []
+     * @internal
+     */
+    persistedWidgetInstances = [];
+    /**
+     * 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 = [];
+    /**
+     * 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 = [];
+    /** @defaultValue viewChild.required(SiGridstackWrapperComponent) */
+    gridStackWrapper = viewChild.required(SiGridstackWrapperComponent);
+    /**
+     * Service used to indicate load and save indication.
+     * @deprecated Use `isLoading` instead.
+     *
+     * @defaultValue inject(SiLoadingService)
+     */
+    loadingService = inject(SiLoadingService);
+    /**
+     * Indication for load and save operations.
+     */
+    isLoading = new BehaviorSubject(false);
+    initialLoad = true;
+    get showEmptyState() {
+        return !this.initialLoad && this.visibleWidgetInstances$.value.length === 0;
+    }
+    ngOnChanges(changes) {
+        // Reload widgets if the dashboardId changes. Do not load on inital
+        // dashboardId property binding as first load will be done in ngOnInit()
+        if (changes.dashboardId && !changes.dashboardId.firstChange) {
+            queueMicrotask(() => this.loadAndSubscribeWidgets());
+        }
+        if (changes.editable) {
+            if (changes.editable.currentValue) {
+                this.edit();
+            }
+            else {
+                this.cancel();
+            }
+        }
+        if (changes.widgetCatalog) {
+            this.gridService.widgetCatalog = this.widgetCatalog();
+        }
+    }
+    ngOnInit() {
+        queueMicrotask(() => this.loadAndSubscribeWidgets());
+        this.gridService.widgetCatalog = this.widgetCatalog();
+    }
+    ngOnDestroy() {
+        this.storeSubscription?.unsubscribe();
+        this.isLoading.complete();
+        this.loadingService.counter.complete();
+    }
+    /**
+     * Set dashboard grid in editable mode to modify widget instances.
+     */
+    edit() {
+        if (!this.editableInternal) {
+            this.transientWidgetInstances = [];
+            this.markedForRemoval = [];
+            this.setModified(false);
+            this.editableInternal = true;
+            this.editable.set(true);
+            this.gridService.editable$.next(this.editableInternal);
+        }
+    }
+    /**
+     * Persists the current widget instances to the widget storage and
+     * changes the editable and isModified modes.
+     */
+    save() {
+        if (!this.editableInternal) {
+            return;
+        }
+        this.isLoading.next(true);
+        this.loadingService.counter.next(1);
+        // Update position information and remove temporary ids
+        const widgets = this.updateWidgetPositions(this.visibleWidgetInstances$.value).map(widget => widget.id.startsWith(NEW_WIDGET_PREFIX) ? { ...widget, id: undefined } : widget);
+        const toRemove = this.markedForRemoval.filter(widget => !widget.id.startsWith(NEW_WIDGET_PREFIX));
+        this.widgetStorage
+            .save(widgets, toRemove, this.dashboardId())
+            .pipe(take(1))
+            .subscribe({
+            next: (value) => {
+                this.setModified(false);
+                this.editableInternal = false;
+                this.editable.set(false);
+                this.gridService.editable$.next(this.editableInternal);
+                this.isLoading.next(false);
+                this.loadingService.counter.next(0);
+            },
+            error: (err) => {
+                console.error('Saving dashboard configuration failed.', err);
+                this.isLoading.next(false);
+                this.loadingService.counter.next(0);
+            }
+        });
+    }
+    /**
+     * Cancel current changes and restore last saved state.
+     */
+    cancel() {
+        if (!this.editableInternal) {
+            return;
+        }
+        if (this.modified) {
+            this.visibleWidgetInstances$.next([...this.persistedWidgetInstances]);
+            this.setModified(false);
+        }
+        this.editableInternal = false;
+        if (this.editable()) {
+            this.editable.set(false);
+        }
+        this.gridService.editable$.next(this.editableInternal);
+    }
+    /**
+     * 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) {
+        const id = `${NEW_WIDGET_PREFIX}${idCounter++}`;
+        const newWidget = { ...widgetInstanceConfig, id };
+        const nextWidgets = this.updateWidgetPositions([
+            ...this.visibleWidgetInstances$.value,
+            newWidget
+        ]);
+        this.transientWidgetInstances.push(newWidget);
+        this.visibleWidgetInstances$.next(nextWidgets);
+    }
+    /**
+     * 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) {
+        const widgetToRemove = this.visibleWidgetInstances$.value.find(widget => widget.id === widgetInstanceId);
+        if (widgetToRemove) {
+            this.markedForRemoval.push(widgetToRemove);
+            let nextWidgets = this.visibleWidgetInstances$.value.filter(widget => widget.id !== widgetInstanceId);
+            nextWidgets = this.updateWidgetPositions(nextWidgets);
+            this.visibleWidgetInstances$.next(nextWidgets);
+        }
+    }
+    /**
+     * 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) {
+        // Need to edit a clone to avoid runtime editing
+        const widgetConfigClone = JSON.parse(JSON.stringify(widgetInstanceConfig));
+        if (this.emitWidgetInstanceEditEvents()) {
+            this.widgetInstanceEdit.emit(widgetConfigClone);
+        }
+        else {
+            const widget = this.gridService.getWidget(widgetConfigClone.widgetId);
+            const config = {
+                animated: true,
+                keyboard: true,
+                inputValues: {
+                    widgetConfig: widgetConfigClone,
+                    widget
+                },
+                class: widget?.componentFactory.editorModalClass ?? 'modal-xl'
+            };
+            const widgetInstanceEditorDialogComponent = this.widgetInstanceEditorDialogComponent();
+            const componentType = widgetInstanceEditorDialogComponent ?? SiWidgetInstanceEditorDialogComponent;
+            const modalRef = this.modalService.show(componentType, config);
+            const subscription = modalRef.content.closed.subscribe(editedWidgetConfig => {
+                subscription.unsubscribe();
+                modalRef.hide();
+                if (editedWidgetConfig) {
+                    this.updateWidgetInstance(editedWidgetConfig);
+                }
+            });
+        }
+    }
+    /**
+     * 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) {
+        const index = this.visibleWidgetInstances$.value.findIndex(wc => wc.id === editedWidgetConfig.id);
+        if (index >= 0) {
+            let nextWidgets = this.updateWidgetPositions([...this.visibleWidgetInstances$.value]);
+            nextWidgets[index] = editedWidgetConfig;
+            nextWidgets = this.updateWidgetPositions(nextWidgets);
+            this.visibleWidgetInstances$.next(nextWidgets);
+            setTimeout(() => this.setModified(true), 0);
+        }
+    }
+    handleGridEvent(event) {
+        const relevantEventTypes = ['added', 'removed', 'dragstop', 'resizestop'];
+        if (this.editable() && relevantEventTypes.includes(event.event.type)) {
+            // Make sure the widget config always holds the latest position information
+            const widgets = this.updateWidgetPositions(this.visibleWidgetInstances$.value);
+            this.visibleWidgetInstances$.next(widgets);
+            setTimeout(() => this.setModified(true), 0);
+        }
+    }
+    loadAndSubscribeWidgets() {
+        this.storeSubscription?.unsubscribe();
+        // remove existing widgets
+        this.visibleWidgetInstances$.next([]);
+        // Only when we change the dashboard id, this method is invoked
+        // directly. In this case we start the progress here and we stop
+        // it in the `next` subscription. The subscription stays hot and
+        // also get called when save() is invoked. In this case, we do not
+        // want to decrease the progress counter as we do it in the save
+        // subscription. To handle this, we use the boolean marker `initialLoad`.
+        this.initialLoad = true;
+        this.isLoading.next(true);
+        this.loadingService.counter.next(1);
+        this.storeSubscription = this.widgetStorage.load(this.dashboardId()).subscribe({
+            next: widgets => {
+                this.visibleWidgetInstances$.next(widgets);
+                this.persistedWidgetInstances = widgets;
+                if (this.initialLoad) {
+                    this.initialLoad = false;
+                    this.isLoading.next(false);
+                    this.loadingService.counter.next(0);
+                }
+            },
+            error: err => {
+                console.error('Loading dashboard configuration failed', err);
+                this.isLoading.next(false);
+                this.loadingService.counter.next(0);
+            }
+        });
+    }
+    updateWidgetPositions(widgetConfigs) {
+        const layout = this.gridStackWrapper().getLayout();
+        const widgets = widgetConfigs.map(widget => {
+            const position = layout.find(p => p.id === widget.id);
+            if (position) {
+                return {
+                    ...widget,
+                    x: position.x,
+                    y: position.y,
+                    width: position.width,
+                    height: position.height
+                };
+            }
+            else {
+                return widget;
+            }
+        });
+        return widgets || [];
+    }
+    setModified(modified) {
+        if (this.modified !== modified) {
+            this.modified = modified;
+            this.isModified.emit(this.modified);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiGridComponent, isStandalone: true, selector: "si-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: false, transformFunction: null }, widgetCatalog: { classPropertyName: "widgetCatalog", publicName: "widgetCatalog", isSignal: true, isRequired: false, transformFunction: null }, emitWidgetInstanceEditEvents: { classPropertyName: "emitWidgetInstanceEditEvents", publicName: "emitWidgetInstanceEditEvents", isSignal: true, isRequired: false, transformFunction: null }, hideProgressIndicator: { classPropertyName: "hideProgressIndicator", publicName: "hideProgressIndicator", isSignal: true, isRequired: false, transformFunction: null }, widgetInstanceEditorDialogComponent: { classPropertyName: "widgetInstanceEditorDialogComponent", publicName: "widgetInstanceEditorDialogComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editable: "editableChange", isModified: "isModified", widgetInstanceEdit: "widgetInstanceEdit" }, providers: [SiGridService, SiLoadingService], viewQueries: [{ propertyName: "gridStackWrapper", first: true, predicate: SiGridstackWrapperComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showEmptyState) {\n  <ng-content select=\"[empty-state]\" />\n}\n<si-gridstack-wrapper\n  [widgetConfigs]=\"(visibleWidgetInstances$ | async) ?? []\"\n  [gridConfig]=\"gridConfig()\"\n  [editable]=\"editable()\"\n  [siLoading]=\"!hideProgressIndicator() && initialLoad && (isLoading | async)!\"\n  [blocking]=\"false\"\n  (gridEvent)=\"handleGridEvent($event)\"\n  (widgetInstanceRemove)=\"removeWidgetInstance($event)\"\n  (widgetInstanceEdit)=\"editWidgetInstance($event)\"\n/>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column}::ng-deep .grid-stack-animate,::ng-deep .grid-stack-animate .grid-stack-item{transition-property:inset-inline-start,inset-block-start}\n"], dependencies: [{ kind: "component", type: SiGridstackWrapperComponent, selector: "si-gridstack-wrapper", inputs: ["widgetConfigs", "editable", "gridConfig"], outputs: ["gridEvent", "widgetInstanceRemove", "widgetInstanceEdit"] }, { kind: "directive", type: SiLoadingSpinnerDirective, selector: "[siLoading]", inputs: ["siLoading", "blocking", "initialDelay"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-grid', imports: [SiGridstackWrapperComponent, SiLoadingSpinnerDirective, AsyncPipe], providers: [SiGridService, SiLoadingService], template: "@if (showEmptyState) {\n  <ng-content select=\"[empty-state]\" />\n}\n<si-gridstack-wrapper\n  [widgetConfigs]=\"(visibleWidgetInstances$ | async) ?? []\"\n  [gridConfig]=\"gridConfig()\"\n  [editable]=\"editable()\"\n  [siLoading]=\"!hideProgressIndicator() && initialLoad && (isLoading | async)!\"\n  [blocking]=\"false\"\n  (gridEvent)=\"handleGridEvent($event)\"\n  (widgetInstanceRemove)=\"removeWidgetInstance($event)\"\n  (widgetInstanceEdit)=\"editWidgetInstance($event)\"\n/>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column}::ng-deep .grid-stack-animate,::ng-deep .grid-stack-animate .grid-stack-item{transition-property:inset-inline-start,inset-block-start}\n"] }]
+        }] });
+
+/**
+ * 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.
+ */
+const createWidgetConfig = (widget) => {
+    const widgetConfig = {
+        heading: widget.name,
+        widgetId: widget.id,
+        version: widget.version,
+        minWidth: 3,
+        ...widget.defaults,
+        payload: { ...widget.payload }
+    };
+    return widgetConfig;
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 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.
+ */
+class SiWidgetCatalogComponent {
+    /**
+     * Placeholder text for the search input field in the widget catalog.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`)
+     * ```
+     */
+    searchPlaceholder = input(t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`));
+    /**
+     * 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 = output();
+    /**
+     * View defines if the catalog widget list or the widget editor is visible.
+     *
+     * @internal
+     * @defaultValue 'list'
+     */
+    view = signal('list');
+    editorHost = viewChild.required('editorHost', { read: 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 = [];
+    /**
+     * Holds the search term from the catalog to be visible when going back
+     * by pressing the previous button from the widget edit view.
+     */
+    searchTerm = '';
+    /**
+     * Array used to hold the search result on the widget catalog.
+     * @defaultValue [] */
+    filteredWidgetCatalog = [];
+    selected = signal(undefined);
+    widgetConfig;
+    hasEditor = signal(false);
+    labelCancel = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.CANCEL:Cancel`);
+    labelPrevious = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.PREVIOUS:Previous`);
+    labelNext = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.NEXT:Next`);
+    labelAdd = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.ADD:Add`);
+    labelEmpty = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.EMPTY:Empty`);
+    labelDialogHeading = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.HEADING:Widget configuration changed`);
+    labelDialogCancel = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.CANCEL:Cancel`);
+    labelDialogMessage = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.MESSAGE:The widget configuration changed. Do you want to discard the changes?`);
+    labelDialogDiscard = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.DISCARD_CONFIG_CHANGE_DIALOG.DISCARD:Discard`);
+    showAddButton = computed(() => this.view() === 'list' ? !this.hasEditor() : true);
+    showNextButton = computed(() => this.view() === 'list' ? this.hasEditor() : this.editorWizardState() !== undefined);
+    showPreviousButton = computed(() => this.view() === 'editor');
+    disableAddButton = computed(() => !this.selected() || this.invalidConfig());
+    disableNextButton = computed(() => {
+        const wizardState = this.editorWizardState();
+        if (this.view() === 'list') {
+            return !this.selected();
+        }
+        else if (!wizardState) {
+            return true;
+        }
+        else if (!wizardState.hasNext) {
+            return true;
+        }
+        else if (wizardState.disableNext !== undefined) {
+            return wizardState.disableNext;
+        }
+        else {
+            return false;
+        }
+    });
+    /** Indicates if the current config is valid or not. If invalid, the add button is disabled. */
+    invalidConfig = signal(false);
+    /**
+     * 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 = false;
+    widgetInstanceEditor;
+    editorWizardState = signal(undefined);
+    widgetInstanceEditorRef;
+    subscriptions = [];
+    dialogService = inject(SiActionDialogService);
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    ngOnInit() {
+        this.filteredWidgetCatalog = this.widgetCatalog;
+        if (this.widgetCatalog.length > 0) {
+            this.selectWidget(this.widgetCatalog[0]);
+        }
+    }
+    ngOnDestroy() {
+        this.tearDownEditor();
+    }
+    onSearch(searchTerm) {
+        if (!searchTerm || searchTerm.trim().length === 0) {
+            this.searchTerm = '';
+            this.filteredWidgetCatalog = this.widgetCatalog;
+        }
+        else {
+            this.searchTerm = searchTerm;
+            this.filteredWidgetCatalog = this.widgetCatalog.filter(wd => wd.name.toLowerCase().includes(searchTerm.trim().toLowerCase()));
+        }
+        if (this.filteredWidgetCatalog.length > 0) {
+            this.selectWidget(this.filteredWidgetCatalog[0]);
+        }
+        else {
+            this.selectWidget(undefined);
+        }
+    }
+    onCancel() {
+        if (!this.widgetConfigModified) {
+            this.closed.emit(undefined);
+        }
+        else {
+            this.dialogService
+                .showActionDialog({
+                type: 'edit-discard',
+                disableSave: true,
+                heading: this.labelDialogHeading,
+                cancelBtnName: this.labelDialogCancel,
+                disableSaveMessage: this.labelDialogMessage,
+                disableSaveDiscardBtnName: this.labelDialogDiscard
+            })
+                .subscribe(result => {
+                if (result === 'discard') {
+                    this.closed.emit(undefined);
+                }
+            });
+        }
+    }
+    onNext() {
+        if (this.view() === 'list') {
+            this.setupWidgetInstanceEditor();
+        }
+        else {
+            if (this.isEditorWizdard(this.widgetInstanceEditor)) {
+                this.widgetInstanceEditor.next();
+                this.editorWizardState.set(this.widgetInstanceEditor.state);
+            }
+        }
+    }
+    onPrevious() {
+        if (this.isEditorWizdard(this.widgetInstanceEditor) && this.editorWizardState()?.hasPrevious) {
+            this.widgetInstanceEditor.previous();
+            this.editorWizardState.set(this.widgetInstanceEditor.state);
+        }
+        else if (!this.widgetConfigModified) {
+            this.setupCatalog();
+        }
+        else {
+            this.dialogService
+                .showActionDialog({
+                type: 'edit-discard',
+                disableSave: true,
+                heading: this.labelDialogHeading,
+                cancelBtnName: this.labelDialogCancel,
+                message: this.labelDialogMessage,
+                discardBtnName: this.labelDialogDiscard
+            })
+                .subscribe(result => {
+                if (result === 'discard') {
+                    this.setupCatalog();
+                }
+            });
+        }
+    }
+    setupWidgetInstanceEditor() {
+        const selected = this.selected();
+        if (!selected) {
+            return;
+        }
+        this.tearDownEditor();
+        this.view.set('editor');
+        this.widgetConfig = createWidgetConfig(selected);
+        setupWidgetEditor(selected.componentFactory, this.editorHost(), this.injector, this.envInjector).subscribe({
+            next: componentRef => {
+                this.widgetInstanceEditorRef = componentRef;
+                this.widgetInstanceEditor = componentRef.instance;
+                if (isSignal(this.widgetInstanceEditor.config)) {
+                    this.widgetInstanceEditorRef.setInput('config', this.widgetConfig);
+                }
+                else {
+                    this.widgetInstanceEditor.config = this.widgetConfig;
+                }
+                // To be used by webcomponent wrapper
+                if ('statusChangesHandler' in this.widgetInstanceEditor) {
+                    this.widgetInstanceEditor.statusChangesHandler = this.handleStatusChanges.bind(this);
+                }
+                let hasStatusChangesEmitter = false;
+                if (this.widgetInstanceEditor.statusChanges) {
+                    hasStatusChangesEmitter = true;
+                    this.subscriptions.push(this.widgetInstanceEditor.statusChanges.subscribe(statusChanges => {
+                        this.handleStatusChanges(statusChanges);
+                    }));
+                }
+                if (this.widgetInstanceEditor.configChange) {
+                    this.subscriptions.push(this.widgetInstanceEditor.configChange.subscribe(config => {
+                        if (!hasStatusChangesEmitter) {
+                            this.invalidConfig.set(!!config.invalid);
+                            this.widgetConfigModified = true;
+                        }
+                    }));
+                }
+                if (this.isEditorWizdard(this.widgetInstanceEditor)) {
+                    this.editorWizardState.set(this.widgetInstanceEditor.state);
+                    if (this.widgetInstanceEditor.stateChange) {
+                        this.subscriptions.push(this.widgetInstanceEditor.stateChange.subscribe(state => {
+                            this.editorWizardState.set(state);
+                        }));
+                    }
+                }
+            },
+            error: error => {
+                console.error(error);
+            }
+        });
+    }
+    tearDownEditor() {
+        this.invalidConfig.set(false);
+        this.widgetConfigModified = false;
+        this.editorWizardState.set(undefined);
+        this.widgetInstanceEditor = undefined;
+        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions = [];
+    }
+    setupCatalog() {
+        if (this.editorHost().length > 0) {
+            this.editorHost().remove(0);
+        }
+        this.tearDownEditor();
+        this.widgetConfig = undefined;
+        this.view.set('list');
+    }
+    onAddWidget() {
+        const selected = this.selected();
+        if (!selected) {
+            return;
+        }
+        if (!this.widgetConfig) {
+            this.widgetConfig = createWidgetConfig(selected);
+        }
+        else {
+            // Make sure we use the same config object as the editor
+            if (isSignal(this.widgetInstanceEditor?.config)) {
+                this.widgetConfig = this.widgetInstanceEditor?.config() ?? this.widgetConfig;
+            }
+            else {
+                this.widgetConfig = this.widgetInstanceEditor?.config ?? this.widgetConfig;
+            }
+        }
+        this.closed.emit(this.widgetConfig);
+    }
+    selectWidget(widget) {
+        this.selected.set(widget);
+        if (widget?.componentFactory?.editorComponentName) {
+            this.hasEditor.set(true);
+        }
+        else {
+            this.hasEditor.set(false);
+        }
+    }
+    isEditorWizdard(editor) {
+        return !!editor && 'state' in editor;
+    }
+    handleStatusChanges(statusChanges) {
+        if (statusChanges.invalid !== undefined) {
+            this.invalidConfig.set(statusChanges.invalid);
+        }
+        if (statusChanges.modified !== undefined) {
+            this.widgetConfigModified = statusChanges.modified;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiWidgetCatalogComponent, isStandalone: true, selector: "si-widget-catalog", inputs: { searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"si-layout-fixed-height mb-8 mx-0 overflow-auto px-2 pt-2\">\n  @if (view() === 'list') {\n    <div class=\"si-layout-fixed-height\">\n      <div class=\"mx-0\">\n        <si-search-bar\n          class=\"w-100\"\n          colorVariant=\"base-1\"\n          showIcon=\"true\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [value]=\"searchTerm\"\n          (searchChange)=\"onSearch($event)\"\n        />\n      </div>\n      <div\n        class=\"si-layout-fixed-height text-pre-wrap text-break overflow-y-auto widget-list mt-6 bg-base-1\"\n      >\n        @if (filteredWidgetCatalog.length > 0) {\n          <div class=\"si-layout-fixed-height list-group\">\n            @for (widget of filteredWidgetCatalog; track $index) {\n              <button\n                type=\"button\"\n                class=\"list-group-item list-group-item-action d-flex\"\n                [class.active]=\"selected() === widget\"\n                (click)=\"selectWidget(widget)\"\n              >\n                <si-circle-status class=\"my-n4 me-5\" [icon]=\"widget.iconClass\" />\n                <div class=\"d-flex flex-column align-items-start\">\n                  <span class=\"si-title-2\">{{ widget.name }}</span>\n                  <span class=\"si-body-2\">{{ widget.description?.trim() }}</span>\n                </div>\n              </button>\n            }\n          </div>\n        } @else {\n          <div>\n            <si-empty-state icon=\"element-report\" [heading]=\"labelEmpty\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <ng-container #editorHost />\n</div>\n\n<div class=\"catalog-footer py-0 px-2\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">{{\n    labelCancel | translate\n  }}</button>\n  @if (showPreviousButton()) {\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onPrevious()\">{{\n      labelPrevious | translate\n    }}</button>\n  }\n  @if (showNextButton()) {\n    <button\n      type=\"button\"\n      class=\"btn\"\n      [class.btn-primary]=\"view() === 'list'\"\n      [class.btn-secondary]=\"view() !== 'list'\"\n      [disabled]=\"disableNextButton()\"\n      (click)=\"onNext()\"\n      >{{ labelNext | translate }}</button\n    >\n  }\n  @if (showAddButton()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"disableAddButton()\"\n      (click)=\"onAddWidget()\"\n      >{{ labelAdd | translate }}</button\n    >\n  }\n</div>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column;margin-inline:-4px;margin-block-start:-4px}.widget-list{background-color:var(--element-base-1);border:1px solid var(--element-ui-4);border-radius:var(--element-radius-2);overflow-x:auto}.list-group-item{border-inline-color:transparent;border-radius:0}.catalog-footer{align-items:center;display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.catalog-footer>*{margin-inline-start:16px}\n"], dependencies: [{ kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled"], outputs: ["searchChange"] }, { kind: "component", type: SiCircleStatusComponent, selector: "si-circle-status", inputs: ["status", "color", "icon", "size", "eventOut", "eventIcon", "blink", "blinkPulse", "ariaLabel"] }, { kind: "component", type: SiEmptyStateComponent, selector: "si-empty-state", inputs: ["icon", "heading", "content"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-widget-catalog', imports: [SiSearchBarComponent, SiCircleStatusComponent, SiEmptyStateComponent, SiTranslatePipe], template: "<div class=\"si-layout-fixed-height mb-8 mx-0 overflow-auto px-2 pt-2\">\n  @if (view() === 'list') {\n    <div class=\"si-layout-fixed-height\">\n      <div class=\"mx-0\">\n        <si-search-bar\n          class=\"w-100\"\n          colorVariant=\"base-1\"\n          showIcon=\"true\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [value]=\"searchTerm\"\n          (searchChange)=\"onSearch($event)\"\n        />\n      </div>\n      <div\n        class=\"si-layout-fixed-height text-pre-wrap text-break overflow-y-auto widget-list mt-6 bg-base-1\"\n      >\n        @if (filteredWidgetCatalog.length > 0) {\n          <div class=\"si-layout-fixed-height list-group\">\n            @for (widget of filteredWidgetCatalog; track $index) {\n              <button\n                type=\"button\"\n                class=\"list-group-item list-group-item-action d-flex\"\n                [class.active]=\"selected() === widget\"\n                (click)=\"selectWidget(widget)\"\n              >\n                <si-circle-status class=\"my-n4 me-5\" [icon]=\"widget.iconClass\" />\n                <div class=\"d-flex flex-column align-items-start\">\n                  <span class=\"si-title-2\">{{ widget.name }}</span>\n                  <span class=\"si-body-2\">{{ widget.description?.trim() }}</span>\n                </div>\n              </button>\n            }\n          </div>\n        } @else {\n          <div>\n            <si-empty-state icon=\"element-report\" [heading]=\"labelEmpty\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <ng-container #editorHost />\n</div>\n\n<div class=\"catalog-footer py-0 px-2\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">{{\n    labelCancel | translate\n  }}</button>\n  @if (showPreviousButton()) {\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onPrevious()\">{{\n      labelPrevious | translate\n    }}</button>\n  }\n  @if (showNextButton()) {\n    <button\n      type=\"button\"\n      class=\"btn\"\n      [class.btn-primary]=\"view() === 'list'\"\n      [class.btn-secondary]=\"view() !== 'list'\"\n      [disabled]=\"disableNextButton()\"\n      (click)=\"onNext()\"\n      >{{ labelNext | translate }}</button\n    >\n  }\n  @if (showAddButton()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"disableAddButton()\"\n      (click)=\"onAddWidget()\"\n      >{{ labelAdd | translate }}</button\n    >\n  }\n</div>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column;margin-inline:-4px;margin-block-start:-4px}.widget-list{background-color:var(--element-base-1);border:1px solid var(--element-ui-4);border-radius:var(--element-radius-2);overflow-x:auto}.list-group-item{border-inline-color:transparent;border-radius:0}.catalog-footer{align-items:center;display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.catalog-footer>*{margin-inline-start:16px}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 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.
+ */
+class SiFlexibleDashboardComponent {
+    /**
+     * Input to change the dashboard editable state.
+     *
+     * @defaultValue false
+     */
+    editable = model(false);
+    /**
+     * Heading for the dashboard.
+     */
+    heading = input();
+    /**
+     * Optionally, provide a custom subclass of the SiWidgetCatalogComponent
+     * to use your own catalog component.
+     */
+    widgetCatalogComponent = input();
+    /**
+     * Optionally, provide a custom subclass of the {@link SiWidgetInstanceEditorDialogComponent}
+     * to use your own implementation.
+     */
+    widgetInstanceEditorDialogComponent = input();
+    /**
+     * Optionally, but it is recommended to include an id for a dashboard.
+     * The id is utilized in the persistence calls on the {@link SiWidgetStorage}.
+     */
+    dashboardId = input();
+    /**
+     * Sets the available widgets for the widget catalog to the dashboard.
+     *
+     * @defaultValue [] */
+    widgetCatalog = input([]);
+    /**
+     * Option to remove the add widget instance button from the primary toolbar.
+     *
+     * @defaultValue false
+     */
+    hideAddWidgetInstanceButton = input(false);
+    /**
+     * Option to hide the dashboard edit button.
+     *
+     * @defaultValue false
+     */
+    hideEditButton = input(false);
+    /**
+     *  Option to display the edit button as a text button instead, only if the window is larger than xs {@link SiResponsiveContainerDirective}.
+     *
+     * @defaultValue false
+     */
+    showEditButtonLabel = input(false);
+    /**
+     * Option to turn off the loading spinner on save and load operations.
+     *
+     * @defaultValue false
+     */
+    hideProgressIndicator = input(false);
+    /**
+     * Option to configure a dashboard instance. Default is the optional value from
+     * the {@link SI_DASHBOARD_CONFIGURATION}.
+     *
+     * @defaultValue inject(SI_DASHBOARD_CONFIGURATION)
+     */
+    config = input(inject(SI_DASHBOARD_CONFIGURATION));
+    /**
+     * Placeholder text for the search input field in the widget catalog.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`)
+     * ```
+     */
+    searchPlaceholder = input(t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`));
+    /**
+     * The grid component is the actual container for the widgets.
+     */
+    grid = viewChild.required('grid');
+    /** Property to access the dashboard component instance.
+     */
+    dashboard = viewChild.required('dashboard');
+    /** The view child holds the container that hosts the widget catalog.
+     */
+    catalogHost = viewChild.required('catalogHost', { read: 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`.
+     */
+    isModified = output();
+    labelAddWidget = t(() => $localize `:@@DASHBOARD.ADD_WIDGET:Add widget`);
+    labelEditor = t(() => $localize `:@@DASHBOARD.WIDGET_EDITOR_DIALOG.TITLE:Edit`);
+    labelCatalog = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.TITLE:Add widget`);
+    addWidgetInstanceAction = {
+        type: 'action',
+        label: this.labelAddWidget,
+        action: () => this.showWidgetCatalog()
+    };
+    /**
+     * The primary action menu items shown in the edit mode of the dashboard.
+     */
+    primaryEditActions$ = new BehaviorSubject([
+        this.addWidgetInstanceAction
+    ]);
+    /**
+     * 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.
+     */
+    secondaryEditActions$ = new BehaviorSubject([]);
+    /**
+     * @returns True, if the dashboard shows its widgets and not a catalog or and editor.
+     */
+    isDashboardVisible = computed(() => this.viewState() === 'dashboard');
+    /**
+     * 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.
+     */
+    pageTitle = computed(() => {
+        const viewState = this.viewState();
+        switch (viewState) {
+            case 'editor':
+                return this.labelEditor;
+            case 'catalog':
+                return this.labelCatalog;
+            default:
+                return this.heading();
+        }
+    });
+    viewState = signal('dashboard');
+    subscriptions = [];
+    widgetStorage = inject(SI_WIDGET_STORE);
+    hideAddWidgetInstanceButton$ = new BehaviorSubject(this.hideAddWidgetInstanceButton());
+    dashboardId$ = new Subject();
+    outputRefSubscription = [];
+    toolbar = viewChild.required('toolbar');
+    ngOnChanges(changes) {
+        if (changes.dashboardId) {
+            const dashboard = this.dashboard();
+            if (dashboard.isExpanded) {
+                dashboard.restore();
+            }
+            if (this.editable()) {
+                this.grid().cancel();
+                this.viewState.set('dashboard');
+                this.catalogHost().clear();
+            }
+            this.dashboardId$.next(changes.dashboardId.currentValue);
+            this.setupMenuItems();
+        }
+        if (changes.editable) {
+            if (changes.editable.currentValue) {
+                this.grid().edit();
+            }
+            else {
+                this.grid().cancel();
+            }
+        }
+        if (changes.hideAddWidgetInstanceButton) {
+            this.hideAddWidgetInstanceButton$.next(changes.hideAddWidgetInstanceButton.currentValue);
+        }
+    }
+    ngOnInit() {
+        this.setupMenuItems();
+        const grid = this.grid();
+        this.outputRefSubscription.push(grid.widgetInstanceEdit.subscribe(widgetConfig => {
+            this.editWidgetInstance(widgetConfig);
+        }));
+        this.outputRefSubscription.push(grid.editable.subscribe(editable => {
+            this.editable.set(editable);
+        }));
+    }
+    ngOnDestroy() {
+        this.dashboardId$.next(undefined);
+        this.subscriptions?.forEach(sub => sub.unsubscribe());
+        this.outputRefSubscription?.forEach(sub => sub.unsubscribe());
+    }
+    /**
+     * Shows the widget catalog of the dashboard. If a widget instance is expanded
+     * it restores the widget instances before.
+     */
+    showWidgetCatalog() {
+        const dashboard = this.dashboard();
+        if (dashboard.isExpanded) {
+            dashboard.restore();
+        }
+        if (!this.editable()) {
+            this.grid().edit();
+        }
+        this.viewState.set('catalog');
+        const componentType = this.widgetCatalogComponent() ?? SiWidgetCatalogComponent;
+        const catalogRef = this.catalogHost().createComponent(componentType);
+        catalogRef.setInput('searchPlaceholder', this.searchPlaceholder());
+        catalogRef.instance.widgetCatalog = this.widgetCatalog();
+        const subscription = catalogRef.instance.closed.subscribe(widgetConfig => {
+            subscription.unsubscribe();
+            this.viewState.set('dashboard');
+            this.catalogHost().clear();
+            if (widgetConfig) {
+                this.grid().addWidgetInstance(widgetConfig);
+            }
+        });
+    }
+    onModified(event) {
+        this.isModified.emit(event);
+        this.toolbar().disableSaveButton.set(!event);
+    }
+    setupMenuItems() {
+        const primaryMenuItems = this.widgetStorage.getToolbarMenuItems
+            ? this.widgetStorage.getToolbarMenuItems(this.dashboardId()).primary
+            : of([]);
+        combineLatest([primaryMenuItems, this.hideAddWidgetInstanceButton$])
+            .pipe(takeUntil(this.dashboardId$))
+            .subscribe(([items, hideAddButton]) => this.setupPrimaryMenuItems(items, hideAddButton));
+        const secondaryMenuItems = this.widgetStorage.getToolbarMenuItems
+            ? this.widgetStorage.getToolbarMenuItems(this.dashboardId()).secondary
+            : undefined;
+        if (secondaryMenuItems) {
+            secondaryMenuItems
+                .pipe(takeUntil(this.dashboardId$), map(items => items.map(item => this.proxyMenuItemAction(item))))
+                .subscribe(items => this.secondaryEditActions$.next(items));
+        }
+    }
+    setupPrimaryMenuItems(items, hideAddWidgetInstanceButton) {
+        const next = hideAddWidgetInstanceButton
+            ? []
+            : [this.addWidgetInstanceAction];
+        next.push(...items.map(item => this.proxyMenuItemAction(item)));
+        this.primaryEditActions$.next(next);
+    }
+    editWidgetInstance(widgetConfig) {
+        const dashboard = this.dashboard();
+        if (dashboard.isExpanded) {
+            dashboard.restore();
+        }
+        const widget = this.getWidget(widgetConfig.widgetId);
+        const widgetInstanceEditorDialogComponent = this.widgetInstanceEditorDialogComponent();
+        const componentType = widgetInstanceEditorDialogComponent ?? SiWidgetInstanceEditorDialogComponent;
+        this.viewState.set('editor');
+        const catalogRef = this.catalogHost().createComponent(componentType);
+        catalogRef.setInput('widgetConfig', widgetConfig);
+        catalogRef.setInput('widget', widget);
+        const subscription = catalogRef.instance.closed.subscribe(editedWidgetConfig => {
+            subscription.unsubscribe();
+            this.viewState.set('dashboard');
+            this.catalogHost().clear();
+            if (editedWidgetConfig) {
+                this.grid().updateWidgetInstance(editedWidgetConfig);
+            }
+        });
+    }
+    proxyMenuItemAction(item) {
+        if ('action' in item) {
+            if (!item.action || item.action instanceof String) {
+                return item;
+            }
+            else {
+                const realAction = item.action;
+                item.action = () => {
+                    realAction(this.grid());
+                };
+            }
+        }
+        return item;
+    }
+    getWidget(id) {
+        return this.widgetCatalog().find(widget => widget.id === id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFlexibleDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: SiFlexibleDashboardComponent, isStandalone: true, selector: "si-flexible-dashboard", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, widgetCatalogComponent: { classPropertyName: "widgetCatalogComponent", publicName: "widgetCatalogComponent", isSignal: true, isRequired: false, transformFunction: null }, widgetInstanceEditorDialogComponent: { classPropertyName: "widgetInstanceEditorDialogComponent", publicName: "widgetInstanceEditorDialogComponent", isSignal: true, isRequired: false, transformFunction: null }, dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: false, transformFunction: null }, widgetCatalog: { classPropertyName: "widgetCatalog", publicName: "widgetCatalog", isSignal: true, isRequired: false, transformFunction: null }, hideAddWidgetInstanceButton: { classPropertyName: "hideAddWidgetInstanceButton", publicName: "hideAddWidgetInstanceButton", isSignal: true, isRequired: false, transformFunction: null }, hideEditButton: { classPropertyName: "hideEditButton", publicName: "hideEditButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButtonLabel: { classPropertyName: "showEditButtonLabel", publicName: "showEditButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, hideProgressIndicator: { classPropertyName: "hideProgressIndicator", publicName: "hideProgressIndicator", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editable: "editableChange", isModified: "isModified" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "dashboard", first: true, predicate: ["dashboard"], descendants: true, isSignal: true }, { propertyName: "catalogHost", first: true, predicate: ["catalogHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<si-dashboard #dashboard [heading]=\"pageTitle()\" [sticky]=\"true\">\n  <si-dashboard-toolbar\n    #toolbar\n    menubar\n    [class.d-none]=\"!isDashboardVisible()\"\n    [primaryEditActions]=\"(primaryEditActions$ | async) ?? []\"\n    [secondaryEditActions]=\"(secondaryEditActions$ | async) ?? []\"\n    [editable]=\"editable()\"\n    [disabled]=\"(grid.isLoading | async) ?? false\"\n    [hideEditButton]=\"hideEditButton()\"\n    [showEditButtonLabel]=\"showEditButtonLabel()\"\n    (editableChange)=\"grid.edit()\"\n    (save)=\"grid.save()\"\n    (cancel)=\"grid.cancel()\"\n  >\n    <ng-content select=\"[filters-slot]\" filters-slot />\n  </si-dashboard-toolbar>\n\n  <div dashboard class=\"d-contents\">\n    <si-grid\n      #grid\n      [class.d-none]=\"!isDashboardVisible()\"\n      [gridConfig]=\"config()?.grid\"\n      [dashboardId]=\"dashboardId()\"\n      [widgetCatalog]=\"widgetCatalog()\"\n      [hideProgressIndicator]=\"hideProgressIndicator()\"\n      [widgetInstanceEditorDialogComponent]=\"widgetInstanceEditorDialogComponent()\"\n      [emitWidgetInstanceEditEvents]=\"true\"\n      (isModified)=\"onModified($event)\"\n    >\n      <ng-content select=\"[empty-state]\" empty-state />\n    </si-grid>\n    <ng-container #catalogHost />\n  </div>\n</si-dashboard>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column}\n"], dependencies: [{ kind: "component", type: SiDashboardComponent, selector: "si-dashboard", inputs: ["heading", "enableExpandInteractions", "sticky", "hideMenubar"] }, { kind: "component", type: SiDashboardToolbarComponent, selector: "si-dashboard-toolbar", inputs: ["primaryEditActions", "secondaryEditActions", "disableSaveButton", "disabled", "editable", "hideEditButton", "showEditButtonLabel"], outputs: ["disableSaveButtonChange", "editableChange", "save", "cancel"] }, { kind: "component", type: SiGridComponent, selector: "si-grid", inputs: ["gridConfig", "editable", "dashboardId", "widgetCatalog", "emitWidgetInstanceEditEvents", "hideProgressIndicator", "widgetInstanceEditorDialogComponent"], outputs: ["editableChange", "isModified", "widgetInstanceEdit"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFlexibleDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-flexible-dashboard', imports: [SiDashboardComponent, SiDashboardToolbarComponent, SiGridComponent, AsyncPipe], template: "<si-dashboard #dashboard [heading]=\"pageTitle()\" [sticky]=\"true\">\n  <si-dashboard-toolbar\n    #toolbar\n    menubar\n    [class.d-none]=\"!isDashboardVisible()\"\n    [primaryEditActions]=\"(primaryEditActions$ | async) ?? []\"\n    [secondaryEditActions]=\"(secondaryEditActions$ | async) ?? []\"\n    [editable]=\"editable()\"\n    [disabled]=\"(grid.isLoading | async) ?? false\"\n    [hideEditButton]=\"hideEditButton()\"\n    [showEditButtonLabel]=\"showEditButtonLabel()\"\n    (editableChange)=\"grid.edit()\"\n    (save)=\"grid.save()\"\n    (cancel)=\"grid.cancel()\"\n  >\n    <ng-content select=\"[filters-slot]\" filters-slot />\n  </si-dashboard-toolbar>\n\n  <div dashboard class=\"d-contents\">\n    <si-grid\n      #grid\n      [class.d-none]=\"!isDashboardVisible()\"\n      [gridConfig]=\"config()?.grid\"\n      [dashboardId]=\"dashboardId()\"\n      [widgetCatalog]=\"widgetCatalog()\"\n      [hideProgressIndicator]=\"hideProgressIndicator()\"\n      [widgetInstanceEditorDialogComponent]=\"widgetInstanceEditorDialogComponent()\"\n      [emitWidgetInstanceEditEvents]=\"true\"\n      (isModified)=\"onModified($event)\"\n    >\n      <ng-content select=\"[empty-state]\" empty-state />\n    </si-grid>\n    <ng-container #catalogHost />\n  </div>\n</si-dashboard>\n", styles: [":host{display:flex;flex:1 1 0;flex-direction:column}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+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 }) {
+        return {
+            ngModule: SiDashboardsNgModule,
+            providers: [
+                {
+                    provide: SI_DASHBOARD_CONFIGURATION,
+                    useValue: config
+                },
+                dashboardApi ?? {
+                    provide: SiWidgetStorage,
+                    useClass: SiDefaultWidgetStorage
+                },
+                dashboardApi ? { provide: SI_WIDGET_STORE, useExisting: SiWidgetStorage } : []
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardsNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardsNgModule, imports: [SiFlexibleDashboardComponent,
+            SiGridComponent,
+            SiWidgetCatalogComponent,
+            SiWidgetInstanceEditorDialogComponent], exports: [SiFlexibleDashboardComponent,
+            SiGridComponent,
+            SiWidgetCatalogComponent,
+            SiWidgetInstanceEditorDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardsNgModule, imports: [SiFlexibleDashboardComponent,
+            SiWidgetCatalogComponent,
+            SiWidgetInstanceEditorDialogComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardsNgModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SiFlexibleDashboardComponent,
+                        SiGridComponent,
+                        SiWidgetCatalogComponent,
+                        SiWidgetInstanceEditorDialogComponent
+                    ],
+                    exports: [
+                        SiFlexibleDashboardComponent,
+                        SiGridComponent,
+                        SiWidgetCatalogComponent,
+                        SiWidgetInstanceEditorDialogComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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 };
+//# sourceMappingURL=spike-rabbit-dashboards-ng.mjs.map