@spike-rabbit/dashboards-ng 49.0.0 → 49.13.0

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

@@ -1,26 +1,31 @@
-import { NgClass, AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, isPlatformBrowser, AsyncPipe } 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 { InjectionToken, inject, input, model, output, viewChild, computed, ChangeDetectionStrategy, Component, Injectable, ElementRef, Renderer2, DOCUMENT, Directive, EventEmitter, createNgModule, Injector, EnvironmentInjector, DestroyRef, signal, ViewContainerRef, isSignal, viewChildren, NgZone, PLATFORM_ID, afterNextRender, inputBinding, outputBinding, 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 { t, SiTranslatePipe, injectSiTranslateService } from '@spike-rabbit/element-translate-ng/translate';
+import { BehaviorSubject, of, Subject, throwError, ReplaySubject, first, combineLatest } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
 import { BOOTSTRAP_BREAKPOINTS, SiResponsiveContainerDirective } from '@spike-rabbit/element-ng/resize-observer';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { elementEdit } from '@siemens/element-icons';
 import { SiContentActionBarComponent } from '@spike-rabbit/element-ng/content-action-bar';
+import { addIcons, SiIconComponent } from '@spike-rabbit/element-ng/icon';
 import { SiLinkDirective } from '@spike-rabbit/element-ng/link';
-import { SiLoadingSpinnerComponent, SiLoadingService, SiLoadingSpinnerDirective } from '@spike-rabbit/element-ng/loading-spinner';
+import { SiLoadingButtonComponent, SiLoadingSpinnerDirective } from '@spike-rabbit/element-ng/loading-spinner';
+import { SiTooltipDirective } from '@spike-rabbit/element-ng/tooltip';
 import { SiModalService } from '@spike-rabbit/element-ng/modal';
 import { GridStack } from 'gridstack';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SiActionDialogService } from '@spike-rabbit/element-ng/action-modal';
+import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
 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
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -36,7 +41,7 @@ const DEFAULT_GRIDSTACK_OPTIONS = {
 };
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -48,12 +53,21 @@ const SI_DASHBOARD_CONFIGURATION = new InjectionToken('Injection token to config
     factory: () => ({ grid: { gridStackOptions: DEFAULT_GRIDSTACK_OPTIONS } })
 });
 /**
- * @deprecated Use SI_DASHBOARD_CONFIGURATION instead.
+ * Injection token to configure global toolbar menu items.
  */
-const CONFIG_TOKEN = SI_DASHBOARD_CONFIGURATION;
+const SI_DASHBOARD_TOOLBAR_ITEMS = new InjectionToken('Injection token to configure global toolbar menu items.');
+/**
+ * provider function to configure global toolbar menu items.
+ * @param toolbarItems - primary and secondary edit actions which are common to all
+ * dashboard instances on application.
+ */
+const provideDashboardToolbarItems = (toolbarItems) => ({
+    provide: SI_DASHBOARD_TOOLBAR_ITEMS,
+    useValue: { primary: toolbarItems?.primary ?? [], secondary: toolbarItems?.secondary ?? [] }
+});
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -71,6 +85,9 @@ 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.
+     *
+     * @deprecated use {@link provideDashboardToolbarItems} to provide common toolbar items.
+     * Additionally configure individual dashboard actions via {@link SiFlexibleDashboardComponent.primaryEditActions} and {@link SiFlexibleDashboardComponent.secondaryEditActions} respectively.
      */
     getToolbarMenuItems;
 }
@@ -116,26 +133,19 @@ class SiDefaultWidgetStorage extends SiWidgetStorage {
         }
         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;
-            }
-        });
+    save(modifiedWidgets, addedWidgets, removedWidgets, dashboardId) {
+        const newWidgets = [...addedWidgets, ...modifiedWidgets];
         this.update(newWidgets, dashboardId);
         return of(newWidgets);
     }
-    update(newConfigs, dashboardId) {
+    update(widgetConfigs, dashboardId) {
         const widgets$ = this.load(dashboardId);
-        widgets$.next(newConfigs);
+        widgets$.next(widgetConfigs);
         if (!dashboardId) {
-            this.storage.setItem(STORAGE_KEY, JSON.stringify(newConfigs));
+            this.storage.setItem(STORAGE_KEY, JSON.stringify(widgetConfigs));
         }
         else {
-            this.storage.setItem(`${STORAGE_KEY}-${dashboardId}`, JSON.stringify(newConfigs));
+            this.storage.setItem(`${STORAGE_KEY}-${dashboardId}`, JSON.stringify(widgetConfigs));
         }
     }
     loadFromStorage(dashboardId) {
@@ -155,7 +165,7 @@ class SiDefaultWidgetStorage extends SiWidgetStorage {
 }
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -166,69 +176,84 @@ class SiDefaultWidgetStorage extends SiWidgetStorage {
  * the cancel and save buttons, as well as displaying primary and secondary actions.
  */
 class SiDashboardToolbarComponent {
+    icons = addIcons({ elementEdit });
     /**
      * Set primary actions that are in `editable` mode first visible or in
      * the expanded content action bar of the toolbar.
      *
      * @defaultValue []
      */
-    primaryEditActions = input([]);
+    primaryEditActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryEditActions" }] : /* istanbul ignore next */ []));
     /**
      * 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([]);
+    secondaryEditActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryEditActions" }] : /* istanbul ignore next */ []));
     /**
      * 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);
+    disableSaveButton = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableSaveButton" }] : /* istanbul ignore next */ []));
     /**
      * Input to disable all actions and buttons of the toolbar.
      *
      * @defaultValue false */
-    disabled = input(false);
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /**
      * 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);
+    editable = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
     /**
      * Option to hide the dashboard edit button.
      *
      * @defaultValue false
      */
-    hideEditButton = input(false);
+    hideEditButton = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideEditButton" }] : /* istanbul ignore next */ []));
     /**
      *  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);
+    showEditButtonLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEditButtonLabel" }] : /* istanbul ignore next */ []));
+    grid = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
     /**
      * 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);
+    dashboardToolbarContainer = viewChild.required(SiResponsiveContainerDirective);
+    showContentActionBar = computed(() => this.primaryEditActions()?.length + this.secondaryEditActions()?.length > 3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showContentActionBar" }] : /* istanbul ignore next */ []));
     editActions = computed(() => [
         ...this.primaryEditActions(),
         ...this.secondaryEditActions()
-    ]);
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editActions" }] : /* istanbul ignore next */ []));
+    primaryEditActionsComputed = computed(() => {
+        return this.primaryEditActions().map(item => this.proxyMenuItemAction(item));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryEditActionsComputed" }] : /* istanbul ignore next */ []));
+    secondaryEditActionsComputed = computed(() => {
+        return this.secondaryEditActions().map(item => this.proxyMenuItemAction(item));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryEditActionsComputed" }] : /* istanbul ignore next */ []));
     onEdit() {
         this.editable.set(true);
     }
@@ -239,113 +264,137 @@ class SiDashboardToolbarComponent {
     }
     onCancel() {
         if (this.editable()) {
-            this.cancel.emit();
+            this.editable.set(false);
         }
     }
     isToolbarItem(item) {
         return 'label' in item;
     }
-    showEditButtonLabelDesktop() {
-        return this.showEditButtonLabel() && !this.dashboardToolbarContainer?.xs();
+    showEditButtonLabelDesktop = computed(() => {
+        return this.showEditButtonLabel() && !this.dashboardToolbarContainer()?.xs();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEditButtonLabelDesktop" }] : /* istanbul ignore next */ []));
+    proxyMenuItemAction(item) {
+        if (item.type === 'action' && typeof item.action === 'function') {
+            item.action = item.action.bind(this, this.grid());
+        }
+        return item;
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiDashboardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { disableSaveButton: "disableSaveButtonChange", editable: "editableChange", save: "save" }, host: { classAttribute: "d-flex flex-column flex-grow-1" }, viewQueries: [{ propertyName: "dashboardToolbarContainer", first: true, predicate: SiResponsiveContainerDirective, descendants: true, isSignal: 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        @let showEditButtonLabelDesktop = this.showEditButtonLabelDesktop();\n        <button\n          type=\"button\"\n          class=\"btn ms-auto\"\n          [class]=\"showEditButtonLabelDesktop ? 'btn-secondary' : 'btn-icon btn-tertiary'\"\n          [attr.aria-label]=\"labelEdit | translate\"\n          [siTooltip]=\"labelEdit\"\n          [isDisabled]=\"showEditButtonLabelDesktop\"\n          [disabled]=\"disabled()\"\n          (click)=\"onEdit()\"\n        >\n          @if (showEditButtonLabelDesktop) {\n            {{ labelEdit | translate }}\n          } @else {\n            <si-icon [icon]=\"icons.elementEdit\" />\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]=\"primaryEditActionsComputed()\"\n          [secondaryActions]=\"secondaryEditActionsComputed()\"\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                    <button\n                      type=\"button\"\n                      class=\"btn btn-secondary me-4\"\n                      (click)=\"action.action(grid())\"\n                    >\n                      {{ action.label! | translate }}\n                    </button>\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        <si-loading-button\n          class=\"align-top\"\n          buttonClass=\"btn btn-primary\"\n          [disabled]=\"disableSaveButton()\"\n          [loading]=\"disabled()\"\n          (click)=\"onSave()\"\n        >\n          {{ labelSave | translate }}\n        </si-loading-button>\n      </div>\n    }\n  </div>\n</div>\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: SiLoadingButtonComponent, selector: "si-loading-button", inputs: ["disabled", "loading", "type", "ariaLabel", "ariaLabelledBy", "buttonClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: SiResponsiveContainerDirective, selector: "[siResponsiveContainer]", inputs: ["resizeThrottle", "breakpoints"], exportAs: ["siResponsiveContainer"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipScrollStrategy", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiDashboardToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-dashboard-toolbar', imports: [
                         SiContentActionBarComponent,
                         SiLinkDirective,
-                        SiLoadingSpinnerComponent,
-                        SiTranslateModule,
+                        SiLoadingButtonComponent,
+                        SiIconComponent,
                         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]
-            }] } });
+                        SiResponsiveContainerDirective,
+                        SiTranslatePipe,
+                        SiTooltipDirective
+                    ], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        class: 'd-flex flex-column flex-grow-1'
+                    }, 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        @let showEditButtonLabelDesktop = this.showEditButtonLabelDesktop();\n        <button\n          type=\"button\"\n          class=\"btn ms-auto\"\n          [class]=\"showEditButtonLabelDesktop ? 'btn-secondary' : 'btn-icon btn-tertiary'\"\n          [attr.aria-label]=\"labelEdit | translate\"\n          [siTooltip]=\"labelEdit\"\n          [isDisabled]=\"showEditButtonLabelDesktop\"\n          [disabled]=\"disabled()\"\n          (click)=\"onEdit()\"\n        >\n          @if (showEditButtonLabelDesktop) {\n            {{ labelEdit | translate }}\n          } @else {\n            <si-icon [icon]=\"icons.elementEdit\" />\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]=\"primaryEditActionsComputed()\"\n          [secondaryActions]=\"secondaryEditActionsComputed()\"\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                    <button\n                      type=\"button\"\n                      class=\"btn btn-secondary me-4\"\n                      (click)=\"action.action(grid())\"\n                    >\n                      {{ action.label! | translate }}\n                    </button>\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        <si-loading-button\n          class=\"align-top\"\n          buttonClass=\"btn btn-primary\"\n          [disabled]=\"disableSaveButton()\"\n          [loading]=\"disabled()\"\n          (click)=\"onSave()\"\n        >\n          {{ labelSave | translate }}\n        </si-loading-button>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { primaryEditActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryEditActions", required: false }] }], secondaryEditActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryEditActions", required: false }] }], disableSaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSaveButton", required: false }] }, { type: i0.Output, args: ["disableSaveButtonChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }, { type: i0.Output, args: ["editableChange"] }], hideEditButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideEditButton", required: false }] }], showEditButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditButtonLabel", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: true }] }], save: [{ type: i0.Output, args: ["save"] }], dashboardToolbarContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiResponsiveContainerDirective), { isSignal: true }] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-class SiGridService {
-    /** @defaultValue [] */
-    widgetCatalog = [];
+/**
+ * Injection token to optionally inject the {@link SiWidgetIdProvider} implementation
+ * to provide custom widget id generation logic. The default implementation
+ * is {@link SiWidgetDefaultIdProvider}.
+ *
+ * * @example
+ * The following shows how to provide your own widget id provider.
+ * ```
+ * providers: [..., { provide: SI_WIDGET_ID_PROVIDER, useClass: CustomWidgetIdProvider }]
+ * ```
+ *
+ */
+const SI_WIDGET_ID_PROVIDER = new InjectionToken('Injection token to configure your widget id provider.', { providedIn: 'root', factory: () => inject(SiWidgetDefaultIdProvider) });
+/**
+ * Abstract class to provide widget id generation logic.
+ */
+class SiWidgetIdProvider {
+}
+/**
+ * The default implementation of the {@link SiWidgetIdProvider} which
+ * generates random widget ids.
+ */
+class SiWidgetDefaultIdProvider extends SiWidgetIdProvider {
     /**
-     * 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.
+     * Generates a unique widget id.
+     *
+     * The method uses `crypto.randomUUID()` which generates a RFC4122 version 4 UUID
+     * (a cryptographically secure random identifier with 122 bits of entropy).
+     *
+     * @param widget - The widget instance config without any id.
+     * @param dashboardId - The id of the dashboard where the widget is added.
+     * @returns A unique widget id string in the format `crypto.randomUUID()`.
      */
-    editable$ = new BehaviorSubject(false);
-    getWidget(id) {
-        return this.widgetCatalog.find(widget => widget.id === id);
+    generateWidgetId(widget, dashboardId) {
+        return crypto.randomUUID();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetDefaultIdProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetDefaultIdProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetDefaultIdProvider, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * 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;
+    config = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    elementTagName = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elementTagName" }] : /* istanbul ignore next */ []));
+    url = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    webComponentHost = viewChild.required('webComponentHost', {
+        read: ElementRef
+    });
     webComponent;
     renderer2 = inject(Renderer2);
     document = inject(DOCUMENT);
+    ngOnChanges(changes) {
+        if (changes.config && this.webComponent) {
+            this.webComponent.config = this.config();
+        }
+    }
     ngAfterViewInit() {
-        if (!this.isScriptLoaded(this.url)) {
+        if (!this.isScriptLoaded(this.url())) {
             const script = this.renderer2.createElement('script');
-            script.src = this.url;
+            script.src = this.url();
             this.renderer2.appendChild(this.document.body, script);
         }
-        this.webComponent = this.renderer2.createElement(this.elementTagName);
-        this.webComponent.config = this.config;
+        this.webComponent = this.renderer2.createElement(this.elementTagName());
+        if (this.webComponent) {
+            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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWebComponentWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: SiWebComponentWrapperBaseComponent, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, elementTagName: { classPropertyName: "elementTagName", publicName: "elementTagName", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "webComponentHost", first: true, predicate: ["webComponentHost"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0 });
 }
-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 }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWebComponentWrapperBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], elementTagName: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementTagName", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }], webComponentHost: [{ type: i0.ViewChild, args: ['webComponentHost', { ...{
+                            read: ElementRef
+                        }, isSignal: true }] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiWebComponentEditorWrapperComponent extends SiWebComponentWrapperBaseComponent {
@@ -356,20 +405,24 @@ class SiWebComponentEditorWrapperComponent extends SiWebComponentWrapperBaseComp
      * This will be set when setupWidgetInstanceEditor is executed
      */
     statusChangesHandler;
-    webComponentEventListener = (event) => this.configChange.next(event.detail);
+    webComponentEventListener = (event) => event.detail && this.configChange.next(event.detail);
     webComponentStateChangeListener = (event) => {
-        this.state = event.detail;
-        this.stateChange.next(event.detail);
+        if (event.detail) {
+            this.state = event.detail;
+            this.stateChange.next(event.detail);
+        }
     };
     webComponentStatusChangesListener = (event) => {
-        this.statusChangesHandler?.(event.detail);
+        if (event.detail) {
+            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);
+        this.webComponentHost().nativeElement.appendChild(this.webComponent);
     }
     ngOnDestroy() {
         this.webComponent?.removeEventListener('stateChange', this.webComponentStateChangeListener);
@@ -382,16 +435,16 @@ class SiWebComponentEditorWrapperComponent extends SiWebComponentWrapperBaseComp
     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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWebComponentEditorWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SiWebComponentEditorWrapperComponent, isStandalone: true, selector: "si-web-component-editor-wrapper", usesInheritance: true, ngImport: i0, template: "<div #webComponentHost class=\"h-100\"></div>\n", changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentEditorWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWebComponentEditorWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-web-component-editor-wrapper', template: "<div #webComponentHost class=\"h-100\"></div>\n" }]
+            args: [{ selector: 'si-web-component-editor-wrapper', changeDetection: ChangeDetectionStrategy.Eager, template: "<div #webComponentHost class=\"h-100\"></div>\n" }]
         }] });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiWebComponentWrapperComponent extends SiWebComponentWrapperBaseComponent {
@@ -401,8 +454,8 @@ class SiWebComponentWrapperComponent extends SiWebComponentWrapperBaseComponent
     }
     set editable(editable) {
         this._editable = editable;
-        if (this.webComponentHost.nativeElement.children.length > 0) {
-            this.webComponentHost.nativeElement.children[0].editable = editable;
+        if (this.webComponent) {
+            this.webComponent.editable = editable;
         }
     }
     primaryActions;
@@ -410,11 +463,11 @@ class SiWebComponentWrapperComponent extends SiWebComponentWrapperBaseComponent
     primaryEditActions;
     secondaryEditActions;
     configChange = new EventEmitter();
-    webComponentEventListener = (event) => this.configChanged(event.detail);
+    webComponentEventListener = (event) => event.detail && this.configChanged(event.detail);
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.webComponent?.addEventListener('configChange', this.webComponentEventListener);
-        this.webComponentHost.nativeElement.appendChild(this.webComponent);
+        this.webComponentHost().nativeElement.appendChild(this.webComponent);
     }
     ngOnDestroy() {
         this.webComponent?.removeEventListener('configChange', this.webComponentEventListener);
@@ -426,20 +479,19 @@ class SiWebComponentWrapperComponent extends SiWebComponentWrapperBaseComponent
         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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWebComponentWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SiWebComponentWrapperComponent, isStandalone: true, selector: "si-web-component-wrapper", usesInheritance: true, ngImport: i0, template: "<div #webComponentHost class=\"h-100\"></div>\n", changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWebComponentWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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
-            }] } });
+            args: [{ selector: 'si-web-component-wrapper', changeDetection: ChangeDetectionStrategy.Eager, template: "<div #webComponentHost class=\"h-100\"></div>\n" }]
+        }] });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+/** @internal */
 const widgetFactoryRegistry = {
     _factories: {},
     register(name, factoryFn) {
@@ -469,29 +521,50 @@ const setupComponent = (widgetComponentFactory, host, injector, envInjector, com
         return throwError(() => new Error(`Unknown widget factory type ${widgetComponentFactory.factoryType}.`));
     }
 };
+const loadModuleBasedComponent = (factory, componentName, host, injector, envInjector, result) => {
+    const loader = factory.moduleLoader;
+    const componentKey = factory[componentName];
+    loader(componentKey).then(moduleExports => {
+        const ngModuleRef = createNgModule(moduleExports[factory.moduleName], envInjector);
+        const componentType = moduleExports[componentKey];
+        const widgetInstanceRef = host.createComponent(componentType, { injector, ngModuleRef });
+        result.next(widgetInstanceRef);
+        result.complete();
+    }, rejection => {
+        const errorMsg = `Loading widget module ${factory.moduleName} failed`;
+        const msg = rejection ? `${errorMsg} with ${JSON.stringify(rejection.toString())}` : errorMsg;
+        result.error(msg);
+        result.complete();
+    });
+};
+const loadStandaloneComponent = (factory, componentName, host, injector, result) => {
+    const loader = factory.componentLoader;
+    const componentKey = factory[componentName];
+    loader(componentKey).then(componentType => {
+        const widgetInstanceRef = host.createComponent(componentType, { injector });
+        result.next(widgetInstanceRef);
+        result.complete();
+    }, rejection => {
+        const errorMsg = `Loading widget component ${componentKey} failed`;
+        const msg = rejection ? `${errorMsg} with ${JSON.stringify(rejection.toString())}` : errorMsg;
+        result.error(msg);
+        result.complete();
+    });
+};
 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();
-        });
+    if (!factory[componentName]) {
+        result.error(`Provided component factory has no ${componentName} component configuration`);
+        return result;
+    }
+    if (factory.moduleName) {
+        loadModuleBasedComponent(factory, componentName, host, injector, envInjector, result);
+    }
+    else if (factory.componentLoader) {
+        loadStandaloneComponent(factory, componentName, host, injector, result);
     }
     else {
-        result.error(`Provided component factory has no ${componentName} component configuration`);
+        result.error('Invalid factory configuration: missing moduleLoader or componentLoader');
     }
     return result;
 };
@@ -505,8 +578,8 @@ const loadAndAttachWebComponentWrapper = (factory, componentName, host) => {
         else {
             widgetInstanceRef = host.createComponent(SiWebComponentEditorWrapperComponent);
         }
-        widgetInstanceRef.instance.elementTagName = factory[componentName];
-        widgetInstanceRef.instance.url = factory.url;
+        widgetInstanceRef.setInput('elementTagName', factory[componentName]);
+        widgetInstanceRef.setInput('url', factory.url);
         result.next(widgetInstanceRef);
         result.complete();
     }
@@ -517,19 +590,40 @@ const loadAndAttachWebComponentWrapper = (factory, componentName, host) => {
 };
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiWidgetHostComponent {
     siModal = inject(SiActionDialogService);
-    gridService = inject(SiGridService);
     injector = inject(Injector);
     envInjector = inject(EnvironmentInjector);
-    unsubscribe = new Subject();
-    widgetConfig = input.required();
+    destroyRef = inject(DestroyRef);
+    translateService = injectSiTranslateService();
+    liveAnnouncer = inject(LiveAnnouncer);
+    /** @internal */
+    elementRef = inject(ElementRef).nativeElement;
+    /** @defaultValue false */
+    keyboardActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardActive" }] : /* istanbul ignore next */ []));
+    widgetConfig = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetConfig" }] : /* istanbul ignore next */ []));
+    grid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "grid" }] : /* istanbul ignore next */ []));
+    /**
+     * The component factory for this widget's type.
+     */
+    componentFactory = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "componentFactory" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the widget host into editable mode.
+     *
+     * @defaultValue false
+     */
+    editable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
     remove = output();
     edit = output();
-    initCompleted = output();
+    gridEvent = output();
     card = viewChild.required('card');
     widgetHost = viewChild.required('widgetHost', { read: ViewContainerRef });
     labelEdit = t(() => $localize `:@@DASHBOARD.WIDGET.EDIT:Edit`);
@@ -540,19 +634,36 @@ class SiWidgetHostComponent {
     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`);
+    a11yWidgetMovedMessage = t(() => $localize `:@@DASHBOARD.WIDGET.A11Y.MOVED:Widget moved to column {{column}}, row {{row}}.`);
+    a11yWidgetResizedMessage = t(() => $localize `:@@DASHBOARD.WIDGET.A11Y.RESIZED:Widget resized to {{columns}} columns wide, {{rows}} rows tall.`);
+    a11yWidgetActivatedMessage = t(() => $localize `:@@DASHBOARD.WIDGET.A11Y.ACTIVATED:Widget activated. Use arrow keys to move, Shift+arrow keys to resize, Escape to exit.`);
+    a11yWidgetDeactivatedMessage = t(() => $localize `:@@DASHBOARD.WIDGET.A11Y.DEACTIVATED:Widget deactivated.`);
+    a11yWidgetDescription = t(() => $localize `:@@DASHBOARD.WIDGET.A11Y.DESCRIPTION:Press Enter or Space to activate. Then use arrow keys to move, Shift+arrow keys to resize, Escape to exit.`);
+    widgetAriaLabel = computed(() => {
+        const widgetHeading = this.widgetConfig().heading;
+        if (widgetHeading) {
+            return this.translateService.translateSync(widgetHeading);
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetAriaLabel" }] : /* istanbul ignore next */ []));
     widgetInstance;
     widgetRef;
     /** @defaultValue [] */
-    primaryActions = [];
+    primaryActions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActions" }] : /* istanbul ignore next */ []));
     /** @defaultValue [] */
-    secondaryActions = [];
+    secondaryActions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /** @defaultValue 'expanded' */
-    actionBarViewType = 'expanded';
-    editable$ = this.gridService.editable$;
+    actionBarViewType = signal('expanded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionBarViewType" }] : /* istanbul ignore next */ []));
     /** @defaultValue [] */
-    editablePrimaryActions = [];
+    editablePrimaryActions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editablePrimaryActions" }] : /* istanbul ignore next */ []));
     /** @defaultValue [] */
-    editableSecondaryActions = [];
+    editableSecondaryActions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editableSecondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * @defaultValue
      * ```
@@ -591,13 +702,30 @@ class SiWidgetHostComponent {
         iconOnly: true,
         action: () => this.onRemove()
     };
-    widgetInstanceFooter;
-    get accentLine() {
-        const widgetConfig = this.widgetConfig();
-        return widgetConfig.accentLine ? 'accent-' + widgetConfig.accentLine : '';
-    }
+    widgetInstanceFooter = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetInstanceFooter" }] : /* istanbul ignore next */ []));
+    accentLine = computed(() => {
+        const { accentLine } = this.widgetConfig();
+        return accentLine ? 'accent-' + accentLine : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentLine" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.widgetConfig) {
+            const options = {
+                ...this.widgetConfig(),
+                w: this.widgetConfig().width,
+                h: this.widgetConfig().height,
+                x: this.widgetConfig().x,
+                y: this.widgetConfig().y,
+                minW: this.widgetConfig().minWidth,
+                minH: this.widgetConfig().minHeight
+            };
+            if (!changes.widgetConfig.firstChange) {
+                this.grid()?.update(this.elementRef, options);
+            }
+            else {
+                this.grid()?.makeWidget(this.elementRef, options);
+            }
             if (this.widgetRef) {
                 if (isSignal(this.widgetRef.instance.config)) {
                     this.widgetRef.setInput('config', this.widgetConfig());
@@ -607,21 +735,148 @@ class SiWidgetHostComponent {
                 }
             }
         }
+        if (changes.editable && !changes.editable.firstChange) {
+            this.setupEditable(this.editable());
+        }
     }
     ngOnInit() {
         this.attachWidgetInstance();
-        this.editable$
-            .pipe(takeUntil(this.unsubscribe))
-            .subscribe(editable => this.setupEditable(editable));
     }
-    ngOnDestroy() {
-        this.unsubscribe.next();
-        this.unsubscribe.complete();
+    onToggleActive(event) {
+        if (!this.editable() || event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        const active = !this.keyboardActive();
+        this.keyboardActive.set(active);
+        this.announceTranslated(active ? this.a11yWidgetActivatedMessage : this.a11yWidgetDeactivatedMessage, {});
+    }
+    onDeactivate(event) {
+        if (!this.keyboardActive()) {
+            return;
+        }
+        event.preventDefault();
+        this.keyboardActive.set(false);
+        this.announceTranslated(this.a11yWidgetDeactivatedMessage, {});
+    }
+    onFocusOut() {
+        if (this.keyboardActive()) {
+            this.keyboardActive.set(false);
+        }
+    }
+    onArrowKey(event) {
+        if (!this.keyboardActive()) {
+            return;
+        }
+        const el = this.elementRef;
+        const node = el?.gridstackNode;
+        if (!node?.grid) {
+            return;
+        }
+        const keyEvent = event;
+        if (keyEvent.shiftKey) {
+            this.handleResize(keyEvent, node);
+        }
+        else {
+            this.handleMove(keyEvent, node);
+        }
+    }
+    handleResize(event, node) {
+        const el = this.elementRef;
+        let { w, h } = node;
+        switch (event.key) {
+            case 'ArrowRight':
+                w = (w ?? 1) + 1;
+                break;
+            case 'ArrowLeft':
+                w = Math.max(node.minW ?? 1, (w ?? 1) - 1);
+                break;
+            case 'ArrowDown':
+                h = (h ?? 1) + 1;
+                break;
+            case 'ArrowUp':
+                h = Math.max(node.minH ?? 1, (h ?? 1) - 1);
+                break;
+            default:
+                return;
+        }
+        if (w === node.w && h === node.h) {
+            return;
+        }
+        event.preventDefault();
+        const grid = node.grid;
+        grid.update(el, { w, h });
+        this.gridEvent.emit(new Event('resizestop'));
+        this.announceTranslated(this.a11yWidgetResizedMessage, { columns: w, rows: h });
+    }
+    handleMove(event, node) {
+        const el = this.elementRef;
+        const { x, y } = node;
+        const grid = node.grid;
+        let newX = x ?? 0;
+        let newY = y ?? 0;
+        switch (event.key) {
+            case 'ArrowRight':
+                do {
+                    newX++;
+                    grid.update(el, { x: newX, y });
+                } while (node.x === x && newX < grid.getColumn());
+                break;
+            case 'ArrowLeft':
+                if (newX <= 0) {
+                    break;
+                }
+                do {
+                    newX--;
+                    grid.update(el, { x: newX, y });
+                } while (node.x === x && newX > 0);
+                break;
+            case 'ArrowDown':
+                do {
+                    newY++;
+                    grid.update(el, { x, y: newY });
+                } while (node.y === y && newY < grid.getRow());
+                break;
+            case 'ArrowUp':
+                if (newY <= 0) {
+                    break;
+                }
+                do {
+                    newY--;
+                    grid.update(el, { x, y: newY });
+                } while (node.y === y && newY > 0);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.gridEvent.emit(new Event('dragstop'));
+        this.scrollIntoViewAfterTransition(el);
+        this.announceTranslated(this.a11yWidgetMovedMessage, {
+            column: (node.x ?? 0) + 1,
+            row: (node.y ?? 0) + 1
+        });
+    }
+    scrollIntoViewAfterTransition(el) {
+        const onEnd = () => {
+            el.removeEventListener('transitionend', onEnd);
+            el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        };
+        el.addEventListener('transitionend', onEnd, { once: true });
+    }
+    announce(message) {
+        this.liveAnnouncer.announce(message, 'assertive');
+    }
+    announceTranslated(message, params) {
+        this.translateService
+            .translateAsync(message, params)
+            .pipe(first())
+            .subscribe(msg => this.announce(msg));
     }
     attachWidgetInstance() {
-        const widget = this.gridService.getWidget(this.widgetConfig().widgetId);
-        if (widget) {
-            setupWidgetInstance(widget.componentFactory, this.widgetHost(), this.injector, this.envInjector).subscribe({
+        const componentFactory = this.componentFactory();
+        if (componentFactory) {
+            setupWidgetInstance(componentFactory, this.widgetHost(), this.injector, this.envInjector).subscribe({
                 next: (widgetRef) => {
                     this.widgetInstance = widgetRef.instance;
                     this.widgetRef = widgetRef;
@@ -630,8 +885,8 @@ class SiWidgetHostComponent {
                         // 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)));
+                            .pipe(takeUntilDestroyed(this.destroyRef))
+                            .subscribe(event => setTimeout(() => this.setupEditable(this.editable(), event)));
                     }
                     if (isSignal(this.widgetInstance.config)) {
                         this.widgetRef.setInput('config', this.widgetConfig());
@@ -639,19 +894,20 @@ class SiWidgetHostComponent {
                     else {
                         this.widgetInstance.config = this.widgetConfig();
                     }
-                    this.widgetInstanceFooter = this.widgetInstance.footer;
-                    this.setupEditable(this.gridService.editable$.value);
-                    this.initCompleted.emit();
+                    this.widgetInstanceFooter.set(this.widgetInstance.footer);
+                    this.setupEditable(this.editable());
                 },
                 error: error => console.error('Error: ', error)
             });
         }
         else {
             console.error(`Cannot find widget with id ${this.widgetConfig().widgetId}`);
-            this.initCompleted.emit();
         }
     }
     setupEditable(editable, widgetConfig) {
+        if (!editable) {
+            this.keyboardActive.set(false);
+        }
         widgetConfig ??= {
             primaryActions: this.widgetInstance?.primaryActions,
             secondaryActions: this.widgetInstance?.secondaryActions,
@@ -659,34 +915,37 @@ class SiWidgetHostComponent {
             secondaryEditActions: this.widgetInstance?.secondaryEditActions
         };
         if (editable) {
-            this.editablePrimaryActions = [];
+            this.editablePrimaryActions.set([]);
             if (this.isEditable()) {
-                this.editablePrimaryActions.push(this.editAction);
+                this.editablePrimaryActions.set([...this.editablePrimaryActions(), this.editAction]);
             }
             if (!this.widgetConfig().isNotRemovable) {
-                this.editablePrimaryActions.push(this.removeAction);
+                this.editablePrimaryActions.set([...this.editablePrimaryActions(), this.removeAction]);
             }
             if (widgetConfig.primaryEditActions) {
-                this.primaryActions = [...widgetConfig.primaryEditActions, ...this.editablePrimaryActions];
+                this.primaryActions.set([
+                    ...widgetConfig.primaryEditActions,
+                    ...this.editablePrimaryActions()
+                ]);
             }
             else {
-                this.primaryActions = this.editablePrimaryActions;
+                this.primaryActions.set(this.editablePrimaryActions());
             }
             if (widgetConfig.secondaryEditActions) {
-                this.secondaryActions = [
+                this.secondaryActions.set([
                     ...widgetConfig.secondaryEditActions,
-                    ...this.editableSecondaryActions
-                ];
+                    ...this.editableSecondaryActions()
+                ]);
             }
             else {
-                this.secondaryActions = this.editableSecondaryActions;
+                this.secondaryActions.set(this.editableSecondaryActions());
             }
-            this.actionBarViewType = 'expanded';
+            this.actionBarViewType.set('expanded');
         }
         else {
-            this.actionBarViewType = this.widgetConfig().actionBarViewType ?? 'expanded';
-            this.primaryActions = widgetConfig.primaryActions ?? [];
-            this.secondaryActions = widgetConfig.secondaryActions ?? [];
+            this.actionBarViewType.set(this.widgetConfig().actionBarViewType ?? 'expanded');
+            this.primaryActions.set(widgetConfig.primaryActions ?? []);
+            this.secondaryActions.set(widgetConfig.secondaryActions ?? []);
         }
         if (this.widgetInstance?.editable !== undefined) {
             if (isSignal(this.widgetInstance.editable)) {
@@ -709,8 +968,7 @@ class SiWidgetHostComponent {
     }
     isEditable() {
         const widgetConfig = this.widgetConfig();
-        return (!widgetConfig.immutable &&
-            !!this.gridService.getWidget(widgetConfig.widgetId)?.componentFactory?.editorComponentName);
+        return !widgetConfig.immutable && !!this.componentFactory()?.editorComponentName;
     }
     onEdit() {
         this.edit.emit(this.widgetConfig());
@@ -730,18 +988,24 @@ class SiWidgetHostComponent {
             }
         });
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiWidgetHostComponent, isStandalone: true, selector: "si-widget-host", inputs: { widgetConfig: { classPropertyName: "widgetConfig", publicName: "widgetConfig", isSignal: true, isRequired: true, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, componentFactory: { classPropertyName: "componentFactory", publicName: "componentFactory", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove", edit: "edit", gridEvent: "gridEvent" }, host: { properties: { "attr.role": "editable() ? null : 'listitem'", "attr.aria-roledescription": "editable() ? null : 'widget'", "attr.aria-label": "editable() || !widgetAriaLabel() ? null : widgetAriaLabel()" }, 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()) {\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    [class]=\"accentLine()\"\n    [class.elevation-2]=\"keyboardActive()\"\n    [class.si-widget-keyboard-active]=\"keyboardActive()\"\n    [attr.tabindex]=\"editable() ? 0 : null\"\n    [attr.role]=\"editable() ? 'application' : null\"\n    [attr.aria-roledescription]=\"editable() ? 'widget' : null\"\n    [attr.aria-label]=\"editable() ? widgetConfig().heading : null\"\n    [attr.aria-description]=\"editable() ? (a11yWidgetDescription | translate) : null\"\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    (keydown.enter)=\"onToggleActive($event)\"\n    (keydown.space)=\"onToggleActive($event)\"\n    (keydown.escape)=\"onDeactivate($event)\"\n    (keydown.arrowRight)=\"onArrowKey($event)\"\n    (keydown.arrowLeft)=\"onArrowKey($event)\"\n    (keydown.arrowUp)=\"onArrowKey($event)\"\n    (keydown.arrowDown)=\"onArrowKey($event)\"\n    (keydown.shift.arrowRight)=\"onArrowKey($event)\"\n    (keydown.shift.arrowLeft)=\"onArrowKey($event)\"\n    (keydown.shift.arrowUp)=\"onArrowKey($event)\"\n    (keydown.shift.arrowDown)=\"onArrowKey($event)\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div class=\"card-body overflow-auto\" body>\n      <ng-container #widgetHost />\n    </div>\n    @let footer = widgetInstanceFooter();\n    @if (footer) {\n      <div class=\"card-footer\" footer>\n        <ng-container *ngTemplateOutlet=\"footer\" />\n      </div>\n    }\n  </si-dashboard-card>\n</div>\n", styles: [":host{display:flex}::ng-deep body:not(:has(.ui-draggable-dragging)) .draggable-overlay{cursor:grab}::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;inset-block-end:6px!important;inset-inline-end:6px!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{inset:8px;position:absolute;z-index:100}\n"], dependencies: [{ kind: "component", type: SiDashboardCardComponent, selector: "si-dashboard-card", inputs: ["restoreText", "expandText", "enableExpandInteraction", "showMenubar"], outputs: ["expandChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }]
-        }] });
+            args: [{ selector: 'si-widget-host', imports: [SiDashboardCardComponent, NgTemplateOutlet, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'grid-stack-item',
+                        // In non-edit mode, expose each widget as a labeled list item so screen
+                        // readers group the widgets and let users jump between them. In edit mode
+                        // the inner card carries the interactive `application` role instead.
+                        '[attr.role]': "editable() ? null : 'listitem'",
+                        '[attr.aria-roledescription]': "editable() ? null : 'widget'",
+                        '[attr.aria-label]': 'editable() || !widgetAriaLabel() ? null : widgetAriaLabel()'
+                    }, template: "<div class=\"grid-stack-item-content p-4\">\n  @if (editable()) {\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    [class]=\"accentLine()\"\n    [class.elevation-2]=\"keyboardActive()\"\n    [class.si-widget-keyboard-active]=\"keyboardActive()\"\n    [attr.tabindex]=\"editable() ? 0 : null\"\n    [attr.role]=\"editable() ? 'application' : null\"\n    [attr.aria-roledescription]=\"editable() ? 'widget' : null\"\n    [attr.aria-label]=\"editable() ? widgetConfig().heading : null\"\n    [attr.aria-description]=\"editable() ? (a11yWidgetDescription | translate) : null\"\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    (keydown.enter)=\"onToggleActive($event)\"\n    (keydown.space)=\"onToggleActive($event)\"\n    (keydown.escape)=\"onDeactivate($event)\"\n    (keydown.arrowRight)=\"onArrowKey($event)\"\n    (keydown.arrowLeft)=\"onArrowKey($event)\"\n    (keydown.arrowUp)=\"onArrowKey($event)\"\n    (keydown.arrowDown)=\"onArrowKey($event)\"\n    (keydown.shift.arrowRight)=\"onArrowKey($event)\"\n    (keydown.shift.arrowLeft)=\"onArrowKey($event)\"\n    (keydown.shift.arrowUp)=\"onArrowKey($event)\"\n    (keydown.shift.arrowDown)=\"onArrowKey($event)\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div class=\"card-body overflow-auto\" body>\n      <ng-container #widgetHost />\n    </div>\n    @let footer = widgetInstanceFooter();\n    @if (footer) {\n      <div class=\"card-footer\" footer>\n        <ng-container *ngTemplateOutlet=\"footer\" />\n      </div>\n    }\n  </si-dashboard-card>\n</div>\n", styles: [":host{display:flex}::ng-deep body:not(:has(.ui-draggable-dragging)) .draggable-overlay{cursor:grab}::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;inset-block-end:6px!important;inset-inline-end:6px!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{inset:8px;position:absolute;z-index:100}\n"] }]
+        }], propDecorators: { widgetConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetConfig", required: true }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], componentFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentFactory", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], edit: [{ type: i0.Output, args: ["edit"] }], gridEvent: [{ type: i0.Output, args: ["gridEvent"] }], card: [{ type: i0.ViewChild, args: ['card', { isSignal: true }] }], widgetHost: [{ type: i0.ViewChild, args: ['widgetHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiGridstackWrapperComponent {
@@ -750,17 +1014,27 @@ class SiGridstackWrapperComponent {
      *
      * @defaultValue []
      */
-    widgetConfigs = input([]);
+    widgetConfigs = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetConfigs" }] : /* istanbul ignore next */ []));
     /**
      * Whenever gridstack allows to drag, resize or delete the grid item
      *
      * @defaultValue false
      */
-    editable = input(false);
+    editable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
     /**
      * Module configuration
      */
-    gridConfig = input();
+    gridConfig = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : /* istanbul ignore next */ []));
+    /**
+     * Map of widget id to widget definition, passed through to widget hosts.
+     *
+     * @defaultValue new Map()
+     */
+    widgetCatalogMap = input(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetCatalogMap" }] : /* istanbul ignore next */ []));
     /**
      * Emits dashboard grid events.
      */
@@ -773,44 +1047,38 @@ class SiGridstackWrapperComponent {
      * Emits the id of a widget instance that shall be edited.
      */
     widgetInstanceEdit = output();
-    gridstackContainer = viewChild('gridstackContainer', { read: ViewContainerRef });
+    widgetHosts = viewChildren(SiWidgetHostComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetHosts" }] : /* istanbul ignore next */ []));
+    widgetHostsMap = computed(() => new Map(this.widgetHosts().map(host => [host.widgetConfig().id, host])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetHostsMap" }] : /* istanbul ignore next */ []));
+    a11yWidgetsListLabel = t(() => $localize `:@@DASHBOARD.A11Y.WIDGETS_LIST:Dashboard widgets`);
     grid;
-    markedForRender = [];
-    gridItems = [];
-    itemIdAttr = 'item-id';
-    widgetIdSubscriptionMap = new Map();
     ngZone = inject(NgZone);
     elementRef = inject(ElementRef);
+    injector = inject(Injector);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    destroyRef = inject(DestroyRef);
     ngOnChanges(changes) {
-        if (changes.widgetConfigs) {
-            const { currentValue, previousValue, firstChange } = changes.widgetConfigs;
-            this.grid?.batchUpdate(true);
-            if (firstChange) {
-                this.markedForRender = currentValue;
+        if (changes.widgetConfigs && !changes.widgetConfigs.firstChange) {
+            const configs = changes.widgetConfigs.currentValue;
+            const newIds = new Set(configs.map(w => w.id));
+            const hostMap = this.widgetHostsMap();
+            const hasAdds = configs.some(w => !hostMap.has(w.id));
+            if (hasAdds) {
+                this.startBatch();
             }
-            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);
+            if (this.isBrowser) {
+                for (const [id, host] of hostMap) {
+                    if (!newIds.has(id)) {
+                        this.grid?.removeWidget(host.elementRef);
+                    }
                 }
             }
-            // 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);
-            }
+        if (changes.editable && !changes.editable.firstChange) {
+            this.grid?.enableMove(changes.editable.currentValue);
+            this.grid?.enableResize(changes.editable.currentValue);
         }
     }
     ngOnInit() {
@@ -824,107 +1092,32 @@ class SiGridstackWrapperComponent {
             ...initialViewMode
         };
         this.grid = GridStack.init(options, this.elementRef.nativeElement.firstChild);
+        this.startBatch();
         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
-        });
+        this.destroyRef.onDestroy(() => this.grid?.destroy());
     }
-    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);
-        }
+    startBatch() {
+        this.grid?.batchUpdate(true);
+        // this ensures that si-widget-host components are rendered before turning off batch mode.
+        afterNextRender(() => this.grid?.batchUpdate(false), { injector: this.injector });
     }
     /**
-     * GridItemComponents are created dynamically, change detection won't trigger as there is no \@Input binding.
-     * We have to update instance and run ChangeDetectionRef manually.
+     *
+     * Returns the position of a specific widget in the grid.
      */
-    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);
-            }
+    getWidgetLayout(widgetId) {
+        const gridItem = this.widgetHostsMap().get(widgetId);
+        if (!gridItem) {
+            return undefined;
         }
+        const element = gridItem.elementRef;
+        return {
+            id: widgetId,
+            x: Number(element.getAttribute('gs-x')) || 0,
+            y: Number(element.getAttribute('gs-y')) || 0,
+            width: Number(element.getAttribute('gs-w')) || 0,
+            height: Number(element.getAttribute('gs-h')) || 0
+        };
     }
     hookEvents(grid) {
         grid.on('added removed dragstop resizestop disable enable dropped resize resizestart drag dragstart change', (event) => {
@@ -936,16 +1129,96 @@ class SiGridstackWrapperComponent {
             });
         });
     }
-    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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiGridstackWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, widgetCatalogMap: { classPropertyName: "widgetCatalogMap", publicName: "widgetCatalogMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridEvent: "gridEvent", widgetInstanceRemove: "widgetInstanceRemove", widgetInstanceEdit: "widgetInstanceEdit" }, viewQueries: [{ propertyName: "widgetHosts", predicate: SiWidgetHostComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"grid-stack\"\n  [attr.role]=\"editable() ? null : 'list'\"\n  [attr.aria-label]=\"editable() ? null : (a11yWidgetsListLabel | translate)\"\n>\n  @if (grid) {\n    @for (item of widgetConfigs(); track item.id) {\n      <si-widget-host\n        [grid]=\"grid\"\n        [attr.item-id]=\"item.id\"\n        [editable]=\"editable()\"\n        [widgetConfig]=\"item\"\n        [componentFactory]=\"widgetCatalogMap().get(item.widgetId)?.componentFactory\"\n        (remove)=\"widgetInstanceRemove.emit(item.id)\"\n        (edit)=\"widgetInstanceEdit.emit(item)\"\n      />\n    }\n  }\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"], dependencies: [{ kind: "component", type: SiWidgetHostComponent, selector: "si-widget-host", inputs: ["widgetConfig", "grid", "componentFactory", "editable"], outputs: ["remove", "edit", "gridEvent"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridstackWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }]
-        }] });
+            args: [{ selector: 'si-gridstack-wrapper', imports: [SiWidgetHostComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n  class=\"grid-stack\"\n  [attr.role]=\"editable() ? null : 'list'\"\n  [attr.aria-label]=\"editable() ? null : (a11yWidgetsListLabel | translate)\"\n>\n  @if (grid) {\n    @for (item of widgetConfigs(); track item.id) {\n      <si-widget-host\n        [grid]=\"grid\"\n        [attr.item-id]=\"item.id\"\n        [editable]=\"editable()\"\n        [widgetConfig]=\"item\"\n        [componentFactory]=\"widgetCatalogMap().get(item.widgetId)?.componentFactory\"\n        (remove)=\"widgetInstanceRemove.emit(item.id)\"\n        (edit)=\"widgetInstanceEdit.emit(item)\"\n      />\n    }\n  }\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"] }]
+        }], propDecorators: { widgetConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetConfigs", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], widgetCatalogMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetCatalogMap", required: false }] }], gridEvent: [{ type: i0.Output, args: ["gridEvent"] }], widgetInstanceRemove: [{ type: i0.Output, args: ["widgetInstanceRemove"] }], widgetInstanceEdit: [{ type: i0.Output, args: ["widgetInstanceEdit"] }], widgetHosts: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiWidgetHostComponent), { isSignal: true }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base class encapsulating common widget editor lifecycle management.
+ * Both `SiWidgetCatalogComponent` and `SiWidgetInstanceEditorDialogComponent`
+ * extend this class to share editor setup, teardown, and status handling logic.
+ */
+class SiWidgetEditorBase {
+    /** Indicates if the current config is valid or not. */
+    invalidConfig = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidConfig" }] : /* istanbul ignore next */ []));
+    /** Marks the widget configuration as modified. */
+    widgetConfigModified = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetConfigModified" }] : /* istanbul ignore next */ []));
+    editorWizardState = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorWizardState" }] : /* istanbul ignore next */ []));
+    widgetInstanceEditor;
+    subscriptions = [];
+    editorHost = viewChild.required('editorHost', { read: ViewContainerRef });
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    ngOnDestroy() {
+        this.tearDownEditor();
+    }
+    loadWidgetEditor(widgetComponentFactory, host) {
+        return setupWidgetEditor(widgetComponentFactory, host, this.injector, this.envInjector);
+    }
+    initializeEditor(componentRef, config) {
+        this.widgetInstanceEditor = componentRef.instance;
+        if (isSignal(this.widgetInstanceEditor.config)) {
+            componentRef.setInput('config', config);
+        }
+        else {
+            this.widgetInstanceEditor.config = config;
+        }
+        // To be used by webcomponent wrapper
+        if ('statusChangesHandler' in this.widgetInstanceEditor) {
+            this.widgetInstanceEditor.statusChangesHandler = this.handleStatusChanges.bind(this);
+        }
+        if (this.widgetInstanceEditor.statusChanges) {
+            this.subscriptions.push(this.widgetInstanceEditor.statusChanges.subscribe(statusChanges => this.handleStatusChanges(statusChanges)));
+        }
+        else if (this.widgetInstanceEditor.configChange) {
+            this.subscriptions.push(this.widgetInstanceEditor.configChange.subscribe(() => this.widgetConfigModified.set(true)));
+        }
+        if (this.isEditorWizard(this.widgetInstanceEditor)) {
+            this.editorWizardState.set(this.widgetInstanceEditor.state);
+            if (this.widgetInstanceEditor.stateChange) {
+                this.subscriptions.push(this.widgetInstanceEditor.stateChange.subscribe(state => this.editorWizardState.set(state)));
+            }
+        }
+    }
+    tearDownEditor() {
+        this.invalidConfig.set(false);
+        this.widgetConfigModified.set(false);
+        this.editorWizardState.set(undefined);
+        this.widgetInstanceEditor = undefined;
+        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions = [];
+    }
+    isEditorWizard(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: "22.0.5", ngImport: i0, type: SiWidgetEditorBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: SiWidgetEditorBase, isStandalone: true, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetEditorBase, decorators: [{
+            type: Directive
+        }], propDecorators: { editorHost: [{ type: i0.ViewChild, args: ['editorHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -954,17 +1227,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * 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 {
+class SiWidgetInstanceEditorDialogComponent extends SiWidgetEditorBase {
     /**
      * Input for the widget instance configuration. It is used to populate the
      * widget editor.
      */
-    widgetConfig = model.required();
+    widgetConfig = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetConfig" }] : /* istanbul ignore next */ []));
     /**
      * Input for the widget definition. It is required to retrieve the component
      * factory to instantiate the widget editor.
      */
-    widget = input.required();
+    widget = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
     /**
      * Emits the edited widget instance configuration if the user confirms by
      * saving, or `undefined` if the user cancels the dialog.
@@ -974,10 +1249,8 @@ class SiWidgetInstanceEditorDialogComponent {
      * 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);
+    showNextButton = computed(() => this.editorWizardState() !== undefined ? true : false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNextButton" }] : /* istanbul ignore next */ []));
     disableNextButton = computed(() => {
         const wizardState = this.editorWizardState();
         if (!wizardState) {
@@ -992,12 +1265,15 @@ class SiWidgetInstanceEditorDialogComponent {
         else {
             return false;
         }
-    });
-    showPreviousButton = computed(() => !!this.editorWizardState());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableNextButton" }] : /* istanbul ignore next */ []));
+    showPreviousButton = computed(() => !!this.editorWizardState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPreviousButton" }] : /* istanbul ignore next */ []));
     disablePreviousButton = computed(() => {
         const wizardState = this.editorWizardState();
         return wizardState ? !wizardState.hasPrevious : true;
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disablePreviousButton" }] : /* istanbul ignore next */ []));
     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`);
@@ -1007,60 +1283,13 @@ class SiWidgetInstanceEditorDialogComponent {
     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.loadWidgetEditor(this.widget().componentFactory, this.editorHost()).subscribe(componentRef => {
+            this.initializeEditor(componentRef, this.widgetConfig());
             this.editorSetupCompleted.emit();
         });
     }
-    ngOnDestroy() {
-        this.tearDownEditor();
-    }
     onCancel() {
         if (!this.widgetConfigModified()) {
             this.closed.emit(undefined);
@@ -1089,13 +1318,13 @@ class SiWidgetInstanceEditorDialogComponent {
         }
     }
     onNext() {
-        if (this.isEditorWizdard(this.widgetInstanceEditor)) {
+        if (this.isEditorWizard(this.widgetInstanceEditor)) {
             this.widgetInstanceEditor.next();
             this.editorWizardState.set(this.widgetInstanceEditor.state);
         }
     }
     onPrevious() {
-        if (this.isEditorWizdard(this.widgetInstanceEditor) && this.editorWizardState()?.hasPrevious) {
+        if (this.isEditorWizard(this.widgetInstanceEditor) && this.editorWizardState()?.hasPrevious) {
             this.widgetInstanceEditor.previous();
             this.editorWizardState.set(this.widgetInstanceEditor.state);
         }
@@ -1114,80 +1343,59 @@ class SiWidgetInstanceEditorDialogComponent {
         }
         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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetInstanceEditorDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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" }, usesInheritance: 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: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetInstanceEditorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }]
-        }] });
+            args: [{ selector: 'si-widget-instance-editor-dialog', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
+        }], propDecorators: { widgetConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetConfig", required: true }] }, { type: i0.Output, args: ["widgetConfigChange"] }], widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }], editorSetupCompleted: [{ type: i0.Output, args: ["editorSetupCompleted"] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * 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);
+    widgetIdProvider = inject(SI_WIDGET_ID_PROVIDER);
     /**
      * 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);
+    gridConfig = input(inject(SI_DASHBOARD_CONFIGURATION)?.grid, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridConfig" }] : /* istanbul ignore next */ []));
     /**
      * 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;
+    editable = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
     /**
      * An optional, but recommended dashboard id that is used in persistence and passed
      * to the widget store for saving and loading data.
      */
-    dashboardId = input();
+    dashboardId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dashboardId" }] : /* istanbul ignore next */ []));
     /**
      * 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([]);
+    widgetCatalog = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetCatalog" }] : /* istanbul ignore next */ []));
+    widgetCatalogMap = computed(() => new Map(this.widgetCatalog().map(widget => [widget.id, widget])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetCatalogMap" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -1198,18 +1406,21 @@ class SiGridComponent {
      * widget `edit` action.
      *
      * @defaultValue false */
-    emitWidgetInstanceEditEvents = input(false);
+    emitWidgetInstanceEditEvents = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emitWidgetInstanceEditEvents" }] : /* istanbul ignore next */ []));
     /**
      * Option to turn off the loading spinner on save and load operations.
      *
      * @defaultValue false
      */
-    hideProgressIndicator = input(false);
+    hideProgressIndicator = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideProgressIndicator" }] : /* istanbul ignore next */ []));
     /**
      * 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();
+    widgetInstanceEditorDialogComponent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "widgetInstanceEditorDialogComponent" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -1260,13 +1471,6 @@ class SiGridComponent {
     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.
      */
@@ -1276,43 +1480,34 @@ class SiGridComponent {
         return !this.initialLoad && this.visibleWidgetInstances$.value.length === 0;
     }
     ngOnChanges(changes) {
-        // Reload widgets if the dashboardId changes. Do not load on inital
+        // Reload widgets if the dashboardId changes. Do not load on initial
         // 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();
+                this.resetEditState();
             }
             else {
-                this.cancel();
+                this.restoreSavedState();
             }
         }
-        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;
+        if (!this.editable()) {
             this.editable.set(true);
-            this.gridService.editable$.next(this.editableInternal);
+            this.resetEditState();
         }
     }
     /**
@@ -1320,30 +1515,27 @@ class SiGridComponent {
      * changes the editable and isModified modes.
      */
     save() {
-        if (!this.editableInternal) {
+        if (!this.editable()) {
             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));
+        // Update position information
+        const widgets = this.updateWidgetPositions(this.visibleWidgetInstances$.value);
+        const transientWidgetIds = new Set(this.transientWidgetInstances.map(w => w.id));
+        const modifiedWidgets = widgets.filter(widget => !transientWidgetIds.has(widget.id));
+        const addedWidgets = widgets.filter(widget => transientWidgetIds.has(widget.id));
         this.widgetStorage
-            .save(widgets, toRemove, this.dashboardId())
+            .save(modifiedWidgets, addedWidgets, this.markedForRemoval, 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);
             }
         });
     }
@@ -1351,18 +1543,10 @@ class SiGridComponent {
      * 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.restoreSavedState();
         }
-        this.gridService.editable$.next(this.editableInternal);
     }
     /**
      * Adds a new widget instance configuration to the dashboard grid. It is not
@@ -1371,7 +1555,7 @@ class SiGridComponent {
      * @param widgetInstanceConfig - The new widget configuration.
      */
     addWidgetInstance(widgetInstanceConfig) {
-        const id = `${NEW_WIDGET_PREFIX}${idCounter++}`;
+        const id = this.widgetIdProvider.generateWidgetId(widgetInstanceConfig, this.dashboardId());
         const newWidget = { ...widgetInstanceConfig, id };
         const nextWidgets = this.updateWidgetPositions([
             ...this.visibleWidgetInstances$.value,
@@ -1389,7 +1573,9 @@ class SiGridComponent {
     removeWidgetInstance(widgetInstanceId) {
         const widgetToRemove = this.visibleWidgetInstances$.value.find(widget => widget.id === widgetInstanceId);
         if (widgetToRemove) {
-            this.markedForRemoval.push(widgetToRemove);
+            if (!this.transientWidgetInstances.some(widget => widget.id === widgetToRemove.id)) {
+                this.markedForRemoval.push(widgetToRemove);
+            }
             let nextWidgets = this.visibleWidgetInstances$.value.filter(widget => widget.id !== widgetInstanceId);
             nextWidgets = this.updateWidgetPositions(nextWidgets);
             this.visibleWidgetInstances$.next(nextWidgets);
@@ -1404,12 +1590,12 @@ class SiGridComponent {
      */
     editWidgetInstance(widgetInstanceConfig) {
         // Need to edit a clone to avoid runtime editing
-        const widgetConfigClone = JSON.parse(JSON.stringify(widgetInstanceConfig));
+        const widgetConfigClone = structuredClone(widgetInstanceConfig);
         if (this.emitWidgetInstanceEditEvents()) {
             this.widgetInstanceEdit.emit(widgetConfigClone);
         }
         else {
-            const widget = this.gridService.getWidget(widgetConfigClone.widgetId);
+            const widget = this.widgetCatalogMap().get(widgetConfigClone.widgetId);
             const config = {
                 animated: true,
                 keyboard: true,
@@ -1449,6 +1635,14 @@ class SiGridComponent {
     }
     handleGridEvent(event) {
         const relevantEventTypes = ['added', 'removed', 'dragstop', 'resizestop'];
+        // When widgets without explicit x/y are first added, GridStack auto-positions them.
+        // Capture these resolved positions so cancel() can restore the exact layout
+        // instead of re-triggering auto-positioning which may produce a different result.
+        if (event.event.type === 'added' &&
+            !this.editable() &&
+            this.persistedWidgetInstances.some(w => w.x === undefined || w.y === undefined)) {
+            this.persistedWidgetInstances = this.updateWidgetPositions(this.persistedWidgetInstances);
+        }
         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);
@@ -1468,7 +1662,6 @@ class SiGridComponent {
         // 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);
@@ -1476,21 +1669,23 @@ class SiGridComponent {
                 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 wrapper = this.gridStackWrapper();
         const widgets = widgetConfigs.map(widget => {
-            const position = layout.find(p => p.id === widget.id);
-            if (position) {
+            const position = wrapper.getWidgetLayout(widget.id);
+            if (position &&
+                (widget.x !== position.x ||
+                    widget.y !== position.y ||
+                    widget.width !== position.width ||
+                    widget.height !== position.height)) {
                 return {
                     ...widget,
                     x: position.x,
@@ -1505,19 +1700,30 @@ class SiGridComponent {
         });
         return widgets || [];
     }
+    resetEditState() {
+        this.transientWidgetInstances = [];
+        this.markedForRemoval = [];
+        this.setModified(false);
+    }
+    restoreSavedState() {
+        if (this.modified) {
+            this.visibleWidgetInstances$.next([...this.persistedWidgetInstances]);
+            this.setModified(false);
+        }
+    }
     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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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" }, 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  [widgetCatalogMap]=\"widgetCatalogMap()\"\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", "widgetCatalogMap"], outputs: ["gridEvent", "widgetInstanceRemove", "widgetInstanceEdit"] }, { kind: "directive", type: SiLoadingSpinnerDirective, selector: "[siLoading]", inputs: ["siLoading", "blocking", "initialDelay"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }]
-        }] });
+            args: [{ selector: 'si-grid', imports: [SiGridstackWrapperComponent, SiLoadingSpinnerDirective, AsyncPipe], changeDetection: ChangeDetectionStrategy.Eager, 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  [widgetCatalogMap]=\"widgetCatalogMap()\"\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"] }]
+        }], propDecorators: { gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }, { type: i0.Output, args: ["editableChange"] }], dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: false }] }], widgetCatalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetCatalog", required: false }] }], emitWidgetInstanceEditEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitWidgetInstanceEditEvents", required: false }] }], hideProgressIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideProgressIndicator", required: false }] }], widgetInstanceEditorDialogComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetInstanceEditorDialogComponent", required: false }] }], isModified: [{ type: i0.Output, args: ["isModified"] }], widgetInstanceEdit: [{ type: i0.Output, args: ["widgetInstanceEdit"] }], gridStackWrapper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiGridstackWrapperComponent), { isSignal: true }] }] } });
 
 /**
  * Function creates a new {@link WidgetConfig} without id from a {@link Widget} and
@@ -1538,7 +1744,7 @@ const createWidgetConfig = (widget) => {
 };
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -1547,7 +1753,7 @@ const createWidgetConfig = (widget) => {
  * 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 {
+class SiWidgetCatalogComponent extends SiWidgetEditorBase {
     /**
      * Placeholder text for the search input field in the widget catalog.
      *
@@ -1556,7 +1762,8 @@ class SiWidgetCatalogComponent {
      * t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`)
      * ```
      */
-    searchPlaceholder = input(t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`));
+    searchPlaceholder = input(t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -1569,8 +1776,8 @@ class SiWidgetCatalogComponent {
      * @internal
      * @defaultValue 'list'
      */
-    view = signal('list');
-    editorHost = viewChild.required('editorHost', { read: ViewContainerRef });
+    view = signal('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     /**
      * Property to provide the available widgets to the catalog. The flexible
      * dashboard creates the catalog by Angular's `createComponent()` method
@@ -1587,9 +1794,12 @@ class SiWidgetCatalogComponent {
      * Array used to hold the search result on the widget catalog.
      * @defaultValue [] */
     filteredWidgetCatalog = [];
-    selected = signal(undefined);
+    selected = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     widgetConfig;
-    hasEditor = signal(false);
+    hasEditor = computed(() => !!this.selected()?.componentFactory.editorComponentName, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasEditor" }] : /* istanbul ignore next */ []));
+    translateService = injectSiTranslateService();
     labelCancel = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.CANCEL:Cancel`);
     labelPrevious = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.PREVIOUS:Previous`);
     labelNext = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.NEXT:Next`);
@@ -1599,10 +1809,15 @@ class SiWidgetCatalogComponent {
     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());
+    labelWidgetCatalogList = t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.WIDGET_CATALOG_LIST:Widget catalog list`);
+    showAddButton = computed(() => this.view() === 'list' ? !this.hasEditor() : true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
+    showNextButton = computed(() => this.view() === 'list' ? this.hasEditor() : this.editorWizardState() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNextButton" }] : /* istanbul ignore next */ []));
+    showPreviousButton = computed(() => this.view() === 'editor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPreviousButton" }] : /* istanbul ignore next */ []));
+    disableAddButton = computed(() => !this.selected() || this.invalidConfig(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableAddButton" }] : /* istanbul ignore next */ []));
     disableNextButton = computed(() => {
         const wizardState = this.editorWizardState();
         if (this.view() === 'list') {
@@ -1620,31 +1835,17 @@ class SiWidgetCatalogComponent {
         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 = [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableNextButton" }] : /* istanbul ignore next */ []));
     dialogService = inject(SiActionDialogService);
-    injector = inject(Injector);
-    envInjector = inject(EnvironmentInjector);
+    widgetCdkListbox = viewChild((CdkListbox), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetCdkListbox" }] : /* istanbul ignore next */ []));
     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 = '';
@@ -1652,7 +1853,11 @@ class SiWidgetCatalogComponent {
         }
         else {
             this.searchTerm = searchTerm;
-            this.filteredWidgetCatalog = this.widgetCatalog.filter(wd => wd.name.toLowerCase().includes(searchTerm.trim().toLowerCase()));
+            const term = searchTerm.trim().toLowerCase();
+            this.filteredWidgetCatalog = this.widgetCatalog.filter(wd => {
+                const name = this.translateService.translateSync(wd.name);
+                return name.toLowerCase().includes(term);
+            });
         }
         if (this.filteredWidgetCatalog.length > 0) {
             this.selectWidget(this.filteredWidgetCatalog[0]);
@@ -1662,7 +1867,7 @@ class SiWidgetCatalogComponent {
         }
     }
     onCancel() {
-        if (!this.widgetConfigModified) {
+        if (!this.widgetConfigModified()) {
             this.closed.emit(undefined);
         }
         else {
@@ -1687,18 +1892,18 @@ class SiWidgetCatalogComponent {
             this.setupWidgetInstanceEditor();
         }
         else {
-            if (this.isEditorWizdard(this.widgetInstanceEditor)) {
+            if (this.isEditorWizard(this.widgetInstanceEditor)) {
                 this.widgetInstanceEditor.next();
                 this.editorWizardState.set(this.widgetInstanceEditor.state);
             }
         }
     }
     onPrevious() {
-        if (this.isEditorWizdard(this.widgetInstanceEditor) && this.editorWizardState()?.hasPrevious) {
+        if (this.isEditorWizard(this.widgetInstanceEditor) && this.editorWizardState()?.hasPrevious) {
             this.widgetInstanceEditor.previous();
             this.editorWizardState.set(this.widgetInstanceEditor.state);
         }
-        else if (!this.widgetConfigModified) {
+        else if (!this.widgetConfigModified()) {
             this.setupCatalog();
         }
         else {
@@ -1726,61 +1931,17 @@ class SiWidgetCatalogComponent {
         this.tearDownEditor();
         this.view.set('editor');
         this.widgetConfig = createWidgetConfig(selected);
-        setupWidgetEditor(selected.componentFactory, this.editorHost(), this.injector, this.envInjector).subscribe({
+        this.loadWidgetEditor(selected.componentFactory, this.editorHost()).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);
-                        }));
-                    }
-                }
+                this.initializeEditor(componentRef, this.widgetConfig);
             },
             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.editorHost().clear();
         this.tearDownEditor();
         this.widgetConfig = undefined;
         this.view.set('list');
@@ -1806,34 +1967,30 @@ class SiWidgetCatalogComponent {
     }
     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;
+        if (widget) {
+            // need to keep this in setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
+            setTimeout(() => {
+                this.widgetCdkListbox()?.selectValue(widget);
+            });
         }
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetCatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: "widgetCdkListbox", first: true, predicate: (CdkListbox), descendants: true, isSignal: true }], usesInheritance: 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 class=\"si-layout-fixed-height text-pre-wrap text-break mt-6 bg-base-1 rounded-2\">\n        @if (filteredWidgetCatalog.length > 0) {\n          <span id=\"widget-catalog-list-description\" class=\"visually-hidden\">\n            {{ labelWidgetCatalogList | translate }}\n          </span>\n          <ul\n            class=\"si-layout-fixed-height list-group overflow-auto mb-0\"\n            aria-labelledby=\"widget-catalog-list-description\"\n            cdkListbox\n            [cdkListboxValue]=\"[]\"\n            (cdkListboxValueChange)=\"selectWidget($event.value[0])\"\n          >\n            @for (widget of filteredWidgetCatalog; track $index) {\n              <li\n                class=\"list-group-item list-group-item-action d-flex\"\n                [cdkOption]=\"widget\"\n                [class.active]=\"selected() === widget\"\n              >\n                <si-circle-status class=\"my-n4 me-5\" [icon]=\"widget.iconClass\" />\n                <div class=\"d-flex flex-column align-items-start align-self-center\">\n                  <span class=\"si-h5\">{{ widget.name | translate }}</span>\n                  <span class=\"si-body\">{{ widget.description?.trim() | translate }}</span>\n                </div>\n              </li>\n            }\n          </ul>\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 pb-4 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}.list-group-item{cursor:pointer}.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", "maxlength", "clearButtonAriaLabel"], 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: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiWidgetCatalogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }]
-        }] });
+            args: [{ selector: 'si-widget-catalog', imports: [
+                        SiSearchBarComponent,
+                        SiCircleStatusComponent,
+                        SiEmptyStateComponent,
+                        SiTranslatePipe,
+                        CdkListbox,
+                        CdkOption
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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 class=\"si-layout-fixed-height text-pre-wrap text-break mt-6 bg-base-1 rounded-2\">\n        @if (filteredWidgetCatalog.length > 0) {\n          <span id=\"widget-catalog-list-description\" class=\"visually-hidden\">\n            {{ labelWidgetCatalogList | translate }}\n          </span>\n          <ul\n            class=\"si-layout-fixed-height list-group overflow-auto mb-0\"\n            aria-labelledby=\"widget-catalog-list-description\"\n            cdkListbox\n            [cdkListboxValue]=\"[]\"\n            (cdkListboxValueChange)=\"selectWidget($event.value[0])\"\n          >\n            @for (widget of filteredWidgetCatalog; track $index) {\n              <li\n                class=\"list-group-item list-group-item-action d-flex\"\n                [cdkOption]=\"widget\"\n                [class.active]=\"selected() === widget\"\n              >\n                <si-circle-status class=\"my-n4 me-5\" [icon]=\"widget.iconClass\" />\n                <div class=\"d-flex flex-column align-items-start align-self-center\">\n                  <span class=\"si-h5\">{{ widget.name | translate }}</span>\n                  <span class=\"si-body\">{{ widget.description?.trim() | translate }}</span>\n                </div>\n              </li>\n            }\n          </ul>\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 pb-4 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}.list-group-item{cursor:pointer}.catalog-footer{align-items:center;display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.catalog-footer>*{margin-inline-start:16px}\n"] }]
+        }], propDecorators: { searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], widgetCdkListbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -1846,62 +2003,73 @@ class SiFlexibleDashboardComponent {
      *
      * @defaultValue false
      */
-    editable = model(false);
+    editable = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
     /**
      * Heading for the dashboard.
      */
-    heading = input();
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Optionally, provide a custom subclass of the SiWidgetCatalogComponent
      * to use your own catalog component.
      */
-    widgetCatalogComponent = input();
+    widgetCatalogComponent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "widgetCatalogComponent" }] : /* istanbul ignore next */ []));
     /**
      * Optionally, provide a custom subclass of the {@link SiWidgetInstanceEditorDialogComponent}
      * to use your own implementation.
      */
-    widgetInstanceEditorDialogComponent = input();
+    widgetInstanceEditorDialogComponent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "widgetInstanceEditorDialogComponent" }] : /* istanbul ignore next */ []));
     /**
      * 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();
+    dashboardId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dashboardId" }] : /* istanbul ignore next */ []));
     /**
      * Sets the available widgets for the widget catalog to the dashboard.
      *
      * @defaultValue [] */
-    widgetCatalog = input([]);
+    widgetCatalog = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetCatalog" }] : /* istanbul ignore next */ []));
     /**
      * Option to remove the add widget instance button from the primary toolbar.
      *
      * @defaultValue false
      */
-    hideAddWidgetInstanceButton = input(false);
+    hideAddWidgetInstanceButton = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideAddWidgetInstanceButton" }] : /* istanbul ignore next */ []));
     /**
      * Option to hide the dashboard edit button.
      *
      * @defaultValue false
      */
-    hideEditButton = input(false);
+    hideEditButton = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideEditButton" }] : /* istanbul ignore next */ []));
     /**
      *  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);
+    showEditButtonLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEditButtonLabel" }] : /* istanbul ignore next */ []));
     /**
      * Option to turn off the loading spinner on save and load operations.
      *
      * @defaultValue false
      */
-    hideProgressIndicator = input(false);
+    hideProgressIndicator = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideProgressIndicator" }] : /* istanbul ignore next */ []));
     /**
      * 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));
+    config = input(inject(SI_DASHBOARD_CONFIGURATION), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder text for the search input field in the widget catalog.
      *
@@ -1910,7 +2078,20 @@ class SiFlexibleDashboardComponent {
      * t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`)
      * ```
      */
-    searchPlaceholder = input(t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`));
+    searchPlaceholder = input(t(() => $localize `:@@DASHBOARD.WIDGET_LIBRARY.SEARCH_PLACEHOLDER:Search widget`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Primary action menu items shown in the edit mode of the dashboard.
+     * @defaultValue []
+     */
+    primaryEditActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryEditActions" }] : /* istanbul ignore next */ []));
+    /**
+     * Secondary action menu items shown in the edit mode of the dashboard.
+     * @defaultValue []
+     */
+    secondaryEditActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryEditActions" }] : /* istanbul ignore next */ []));
     /**
      * The grid component is the actual container for the widgets.
      */
@@ -1945,13 +2126,14 @@ class SiFlexibleDashboardComponent {
     ]);
     /**
      * 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.
+     * three, they will be placed 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');
+    isDashboardVisible = computed(() => this.viewState() === 'dashboard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDashboardVisible" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -1967,14 +2149,18 @@ class SiFlexibleDashboardComponent {
             default:
                 return this.heading();
         }
-    });
-    viewState = signal('dashboard');
-    subscriptions = [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageTitle" }] : /* istanbul ignore next */ []));
+    viewState = signal('dashboard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewState" }] : /* istanbul ignore next */ []));
     widgetStorage = inject(SI_WIDGET_STORE);
     hideAddWidgetInstanceButton$ = new BehaviorSubject(this.hideAddWidgetInstanceButton());
     dashboardId$ = new Subject();
-    outputRefSubscription = [];
     toolbar = viewChild.required('toolbar');
+    globalEditActions = inject(SI_DASHBOARD_TOOLBAR_ITEMS, { optional: true }) ?? {
+        primary: [],
+        secondary: []
+    };
     ngOnChanges(changes) {
         if (changes.dashboardId) {
             const dashboard = this.dashboard();
@@ -1982,39 +2168,22 @@ class SiFlexibleDashboardComponent {
                 dashboard.restore();
             }
             if (this.editable()) {
-                this.grid().cancel();
+                this.editable.set(false);
                 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
@@ -2026,39 +2195,50 @@ class SiFlexibleDashboardComponent {
             dashboard.restore();
         }
         if (!this.editable()) {
-            this.grid().edit();
+            this.editable.set(true);
         }
         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);
-            }
+        const catalogRef = this.catalogHost().createComponent(componentType, {
+            bindings: [
+                inputBinding('searchPlaceholder', this.searchPlaceholder),
+                outputBinding('closed', widgetConfig => {
+                    this.viewState.set('dashboard');
+                    this.catalogHost().clear();
+                    if (widgetConfig) {
+                        this.grid().addWidgetInstance(widgetConfig);
+                    }
+                })
+            ]
         });
+        catalogRef.instance.widgetCatalog = this.widgetCatalog();
     }
     onModified(event) {
         this.isModified.emit(event);
         this.toolbar().disableSaveButton.set(!event);
     }
     setupMenuItems() {
-        const primaryMenuItems = this.widgetStorage.getToolbarMenuItems
-            ? this.widgetStorage.getToolbarMenuItems(this.dashboardId()).primary
-            : of([]);
+        const primaryEditActions = [...this.primaryEditActions(), ...this.globalEditActions.primary];
+        const secondaryEditActions = [
+            ...this.secondaryEditActions(),
+            ...this.globalEditActions.secondary
+        ];
+        const primaryMenuItems = primaryEditActions.length
+            ? of(primaryEditActions)
+            : 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;
+        const secondaryMenuItems = secondaryEditActions.length
+            ? of(secondaryEditActions)
+            : 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))))
+                .pipe(takeUntil(this.dashboardId$))
                 .subscribe(items => this.secondaryEditActions$.next(items));
         }
     }
@@ -2066,7 +2246,7 @@ class SiFlexibleDashboardComponent {
         const next = hideAddWidgetInstanceButton
             ? []
             : [this.addWidgetInstanceAction];
-        next.push(...items.map(item => this.proxyMenuItemAction(item)));
+        next.push(...items);
         this.primaryEditActions$.next(next);
     }
     editWidgetInstance(widgetConfig) {
@@ -2078,82 +2258,121 @@ class SiFlexibleDashboardComponent {
         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);
-            }
+        this.catalogHost().createComponent(componentType, {
+            bindings: [
+                inputBinding('widgetConfig', () => widgetConfig),
+                inputBinding('widget', () => widget),
+                outputBinding('closed', editedWidgetConfig => {
+                    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiFlexibleDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", 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 }, primaryEditActions: { classPropertyName: "primaryEditActions", publicName: "primaryEditActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryEditActions: { classPropertyName: "secondaryEditActions", publicName: "secondaryEditActions", 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    [disabled]=\"(grid.isLoading | async) ?? false\"\n    [hideEditButton]=\"hideEditButton()\"\n    [showEditButtonLabel]=\"showEditButtonLabel()\"\n    [grid]=\"grid\"\n    [(editable)]=\"editable\"\n    (save)=\"grid.save()\"\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      [(editable)]=\"editable\"\n      (isModified)=\"onModified($event)\"\n      (widgetInstanceEdit)=\"editWidgetInstance($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", "grid"], outputs: ["disableSaveButtonChange", "editableChange", "save"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFlexibleDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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"] }]
-        }] });
+            args: [{ selector: 'si-flexible-dashboard', imports: [SiDashboardComponent, SiDashboardToolbarComponent, SiGridComponent, AsyncPipe], changeDetection: ChangeDetectionStrategy.Eager, 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    [disabled]=\"(grid.isLoading | async) ?? false\"\n    [hideEditButton]=\"hideEditButton()\"\n    [showEditButtonLabel]=\"showEditButtonLabel()\"\n    [grid]=\"grid\"\n    [(editable)]=\"editable\"\n    (save)=\"grid.save()\"\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      [(editable)]=\"editable\"\n      (isModified)=\"onModified($event)\"\n      (widgetInstanceEdit)=\"editWidgetInstance($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"] }]
+        }], propDecorators: { editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }, { type: i0.Output, args: ["editableChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], widgetCatalogComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetCatalogComponent", required: false }] }], widgetInstanceEditorDialogComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetInstanceEditorDialogComponent", required: false }] }], dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: false }] }], widgetCatalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetCatalog", required: false }] }], hideAddWidgetInstanceButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAddWidgetInstanceButton", required: false }] }], hideEditButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideEditButton", required: false }] }], showEditButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditButtonLabel", required: false }] }], hideProgressIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideProgressIndicator", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], primaryEditActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryEditActions", required: false }] }], secondaryEditActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryEditActions", required: false }] }], grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], dashboard: [{ type: i0.ViewChild, args: ['dashboard', { isSignal: true }] }], catalogHost: [{ type: i0.ViewChild, args: ['catalogHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], isModified: [{ type: i0.Output, args: ["isModified"] }], toolbar: [{ type: i0.ViewChild, args: ['toolbar', { isSignal: true }] }] } });
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * A presentational (dumb) component that renders a single widget instance from a
+ * {@link WidgetConfig} using the provided {@link Widget} definition. It delegates
+ * the actual rendering to the {@link SiWidgetHostComponent}.
+ *
+ * **Intended Usage**
+ *
+ * This component renders an individual widget outside of a dashboard or grid,
+ * without requiring manual host wiring. It is a self-contained widget cell that
+ * can be placed anywhere a single widget needs to be shown, for example in kiosk
+ * mode or within a custom layout such as a carousel.
+ *
+ * **Example**
+ *
+ * ```html
+ * <!-- Render a single widget instance -->
+ * <si-widget-renderer [widgetConfig]="widgetConfig" [widget]="widget" />
+ * ```
+ */
+class SiWidgetRendererComponent {
+    /** The configuration of the widget instance to render. */
+    widgetConfig = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetConfig" }] : /* istanbul ignore next */ []));
+    /**
+     * The {@link Widget} definition used to render the given {@link widgetConfig}.
+     * It must match the config's `widgetId`.
+     */
+    widget = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: SiWidgetRendererComponent, isStandalone: true, selector: "si-widget-renderer", inputs: { widgetConfig: { classPropertyName: "widgetConfig", publicName: "widgetConfig", isSignal: true, isRequired: true, transformFunction: null }, widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<si-widget-host\n  class=\"h-100\"\n  [widgetConfig]=\"widgetConfig()\"\n  [componentFactory]=\"widget().componentFactory\"\n/>\n", styles: ["si-widget-host ::ng-deep .grid-stack-item-content{flex:1 1 auto;min-inline-size:0;min-block-size:0;padding:0!important}\n"], dependencies: [{ kind: "component", type: SiWidgetHostComponent, selector: "si-widget-host", inputs: ["widgetConfig", "grid", "componentFactory", "editable"], outputs: ["remove", "edit", "gridEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiWidgetRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-widget-renderer', imports: [SiWidgetHostComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-widget-host\n  class=\"h-100\"\n  [widgetConfig]=\"widgetConfig()\"\n  [componentFactory]=\"widget().componentFactory\"\n/>\n", styles: ["si-widget-host ::ng-deep .grid-stack-item-content{flex:1 1 auto;min-inline-size:0;min-block-size:0;padding:0!important}\n"] }]
+        }], propDecorators: { widgetConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetConfig", required: true }] }], widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }] } });
+
+/**
+ * Formats an error message for failed module loading.
+ */
+const formatLoadingError = (factory, rejection) => rejection
+    ? `Loading widget module ${factory.exposedModule} failed with ${String(rejection)}`
+    : `Loading widget module ${factory.exposedModule} failed`;
+/**
+ * Handles the result of a federated module loading promise.
+ * This is the main utility function that encapsulates the common loading pattern
+ * used across module-federation, native-federation, and mf-bridge loaders.
+ *
+ * @param options - Configuration options for loading and creating the component
+ * @returns Observable that emits the ComponentRef once the component is created
+ * @internal
+ */
+const handleFederatedModuleLoad = ({ loadPromise, factory, componentName, host, injector, environmentInjector }) => {
+    const result = new Subject();
+    loadPromise.then(module => {
+        if (module) {
+            const componentType = module[factory[componentName]];
+            const widgetInstanceRef = host.createComponent(componentType, {
+                injector,
+                environmentInjector
+            });
+            result.next(widgetInstanceRef);
+        }
+        result.complete();
+    }, rejection => result.error(formatLoadingError(factory, rejection)));
+    return result;
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
  * 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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiDashboardsNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", 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] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiDashboardsNgModule, imports: [SiFlexibleDashboardComponent,
+            SiGridComponent,
+            SiWidgetCatalogComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiDashboardsNgModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiDashboardsNgModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2170,9 +2389,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     ]
                 }]
         }] });
+/**
+ * @deprecated Use {@link SiDashboardsNgModule} instead. The `Simpl` prefix is deprecated and will be removed in v51.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const SimplDashboardsNgModule = SiDashboardsNgModule;
 
 /**
- * Copyright (c) Siemens 2016 - 2025
+ * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 
@@ -2180,5 +2404,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * 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 };
+export { DEFAULT_GRIDSTACK_OPTIONS, DEFAULT_WIDGET_STORAGE_TOKEN, SI_DASHBOARD_CONFIGURATION, SI_DASHBOARD_TOOLBAR_ITEMS, SI_WIDGET_ID_PROVIDER, SI_WIDGET_STORE, STORAGE_KEY, SiDashboardsNgModule, SiDefaultWidgetStorage, SiFlexibleDashboardComponent, SiGridComponent, SiWidgetCatalogComponent, SiWidgetDefaultIdProvider, SiWidgetIdProvider, SiWidgetInstanceEditorDialogComponent, SiWidgetRendererComponent, SiWidgetStorage, SimplDashboardsNgModule, createWidgetConfig, handleFederatedModuleLoad, provideDashboardToolbarItems, setupWidgetEditor, setupWidgetInstance, widgetFactoryRegistry };
 //# sourceMappingURL=spike-rabbit-dashboards-ng.mjs.map