@yuuvis/client-components 3.2.2 → 3.3.0

package/fesm2022/yuuvis-client-components-widget-grid.mjs

@@ -1,60 +1,87 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, inject, input, effect, output, viewChild, TemplateRef, signal, computed, untracked, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
-import * as i3$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateService, TranslatePipe } from '@yuuvis/client-core';
-import { Gridster, DisplayGrid, GridType, GridsterItem } from 'angular-gridster2';
-import * as i3 from 'ng-dynamic-component';
-import { DynamicIoModule } from 'ng-dynamic-component';
-import { ReplaySubject, Subject } from 'rxjs';
-import * as i3$1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { Input, Component, inject, Injectable, input, output, signal, effect, DestroyRef, viewChild, TemplateRef, computed, untracked, NgModule } from '@angular/core';
+import * as i3$2 from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import { DialogComponent, ConfirmService } from '@yuuvis/client-components/common';
-import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
-import * as i4 from '@angular/material/tooltip';
-import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import * as i5$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2$1 from '@angular/material/input';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import { DialogComponent, ConfirmService } from '@yuuvis/client-components/common';
+import { TranslateService, TranslatePipe, Logger } from '@yuuvis/client-core';
+import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Gridster, DisplayGrid, GridType, GridsterItem } from 'angular-gridster2';
+import * as i3$1 from 'ng-dynamic-component';
+import { DynamicIoModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
+import { ReplaySubject, Subject } from 'rxjs';
 import { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
 
-class WidgetGridEventService {
-    widgetGridEventSource = new ReplaySubject();
-    widgetEvents$ = this.widgetGridEventSource.asObservable();
-    trigger(evt) {
-        this.widgetGridEventSource.next(evt);
+class WidgetGridUtils {
+    static PREF_FUNCTION = 'Function';
+    static PREF_RANGEVALUE = 'RangeValue';
+    /**
+     * Takes a `WidgetGridItemConfig` and stringifies it. The challenge
+     * here is that callback functions should also be stringified.
+     * @param gridItemConfig the config object
+     */
+    static gridConfigStringify(o) {
+        return JSON.stringify(o, (key, value) => {
+            if (typeof value === 'function') {
+                return `/${WidgetGridUtils.PREF_FUNCTION}(${value.toString()})/`;
+            }
+            return value;
+        });
+    }
+    /**
+     * Takes a string stringified with `gridConfigStringify()` and parses it
+     * to output a proper WidgetGridItemConfig.
+     * @param stringifiedConfig stringified widget grid config
+     */
+    static gridConfigParse(stringifiedConfig) {
+        return JSON.parse(stringifiedConfig, function (key, value) {
+            if (typeof value === 'string' &&
+                value.startsWith(`/${WidgetGridUtils.PREF_FUNCTION}(`) &&
+                // value.startsWith('/Function(') &&
+                value.endsWith(')/')) {
+                value = value.substring(WidgetGridUtils.PREF_FUNCTION.length + 2, value.length - 2);
+                return (0, eval)('(' + value + ')');
+            }
+            return value;
+        });
+    }
+    static uuid() {
+        return WidgetGridUtils._p8() + WidgetGridUtils._p8(true) + WidgetGridUtils._p8(true) + WidgetGridUtils._p8();
+    }
+    static _p8(s) {
+        const p = (Math.random().toString(16) + '000000000').substr(2, 8);
+        return s ? `-${p.substr(0, 4)}-${p.substr(4, 4)}` : p;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridEventService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 class NoopComponent {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     widgetConfig;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: NoopComponent, isStandalone: true, selector: "yuv-noop", inputs: { widgetConfig: "widgetConfig" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--text-color-caption)}:host span{margin-top:var(--ymt-spacing-m)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: NoopComponent, isStandalone: true, selector: "yuv-noop", inputs: { widgetConfig: "widgetConfig" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--ymt-text-color-subtle)}:host span{margin-top:var(--ymt-spacing-m)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NoopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-noop', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--text-color-caption)}:host span{margin-top:var(--ymt-spacing-m)}\n"] }]
+            args: [{ selector: 'yuv-noop', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.5\"/><circle cx=\"8.5\" cy=\"9.5\" r=\"1.5\"/><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z\"/></svg>", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:center;padding:var(--ymt-spacing-m);background-color:var(--panel-background);opacity:.7}:host svg{width:48px;height:48px;fill:var(--ymt-text-color-subtle)}:host span{margin-top:var(--ymt-spacing-m)}\n"] }]
         }], propDecorators: { widgetConfig: [{
                 type: Input
             }] } });
@@ -73,7 +100,7 @@ class WidgetGridRegistry {
     registeredWidgets = [];
     /**
      * Buckets are collection of widget references.
-     * You can put any widget registered gloabally into a bucket. Later on you can grab
+     * You can put any widget registered globally into a bucket. Later on you can grab
      * widgets from a certain bucket. This enables apps to structure their widgets when e.g.
      * using multiple widget grids with their own set of available widgets.
      */
@@ -102,7 +129,7 @@ class WidgetGridRegistry {
      * is not widget registered with the given name
      */
     getWidgetSetupComponent(widgetName) {
-        const widget = this.registeredWidgets.find((w) => w.id === widgetName);
+        const widget = this.registeredWidgets.find((widget) => widget.id === widgetName);
         if (!widget)
             throw Error('Widget setup component not found');
         return widget.setupComponent;
@@ -115,11 +142,24 @@ class WidgetGridRegistry {
      * no component registered with the given name
      */
     getWidgetComponent(widgetName) {
-        const widget = this.registeredWidgets.find((w) => w.id === widgetName);
+        const widget = this.registeredWidgets.find((widget) => widget.id === widgetName);
         if (!widget)
             console.error('Widget component not found');
         return widget?.widgetComponent || NoopComponent;
     }
+    /**
+     * Evaluates whether the widget with the given name is applicable for
+     * the current runtime context. Widgets without an `isApplicable`
+     * predicate are considered applicable. Unknown widgets are reported
+     * as applicable so the noop fallback can still render.
+     * @param widgetName The widgets name
+     */
+    isWidgetApplicable(widgetName) {
+        const widget = this.registeredWidgets.find((widget) => widget.id === widgetName);
+        if (!widget)
+            return true;
+        return widget.isApplicable?.() ?? true;
+    }
     /**
      * Adds a new widget to the list of registered widgets. That way
      * you can create custom widgets that are then available to be
@@ -129,12 +169,12 @@ class WidgetGridRegistry {
      * not exist it'll be created.
      */
     registerGridWidget(widget, buckets) {
-        const existingWidget = this.registeredWidgets.find((w) => w.id === widget.id);
+        const existingWidget = this.registeredWidgets.find((item) => item.id === widget.id);
         if (!existingWidget)
             this.registeredWidgets.push(widget);
         if (buckets?.length) {
-            buckets.forEach((b) => {
-                this._addToBucket(b, widget.id);
+            buckets.forEach((bucket) => {
+                this._addToBucket(bucket, widget.id);
             });
         }
     }
@@ -145,24 +185,18 @@ class WidgetGridRegistry {
      * not exist it'll be created.
      */
     registerGridWidgets(widgets, buckets) {
-        const alreadyRegisteredWidgetNames = this.registeredWidgets.map((w) => w.id);
-        const widgetsToRegister = widgets.filter((w) => !alreadyRegisteredWidgetNames.includes(w.id));
-        this.registeredWidgets = [...this.registeredWidgets, ...widgetsToRegister.map((w) => this.#translateLabel(w))];
+        const alreadyRegisteredWidgetNames = this.registeredWidgets.map((widget) => widget.id);
+        const widgetsToRegister = widgets.filter((widget) => !alreadyRegisteredWidgetNames.includes(widget.id));
+        this.registeredWidgets = [
+            ...this.registeredWidgets,
+            ...widgetsToRegister.map((widget) => this.#translateLabel(widget))
+        ];
         if (buckets?.length) {
-            buckets.forEach((b) => widgets.forEach((w) => this._addToBucket(b, w.id)));
+            buckets.forEach((bucket) => widgets.forEach((widget) => this._addToBucket(bucket, widget.id)));
         }
     }
-    #translateLabel(widget) {
-        const translatedLabel = this.translate.instant(widget.label);
-        return { ...widget, label: translatedLabel && !translatedLabel.startsWith('!missing') ? translatedLabel : widget.label };
-    }
-    _addToBucket(bucket, widgetName) {
-        if (!this.widgetBuckets[bucket])
-            this.widgetBuckets[bucket] = [];
-        this.widgetBuckets[bucket].push(widgetName);
-    }
     removeRegisteredWidget(id) {
-        this.registeredWidgets = this.registeredWidgets.filter((w) => w.id !== id);
+        this.registeredWidgets = this.registeredWidgets.filter((widget) => widget.id !== id);
     }
     clearRegisteredWidget() {
         this.registeredWidgets = [];
@@ -175,35 +209,55 @@ class WidgetGridRegistry {
      * @returns Array of grid widgets
      */
     getRegisteredWidgets(buckets) {
+        const applicable = (widget) => widget.isApplicable?.() ?? true;
         if (buckets?.length) {
             // buckets may contain wildcards ...
             // grab all buckets matching the wildcards
             const matchedBuckets = {};
-            buckets.forEach((b) => {
-                if (b.match(/[*?]/)) {
+            buckets.forEach((bucket) => {
+                if (bucket.match(/[*?]/)) {
                     // bucket has a pattern
-                    Object.keys(this.widgetBuckets).forEach((wb) => {
-                        if (this._wildcardMatch(wb, b))
-                            matchedBuckets[wb] = 0;
+                    Object.keys(this.widgetBuckets).forEach((widgetBucket) => {
+                        if (this._wildcardMatch(widgetBucket, bucket))
+                            matchedBuckets[widgetBucket] = 0;
                     });
                 }
                 else
-                    matchedBuckets[b] = 0;
+                    matchedBuckets[bucket] = 0;
             });
             const bucketWidgetNames = {};
-            Object.keys(matchedBuckets).forEach((b) => this.widgetBuckets[b].forEach((widgetName) => {
+            Object.keys(matchedBuckets).forEach((bucket) => this.widgetBuckets[bucket].forEach((widgetName) => {
                 bucketWidgetNames[widgetName] = 0;
             }));
             const widgetNames = Object.keys(bucketWidgetNames);
-            return this.registeredWidgets.filter((w) => widgetNames.includes(w.id)).map((w) => this.#translateLabel(w));
+            return this.registeredWidgets
+                .filter((gridWidget) => widgetNames.includes(gridWidget.id) && applicable(gridWidget))
+                .map((widget) => this.#translateLabel(widget));
         }
         else
-            return this.registeredWidgets.map((w) => this.#translateLabel(w));
+            return this.registeredWidgets.filter(applicable).map((widget) => this.#translateLabel(widget));
     }
     _wildcardMatch(text, pattern) {
         const regexPattern = new RegExp('^' + pattern.replace(/\?/g, '.').replace(/\*/g, '.*') + '$');
         return regexPattern.test(text);
     }
+    _addToBucket(bucket, widgetName) {
+        if (!this.widgetBuckets[bucket])
+            this.widgetBuckets[bucket] = [];
+        this.widgetBuckets[bucket].push(widgetName);
+    }
+    #translateLabel(widget) {
+        return {
+            ...widget,
+            label: this.#tryTranslate(widget.label),
+            description: widget.description ? this.#tryTranslate(widget.description) : widget.description,
+            group: widget.group ? this.#tryTranslate(widget.group) : widget.group
+        };
+    }
+    #tryTranslate(value) {
+        const translated = this.translate.instant(value);
+        return translated && !translated.startsWith('!missing') ? translated : value;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridRegistry, providedIn: 'root' });
 }
@@ -214,48 +268,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }] });
 
-class WidgetGridUtils {
-    static PREF_FUNCTION = 'Function';
-    static PREF_RANGEVALUE = 'RangeValue';
-    /**
-     * Takes a `WidgetGridItemConfig` and stringifies it. The challenge
-     * here is that callback functions should also be stringified.
-     * @param gridItemConfig the config object
-     */
-    static gridConfigStringify(o) {
-        return JSON.stringify(o, (key, value) => {
-            if (typeof value === 'function') {
-                return `/${WidgetGridUtils.PREF_FUNCTION}(${value.toString()})/`;
-            }
-            return value;
-        });
-    }
-    /**
-     * Takes a string stringified with `gridConfigStringify()` and parses it
-     * to output a proper WidgetGridItemConfig.
-     * @param stringifiedConfig stringified widget grid config
-     */
-    static gridConfigParse(stringifiedConfig) {
-        return JSON.parse(stringifiedConfig, function (key, value) {
-            if (typeof value === 'string' &&
-                value.startsWith(`/${WidgetGridUtils.PREF_FUNCTION}(`) &&
-                // value.startsWith('/Function(') &&
-                value.endsWith(')/')) {
-                value = value.substring(WidgetGridUtils.PREF_FUNCTION.length + 2, value.length - 2);
-                return (0, eval)('(' + value + ')');
-            }
-            return value;
-        });
-    }
-    static uuid() {
-        return WidgetGridUtils._p8() + WidgetGridUtils._p8(true) + WidgetGridUtils._p8(true) + WidgetGridUtils._p8();
-    }
-    static _p8(s) {
-        const p = (Math.random().toString(16) + '000000000').substr(2, 8);
-        return s ? `-${p.substr(0, 4)}-${p.substr(4, 4)}` : p;
-    }
-}
-
 /**
  * Service managing a widget grid. Also includes a set of labels that will be
  * used by the grid and its widgets. Default labels are provided out of the
@@ -265,45 +277,48 @@ class WidgetGridUtils {
  * consider using those labels as well.
  */
 class WidgetGridService {
-    widgetGridRegistry;
-    widgetGrid = [];
-    widgetGridSource = new ReplaySubject();
-    widgetGrid$ = this.widgetGridSource.asObservable();
-    widgetGridUpdateSource = new Subject();
+    //#region Dependencies
+    #widgetGridRegistry = inject(WidgetGridRegistry);
+    //#endregion
+    //#region Class properties
+    #widgetGrid = [];
+    #widgetGridSource = new ReplaySubject();
+    widgetGrid$ = this.#widgetGridSource.asObservable();
+    #widgetGridUpdateSource = new Subject();
     /**
      * Emitted when the widget grid has been updated
      */
-    widgetGridUpdate$ = this.widgetGridUpdateSource.asObservable();
+    widgetGridUpdate$ = this.#widgetGridUpdateSource.asObservable();
     addItemSize = {
         rows: 2,
-        cols: 3,
+        cols: 3
     };
-    constructor(widgetGridRegistry) {
-        this.widgetGridRegistry = widgetGridRegistry;
-    }
+    //#endregion
+    //#region Public methods
     setWidgetGrid(gridItemConfig) {
         if (gridItemConfig) {
             // create actual widget grid from widget grid config
-            this.widgetGrid = [...gridItemConfig].map((gic) => {
-                const cmp = this.widgetGridRegistry.getWidgetComponent(gic.widgetName);
-                const gc = {
+            this.#widgetGrid = [...gridItemConfig].map((gic) => {
+                const cmp = this.#widgetGridRegistry.getWidgetComponent(gic.widgetName);
+                const gridItem = {
                     ...gic,
                     widget: cmp,
                     widgetConfigMap: {
                         widgetConfig: cmp === NoopComponent
                             ? {
-                                widgetName: gic.widgetName,
+                                widgetName: gic.widgetName
                             }
-                            : gic.widgetConfig,
+                            : gic.widgetConfig
                     },
+                    isApplicable: this.#widgetGridRegistry.isWidgetApplicable(gic.widgetName)
                 };
-                return gc;
+                return gridItem;
             });
         }
         else {
-            this.widgetGrid = [];
+            this.#widgetGrid = [];
         }
-        this.widgetGridSource.next(this.widgetGrid);
+        this.#widgetGridSource.next(this.#widgetGrid);
     }
     /**
      * Update config of an existing widget
@@ -311,29 +326,30 @@ class WidgetGridService {
      * @param setupWidgetConfig The updated configuration for that widget
      */
     updateWidget(widgetId, setupWidgetConfig) {
-        const gridWidget = this.widgetGrid.find((w) => w.id === widgetId);
+        const gridWidget = this.#widgetGrid.find((widget) => widget.id === widgetId);
         if (gridWidget && setupWidgetConfig) {
             gridWidget.widgetConfig = setupWidgetConfig;
             gridWidget.widgetConfigMap = { widgetConfig: setupWidgetConfig };
         }
-        this.widgetGridSource.next(this.widgetGrid);
-        this.widgetGridUpdateSource.next(widgetId);
+        this.#widgetGridSource.next(this.#widgetGrid);
+        this.#widgetGridUpdateSource.next(widgetId);
     }
     replaceWidget(widgetId, widgetName, setupWidgetConfig) {
-        const gridWidgetIndex = this.widgetGrid.findIndex((w) => w.id === widgetId);
+        const gridWidgetIndex = this.#widgetGrid.findIndex((widget) => widget.id === widgetId);
         if (gridWidgetIndex !== -1) {
-            const w = {
-                ...this.widgetGrid[gridWidgetIndex],
+            const widget = {
+                ...this.#widgetGrid[gridWidgetIndex],
                 ...{
                     widgetName,
                     widgetConfig: setupWidgetConfig || {},
-                    widget: this.widgetGridRegistry.getWidgetComponent(widgetName),
+                    widget: this.#widgetGridRegistry.getWidgetComponent(widgetName),
                     widgetConfigMap: { widgetConfig: setupWidgetConfig || {} },
-                },
+                    isApplicable: this.#widgetGridRegistry.isWidgetApplicable(widgetName)
+                }
             };
-            this.widgetGrid[gridWidgetIndex] = w;
-            this.widgetGridSource.next(this.widgetGrid);
-            this.widgetGridUpdateSource.next(widgetId);
+            this.#widgetGrid[gridWidgetIndex] = widget;
+            this.#widgetGridSource.next(this.#widgetGrid);
+            this.#widgetGridUpdateSource.next(widgetId);
         }
     }
     /**
@@ -346,101 +362,90 @@ class WidgetGridService {
             id: WidgetGridUtils.uuid(),
             widgetName,
             widgetConfig: setupWidgetConfig,
-            widget: this.widgetGridRegistry.getWidgetComponent(widgetName),
+            widget: this.#widgetGridRegistry.getWidgetComponent(widgetName),
             widgetConfigMap: { widgetConfig: setupWidgetConfig },
+            isApplicable: this.#widgetGridRegistry.isWidgetApplicable(widgetName),
             x: 0,
             y: 0,
             rows: this.addItemSize.rows,
-            cols: this.addItemSize.cols,
+            cols: this.addItemSize.cols
         };
-        this.widgetGrid.push(gridWidget);
-        this.widgetGridSource.next(this.widgetGrid);
-        this.widgetGridUpdateSource.next(gridWidget.id);
+        this.#widgetGrid.push(gridWidget);
+        this.#widgetGridSource.next(this.#widgetGrid);
+        this.#widgetGridUpdateSource.next(gridWidget.id);
     }
     removeWidget(gridItemId) {
-        const idx = this.widgetGrid.findIndex((w) => w.id === gridItemId);
-        this.widgetGrid.splice(idx, 1);
-        this.widgetGridSource.next(this.widgetGrid);
-        this.widgetGridUpdateSource.next(gridItemId);
+        const idx = this.#widgetGrid.findIndex((widget) => widget.id === gridItemId);
+        this.#widgetGrid.splice(idx, 1);
+        this.#widgetGridSource.next(this.#widgetGrid);
+        this.#widgetGridUpdateSource.next(gridItemId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: WidgetGridRegistry }] });
+        }] });
 
 class WidgetPickerComponent {
+    //#region Dependencies
     #widgetGridRegistry = inject(WidgetGridRegistry);
     #widgetGridService = inject(WidgetGridService);
+    translate = inject(TranslateService);
     #dialogData = inject(MAT_DIALOG_DATA);
     #dialogRef = inject((MatDialogRef));
-    pickerFormControl = new FormControl();
+    //#endregion
+    //#region Angular stuff
+    pickerData = input(this.#dialogData.pickerData, ...(ngDevMode ? [{ debugName: "pickerData" }] : /* istanbul ignore next */ []));
+    /**
+     * Collection of buckets to load available widgets from. Wildcards are also posssible:
+     * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
+     *
+     * `*` represents any character 0-n times
+     * `?` represents exactly one character
+     */
+    buckets = input(this.#dialogData.buckets, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
+    picked = output();
+    canceled = output();
+    //#endregion
+    //#region Properties
+    #DEFAULT_GROUP_KEY = 'yuv.widget-grid.widget-picker.group.default';
     widgetId;
     selectedWidget;
+    // ADR: InputsType (not AttributesMap) - bound via ndcDynamicInputs in the template,
+    // so values are component inputs (unknown), not HTML attribute strings.
     widgetConfigMap = {};
     setupWidgetConfig;
     widgetConfigDirty = false;
     widgetConfigState;
     registeredWidgets = [];
+    groupedWidgets = [];
     setupWidgetDynamicOutputs = {
         widgetConfigChange: (widgetConfig) => {
-            this.onSetupConfigChange(widgetConfig);
+            this.#handleSetupConfigChange(widgetConfig);
         },
-        widgetConfigStateChange: (s) => {
-            this.widgetConfigState = s || undefined;
+        widgetConfigStateChange: (widgetConfigState) => {
+            this.widgetConfigState = widgetConfigState;
         }
     };
-    pickerData = input(this.#dialogData.pickerData, ...(ngDevMode ? [{ debugName: "pickerData" }] : /* istanbul ignore next */ []));
-    #pickerDataEffect = effect(() => {
-        const pd = this.pickerData();
-        if (pd) {
-            const gridWidget = this.#widgetGridRegistry
-                .getRegisteredWidgets()
-                .find((w) => w.id === pd.widgetName);
-            this.selectedWidget = gridWidget?.setupComponent ? gridWidget : undefined;
-            this.widgetConfigMap = pd.widgetConfigMap || {};
-            this.widgetId = pd.widgetId;
-        }
-    }, ...(ngDevMode ? [{ debugName: "#pickerDataEffect" }] : /* istanbul ignore next */ []));
-    /**
-     * Collection of buckets to load available widgets from. Wildcards are also posssible:
-     * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
-     *
-     * `*` represents any character 0-n times
-     * `?` represents exactly one character
-     */
-    buckets = input(this.#dialogData.buckets, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
-    picked = output();
-    canceled = output();
+    #expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "#expandedGroups" }] : /* istanbul ignore next */ []));
+    expandedGroups = this.#expandedGroups.asReadonly();
+    //#endregion
     constructor() {
-        this.pickerFormControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((widgets) => {
-            if (widgets.length)
-                this.pick(widgets[0]);
-        });
+        effect(this.#pickerDataEffect);
     }
-    pick(widget) {
-        if (widget?.setupComponent) {
-            // if the selected widget has a setup component, we'll continue ...
-            this.selectedWidget = widget?.setupComponent ? widget : undefined;
-        }
-        else {
-            if (this.widgetId) {
-                // update existing widget
-                this.#widgetGridService.replaceWidget(this.widgetId, widget.id);
-            }
-            else {
-                this.#widgetGridService.addWidget(widget.id);
-            }
-            this.picked.emit();
-            this.#dialogRef.close();
-        }
+    //#region Lifecycle hooks
+    ngOnInit() {
+        this.#initRegisteredWidgets();
+        this.#initGroupedWidgets();
     }
-    onSetupConfigChange(setupConfig) {
-        this.widgetConfigDirty = !!setupConfig;
-        this.setupWidgetConfig = setupConfig;
+    //#endregion
+    //#region UI Methods
+    onSetupComponentCancel() {
+        this.selectedWidget = undefined;
+        this.setupWidgetConfig = undefined;
     }
-    setupComponentSave() {
+    onSetupComponentSave() {
         // TODO: save/emit config
         if (this.widgetId && this.selectedWidget) {
             if (this.pickerData()?.widgetName !== this.selectedWidget.id) {
@@ -451,27 +456,86 @@ class WidgetPickerComponent {
             }
         }
         else {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             this.#widgetGridService.addWidget(this.selectedWidget.id, this.setupWidgetConfig);
         }
         this.picked.emit();
         this.#dialogRef.close();
     }
-    setupComponentCancel() {
-        this.reset();
-    }
-    cancel() {
+    onCancel() {
         this.canceled.emit();
         this.#dialogRef.close();
     }
-    reset() {
-        this.selectedWidget = undefined;
-        this.setupWidgetConfig = undefined;
+    onToggleGroup(group) {
+        const next = new Set(this.#expandedGroups());
+        if (next.has(group))
+            next.delete(group);
+        else
+            next.add(group);
+        this.#expandedGroups.set(next);
     }
-    ngOnInit() {
+    onPick(widget) {
+        if (widget?.setupComponent) {
+            // if the selected widget has a setup component, we'll continue ...
+            this.selectedWidget = widget?.setupComponent ? widget : undefined;
+        }
+        else {
+            if (this.widgetId) {
+                // update existing widget
+                this.#widgetGridService.replaceWidget(this.widgetId, widget.id);
+            }
+            else {
+                this.#widgetGridService.addWidget(widget.id);
+            }
+            this.picked.emit();
+            this.#dialogRef.close();
+        }
+    }
+    //#endregion
+    //#region Init
+    #initRegisteredWidgets() {
         this.registeredWidgets = this.#widgetGridRegistry.getRegisteredWidgets(this.buckets());
     }
+    #initGroupedWidgets() {
+        this.groupedWidgets = this.#groupWidgets(this.registeredWidgets);
+    }
+    //#endregion
+    //#region Utilities
+    #handleSetupConfigChange(setupConfig) {
+        this.widgetConfigDirty = !!setupConfig;
+        this.setupWidgetConfig = setupConfig;
+    }
+    #groupWidgets(widgets) {
+        const defaultGroupLabel = this.translate.instant(this.#DEFAULT_GROUP_KEY);
+        const order = [];
+        const buckets = new Map();
+        widgets.forEach((widget) => {
+            const key = widget.group || defaultGroupLabel;
+            let bucket = buckets.get(key);
+            if (!bucket) {
+                bucket = [];
+                buckets.set(key, bucket);
+                order.push(key);
+            }
+            bucket.push(widget);
+        });
+        return order.map((group) => ({ group, widgets: buckets.get(group) ?? [] }));
+    }
+    //#endregion
+    //#region Effects
+    #pickerDataEffect = () => {
+        const pickerData = this.pickerData();
+        if (pickerData) {
+            const gridWidget = this.#widgetGridRegistry
+                .getRegisteredWidgets()
+                .find((widget) => widget.id === pickerData.widgetName);
+            this.selectedWidget = gridWidget?.setupComponent ? gridWidget : undefined;
+            this.widgetConfigMap = pickerData.widgetConfigMap || {};
+            this.widgetId = pickerData.widgetId;
+        }
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: WidgetPickerComponent, isStandalone: true, selector: "yuv-widget-picker", inputs: { pickerData: { classPropertyName: "pickerData", publicName: "pickerData", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n  <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n    @if (selectedWidget) {\n      <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n    }\n    <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n    <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n  </header> -->\n\n  <main class=\"{{ !selectedWidget ? 'widget-listing' : 'widget-setup' }}\">\n    @if (!selectedWidget) {\n      <mat-selection-list role=\"list\" [formControl]=\"pickerFormControl\" [multiple]=\"false\" [hideSingleSelectionIndicator]=\"true\">\n        <!-- list of avalable widgets -->\n        @for (w of registeredWidgets; track $index) {\n          <mat-list-option [value]=\"w\">\n            {{ w.label }}\n          </mat-list-option>\n        } @empty {\n          <div class=\"empty\">\n            {{ 'yuv.widget-grid.widget-picker.empty' | translate }}\n          </div>\n        }\n      </mat-selection-list>\n    } @else {\n      <div class=\"component\">\n        <ng-container\n          *ngComponentOutlet=\"selectedWidget!.setupComponent!; ndcDynamicInputs: widgetConfigMap; ndcDynamicOutputs: setupWidgetDynamicOutputs\"\n        ></ng-container>\n      </div>\n    }\n  </main>\n  <footer>\n    @if (selectedWidget) {\n      <button ymtButton=\"secondary\" (click)=\"setupComponentCancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n      <button ymtButton=\"primary\" [disabled]=\"!widgetConfigDirty || widgetConfigState === 'INVALID'\" (click)=\"setupComponentSave()\">\n        {{ 'yuv.widget-grid.button.save' | translate }}\n      </button>\n    } @else {\n      <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}:host main.widget-setup{height:100%;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;grid-template-areas:\"component\" \"buttons\"}:host main.widget-listing .widget{padding:var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color);cursor:pointer}:host main.widget-listing .widget:hover{background-color:var(--item-focus-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: WidgetPickerComponent, isStandalone: true, selector: "yuv-widget-picker", inputs: { pickerData: { classPropertyName: "pickerData", publicName: "pickerData", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked", canceled: "canceled" }, ngImport: i0, template: "<yuv-dialog [headertitle]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n  <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n    @if (selectedWidget) {\n      <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n    }\n    <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n    <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n  </header> -->\n\n  <main [class]=\"!selectedWidget ? 'widget-listing' : 'widget-setup'\">\n    @if (!selectedWidget) {\n      <ul class=\"groups\" role=\"list\">\n        @for (g of groupedWidgets; track g.group) {\n          @let expanded = expandedGroups().has(g.group);\n          <li class=\"group\" [class.group--expanded]=\"expanded\">\n            <button type=\"button\" class=\"group-header\" [attr.aria-expanded]=\"expanded\" (click)=\"onToggleGroup(g.group)\">\n              <mat-icon class=\"group-chevron ymt-icon--size-s\">\n                {{ expanded ? 'expand_more' : 'chevron_right' }}\n              </mat-icon>\n              <span class=\"group-label\">{{ g.group }}</span>\n              <span class=\"group-count\">{{ g.widgets.length }}</span>\n            </button>\n            @if (expanded) {\n              <ul class=\"widgets\" role=\"list\">\n                @for (w of g.widgets; track w.id) {\n                  <li>\n                    <button type=\"button\" class=\"widget-item\" (click)=\"onPick(w)\">\n                      <span class=\"widget-title\">{{ w.label }}</span>\n                      @if (w.description) {\n                        <span class=\"widget-description\">{{ w.description }}</span>\n                      }\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        } @empty {\n          <div class=\"empty\">\n            {{ 'yuv.widget-grid.widget-picker.empty' | translate }}\n          </div>\n        }\n      </ul>\n    } @else {\n      <div class=\"component\">\n        <ng-container\n          *ngComponentOutlet=\"\n            selectedWidget!.setupComponent!;\n            ndcDynamicInputs: widgetConfigMap;\n            ndcDynamicOutputs: setupWidgetDynamicOutputs\n          \"\n        />\n      </div>\n    }\n  </main>\n  <footer>\n    @if (selectedWidget) {\n      <button ymtButton=\"secondary\" (click)=\"onSetupComponentCancel()\">\n        {{ 'yuv.widget-grid.button.cancel' | translate }}\n      </button>\n      <button\n        ymtButton=\"primary\"\n        [disabled]=\"!widgetConfigDirty || widgetConfigState === 'INVALID'\"\n        (click)=\"onSetupComponentSave()\"\n      >\n        {{ 'yuv.widget-grid.button.save' | translate }}\n      </button>\n    } @else {\n      <button ymtButton=\"secondary\" (click)=\"onCancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}:host main.widget-setup{height:100%;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;grid-template-areas:\"component\" \"buttons\"}:host main.widget-listing .groups{list-style:none;margin:0;padding:0}:host main.widget-listing .group{border-bottom:1px solid var(--panel-divider-color)}:host main.widget-listing .group-header{display:flex;align-items:center;gap:var(--ymt-spacing-s, 8px);width:100%;padding:var(--app-pane-padding, 12px);background:transparent;border:0;cursor:pointer;color:inherit;font:inherit;text-align:start}:host main.widget-listing .group-header:hover{background-color:var(--item-focus-background-color)}:host main.widget-listing .group-header .group-label{flex:1;font-weight:500}:host main.widget-listing .group-header .group-count{opacity:.6;font-size:.85em}:host main.widget-listing .widgets{list-style:none;margin:0;padding:0 0 var(--ymt-spacing-xs, 4px)}:host main.widget-listing .widget-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:var(--ymt-spacing-s, 8px) calc(var(--app-pane-padding, 12px) + 24px);background:transparent;border:0;cursor:pointer;color:inherit;font:inherit;text-align:start}:host main.widget-listing .widget-item:hover{background-color:var(--item-focus-background-color)}:host main.widget-listing .widget-title{font-weight:400}:host main.widget-listing .widget-description{color:var(--ymt-text-color-subtle);font-size:.85em;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3$1.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetPickerComponent, decorators: [{
             type: Component,
@@ -482,62 +546,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         MatIconModule,
                         DialogComponent,
                         YmtButtonDirective,
-                        MatListModule,
                         DynamicIoModule,
-                        ReactiveFormsModule,
                         SignalComponentIoModule
-                    ], template: "<yuv-dialog [headertitel]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n  <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n    @if (selectedWidget) {\n      <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n    }\n    <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n    <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n  </header> -->\n\n  <main class=\"{{ !selectedWidget ? 'widget-listing' : 'widget-setup' }}\">\n    @if (!selectedWidget) {\n      <mat-selection-list role=\"list\" [formControl]=\"pickerFormControl\" [multiple]=\"false\" [hideSingleSelectionIndicator]=\"true\">\n        <!-- list of avalable widgets -->\n        @for (w of registeredWidgets; track $index) {\n          <mat-list-option [value]=\"w\">\n            {{ w.label }}\n          </mat-list-option>\n        } @empty {\n          <div class=\"empty\">\n            {{ 'yuv.widget-grid.widget-picker.empty' | translate }}\n          </div>\n        }\n      </mat-selection-list>\n    } @else {\n      <div class=\"component\">\n        <ng-container\n          *ngComponentOutlet=\"selectedWidget!.setupComponent!; ndcDynamicInputs: widgetConfigMap; ndcDynamicOutputs: setupWidgetDynamicOutputs\"\n        ></ng-container>\n      </div>\n    }\n  </main>\n  <footer>\n    @if (selectedWidget) {\n      <button ymtButton=\"secondary\" (click)=\"setupComponentCancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n      <button ymtButton=\"primary\" [disabled]=\"!widgetConfigDirty || widgetConfigState === 'INVALID'\" (click)=\"setupComponentSave()\">\n        {{ 'yuv.widget-grid.button.save' | translate }}\n      </button>\n    } @else {\n      <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}:host main.widget-setup{height:100%;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;grid-template-areas:\"component\" \"buttons\"}:host main.widget-listing .widget{padding:var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color);cursor:pointer}:host main.widget-listing .widget:hover{background-color:var(--item-focus-background-color)}\n"] }]
+                    ], template: "<yuv-dialog [headertitle]=\"selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate)\">\n  <!-- <header class=\"dark\" [ngClass]=\"{ listing: !selectedWidget }\">\n    @if (selectedWidget) {\n      <button mat-icon-button (click)=\"reset()\"><mat-icon>back</mat-icon></button>\n    }\n    <div class=\"title\">{{ selectedWidget ? selectedWidget.label : ('yuv.widget-grid.widget-picker.title' | translate) }}</div>\n    <button mat-icon-button (click)=\"cancel()\"><mat-icon>clear</mat-icon></button>\n  </header> -->\n\n  <main [class]=\"!selectedWidget ? 'widget-listing' : 'widget-setup'\">\n    @if (!selectedWidget) {\n      <ul class=\"groups\" role=\"list\">\n        @for (g of groupedWidgets; track g.group) {\n          @let expanded = expandedGroups().has(g.group);\n          <li class=\"group\" [class.group--expanded]=\"expanded\">\n            <button type=\"button\" class=\"group-header\" [attr.aria-expanded]=\"expanded\" (click)=\"onToggleGroup(g.group)\">\n              <mat-icon class=\"group-chevron ymt-icon--size-s\">\n                {{ expanded ? 'expand_more' : 'chevron_right' }}\n              </mat-icon>\n              <span class=\"group-label\">{{ g.group }}</span>\n              <span class=\"group-count\">{{ g.widgets.length }}</span>\n            </button>\n            @if (expanded) {\n              <ul class=\"widgets\" role=\"list\">\n                @for (w of g.widgets; track w.id) {\n                  <li>\n                    <button type=\"button\" class=\"widget-item\" (click)=\"onPick(w)\">\n                      <span class=\"widget-title\">{{ w.label }}</span>\n                      @if (w.description) {\n                        <span class=\"widget-description\">{{ w.description }}</span>\n                      }\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        } @empty {\n          <div class=\"empty\">\n            {{ 'yuv.widget-grid.widget-picker.empty' | translate }}\n          </div>\n        }\n      </ul>\n    } @else {\n      <div class=\"component\">\n        <ng-container\n          *ngComponentOutlet=\"\n            selectedWidget!.setupComponent!;\n            ndcDynamicInputs: widgetConfigMap;\n            ndcDynamicOutputs: setupWidgetDynamicOutputs\n          \"\n        />\n      </div>\n    }\n  </main>\n  <footer>\n    @if (selectedWidget) {\n      <button ymtButton=\"secondary\" (click)=\"onSetupComponentCancel()\">\n        {{ 'yuv.widget-grid.button.cancel' | translate }}\n      </button>\n      <button\n        ymtButton=\"primary\"\n        [disabled]=\"!widgetConfigDirty || widgetConfigState === 'INVALID'\"\n        (click)=\"onSetupComponentSave()\"\n      >\n        {{ 'yuv.widget-grid.button.save' | translate }}\n      </button>\n    } @else {\n      <button ymtButton=\"secondary\" (click)=\"onCancel()\">{{ 'yuv.widget-grid.button.cancel' | translate }}</button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}:host main.widget-setup{height:100%;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;grid-template-areas:\"component\" \"buttons\"}:host main.widget-listing .groups{list-style:none;margin:0;padding:0}:host main.widget-listing .group{border-bottom:1px solid var(--panel-divider-color)}:host main.widget-listing .group-header{display:flex;align-items:center;gap:var(--ymt-spacing-s, 8px);width:100%;padding:var(--app-pane-padding, 12px);background:transparent;border:0;cursor:pointer;color:inherit;font:inherit;text-align:start}:host main.widget-listing .group-header:hover{background-color:var(--item-focus-background-color)}:host main.widget-listing .group-header .group-label{flex:1;font-weight:500}:host main.widget-listing .group-header .group-count{opacity:.6;font-size:.85em}:host main.widget-listing .widgets{list-style:none;margin:0;padding:0 0 var(--ymt-spacing-xs, 4px)}:host main.widget-listing .widget-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:var(--ymt-spacing-s, 8px) calc(var(--app-pane-padding, 12px) + 24px);background:transparent;border:0;cursor:pointer;color:inherit;font:inherit;text-align:start}:host main.widget-listing .widget-item:hover{background-color:var(--item-focus-background-color)}:host main.widget-listing .widget-title{font-weight:400}:host main.widget-listing .widget-description{color:var(--ymt-text-color-subtle);font-size:.85em;white-space:normal}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pickerData: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerData", required: false }] }], buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], canceled: [{ type: i0.Output, args: ["canceled"] }] } });
 
+class WidgetGridEventService {
+    //#region Properties
+    #widgetGridEventSource = new ReplaySubject();
+    widgetEvents$ = this.#widgetGridEventSource.asObservable();
+    //#endregion
+    //#region Public methods
+    trigger(evt) {
+        this.#widgetGridEventSource.next(evt);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WidgetGridEventService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class YuvWidgetGridComponent {
+    //#region Dependencies
     #dialog = inject(MatDialog);
     #widgetGridService = inject(WidgetGridService);
     #widgetGridEventService = inject(WidgetGridEventService);
+    #destroyRef = inject(DestroyRef);
+    //#endregion
+    //#region Angular stuff
     gridster = viewChild(Gridster, ...(ngDevMode ? [{ debugName: "gridster" }] : /* istanbul ignore next */ []));
     widgetPicker = viewChild.required('widgetPicker', { read: TemplateRef });
-    options = {
-        gridType: GridType.Fit,
-        displayGrid: DisplayGrid.None,
-        pushItems: false,
-        outerMargin: false,
-        swap: false,
-        draggable: {
-            enabled: false,
-            ignoreContent: true,
-            dragHandleClass: 'dragHandle'
-        },
-        resizable: {
-            enabled: false
-        },
-        itemChangeCallback: (item, itemComponent) => {
-            this.emitChange();
-        }
-    };
     gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : /* istanbul ignore next */ []));
-    #gridConfigEffect = effect(() => {
-        const cfg = this.gridConfig();
-        if (cfg?.rows) {
-            this.options.minRows = cfg.rows;
-            this.options.maxRows = cfg.rows;
-        }
-        if (cfg?.columns) {
-            this.options.minCols = cfg.columns;
-            this.options.maxCols = cfg.columns;
-        }
-        if (cfg?.gap) {
-            this.options.margin = cfg.gap;
-        }
-        if (cfg?.newItemWidth || cfg?.newItemHeight) {
-            this.#widgetGridService.addItemSize = {
-                cols: cfg?.newItemWidth || -1, // default value -1 means the grid will autoposition the new item
-                rows: cfg?.newItemHeight || -1 // default value -1 means the grid will autoposition the new item
-            };
-        }
-        if (cfg?.gridType) {
-            this.options.gridType = cfg.gridType;
-        }
-        this.gridster()?.api.calculateLayout();
-    }, ...(ngDevMode ? [{ debugName: "#gridConfigEffect" }] : /* istanbul ignore next */ []));
     _editMode = signal(false, ...(ngDevMode ? [{ debugName: "_editMode" }] : /* istanbul ignore next */ []));
     /**
      * Whether or not to enable edit mode. In edit mode controls
@@ -545,23 +588,9 @@ class YuvWidgetGridComponent {
      * This mode also enables positioning and resizing of the tiles.
      */
     editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
-    #editModeEffect = effect(() => {
-        const e = this.editMode();
-        this._editMode.set(e);
-        this.options.draggable.enabled = !!e;
-        this.options.resizable.enabled = !!e;
-        this.options.displayGrid = e ? DisplayGrid.Always : DisplayGrid.None;
-        // set timeout to ensure that the grid has been redrawn before notifying the widgets about the change
-        setTimeout(() => {
-            this.gridster()?.api.calculateLayout();
-        }, 0);
-    }, ...(ngDevMode ? [{ debugName: "#editModeEffect" }] : /* istanbul ignore next */ []));
     gridItemConfig = input(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : /* istanbul ignore next */ []));
-    #gridItemConfigEffect = effect(() => {
-        this.#widgetGridService.setWidgetGrid(this.gridItemConfig());
-    }, ...(ngDevMode ? [{ debugName: "#gridItemConfigEffect" }] : /* istanbul ignore next */ []));
     /**
-     * Collection of buckets to load available widgets from. Wildcards are also posssible:
+     * Collection of buckets to load available widgets from. Wildcards are also possible:
      * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
      *
      * `*` represents any character 0-n times
@@ -578,20 +607,48 @@ class YuvWidgetGridComponent {
      * Emitted when the widget picker is opened or closed in edit mode
      */
     widgetPickerOpen = output();
+    //#endregion
+    //#region Class properties
+    /**
+     * Held as a signal so gridster's `options` InputSignal sees a new reference
+     * whenever edit mode or grid config changes. Mutating the inner object would
+     * keep the same reference and gridster's `$options` computed would never
+     * recompute — leaving draggable/resizable stuck at their initial `false`.
+     */
+    options = signal({
+        gridType: GridType.Fit,
+        displayGrid: DisplayGrid.None,
+        pushItems: false,
+        outerMargin: false,
+        swap: false,
+        draggable: {
+            enabled: false,
+            ignoreContent: true,
+            dragHandleClass: 'dragHandle'
+        },
+        resizable: {
+            enabled: false
+        },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        itemChangeCallback: (item, itemComponent) => {
+            this.#emitChange();
+        }
+    }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     widgetGrid = [];
     widgetPickerData;
+    //#endregion
     constructor() {
-        this.#widgetGridService.widgetGrid$.pipe(takeUntilDestroyed()).subscribe((widgetGrid) => {
-            this.widgetGrid = widgetGrid;
-        });
-        this.#widgetGridEventService.widgetEvents$.pipe(takeUntilDestroyed()).subscribe((evt) => {
-            this.gridItemEvent.emit(evt);
-        });
-        this.#widgetGridService.widgetGridUpdate$.pipe(takeUntilDestroyed()).subscribe((_) => {
-            this.emitChange();
-        });
+        effect(this.#gridItemConfigEffect);
+        effect(this.#editModeEffect);
+        effect(this.#gridConfigEffect);
     }
-    openWidgetPicker(item) {
+    //#region Lifecycle Hooks
+    ngOnInit() {
+        this.#respondToWidgetServiceEvents();
+    }
+    //#endregion
+    // #region UI Methods
+    onOpenWidgetPicker(item) {
         if (item) {
             // open setup component for selected grid item
             this.widgetPickerData = {
@@ -618,27 +675,98 @@ class YuvWidgetGridComponent {
      * Removes a widget from the grid
      * @param item The widget to be removed
      */
-    removeItem(item) {
+    onRemoveItem(item) {
         this.#widgetGridService.removeWidget(item.id);
     }
     /**
      * Add a new widget to the grid by opening the widget picker
      */
-    addItem() {
-        this.openWidgetPicker();
+    onAddItem() {
+        this.onOpenWidgetPicker();
     }
-    emitChange() {
+    //#endregion
+    //#region Utilities
+    #emitChange() {
         const mapped = [];
-        this.widgetGrid.forEach((i) => {
-            const m = { ...i };
-            delete m['widget'];
-            delete m['widgetConfigMap'];
-            mapped.push(m);
+        this.widgetGrid.forEach((item) => {
+            const mappedWidget = { ...item };
+            delete mappedWidget['widget'];
+            delete mappedWidget['widgetConfigMap'];
+            delete mappedWidget['isApplicable'];
+            mapped.push(mappedWidget);
         });
         this.gridChange.emit(mapped);
     }
+    #respondToWidgetServiceEvents() {
+        this.#widgetGridService.widgetGrid$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((widgetGrid) => {
+            this.widgetGrid = widgetGrid;
+        });
+        this.#widgetGridEventService.widgetEvents$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((evt) => {
+            this.gridItemEvent.emit(evt);
+        });
+        this.#widgetGridService.widgetGridUpdate$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.#emitChange();
+        });
+    }
+    //#endregion
+    //#region Effects
+    #gridItemConfigEffect = () => {
+        this.#widgetGridService.setWidgetGrid(this.gridItemConfig());
+    };
+    #editModeEffect = () => {
+        const editMode = this.editMode();
+        this._editMode.set(editMode);
+        this.options.update((option) => ({
+            ...option,
+            draggable: { ...option.draggable, enabled: !!editMode },
+            resizable: { ...option.resizable, enabled: !!editMode },
+            displayGrid: editMode ? DisplayGrid.Always : DisplayGrid.None
+        }));
+        // set timeout to ensure that the grid has been redrawn before notifying the widgets about the change
+        setTimeout(() => {
+            this.gridster()?.api.calculateLayout();
+        }, 0);
+    };
+    #gridConfigEffect = () => {
+        const cfg = this.gridConfig();
+        this.options.update((option) => {
+            const next = { ...option };
+            if (cfg?.rows) {
+                next.minRows = cfg.rows;
+                next.maxRows = cfg.rows;
+            }
+            if (cfg?.columns) {
+                next.minCols = cfg.columns;
+                next.maxCols = cfg.columns;
+            }
+            if (cfg?.gap) {
+                next.margin = cfg.gap;
+            }
+            if (cfg?.gridType) {
+                next.gridType = cfg.gridType;
+            }
+            return next;
+        });
+        if (cfg?.newItemWidth || cfg?.newItemHeight) {
+            this.#widgetGridService.addItemSize = {
+                cols: cfg?.newItemWidth || -1, // default value -1 means the grid will auto-position the new item
+                rows: cfg?.newItemHeight || -1 // default value -1 means the grid will auto-position the new item
+            };
+        }
+        // setTimeout breaks the synchronous chain effect → options.update → calculateLayout →
+        // itemChangeCallback → gridChange.emit → parent → gridConfig, which would re-trigger
+        // this effect and cause NG0103. Also keeps the gridster() viewChild read out of the
+        // reactive scope so it doesn't become an effect dependency.
+        setTimeout(() => {
+            this.gridster()?.api.calculateLayout();
+        }, 0);
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: YuvWidgetGridComponent, isStandalone: true, selector: "yuv-widget-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, gridItemConfig: { classPropertyName: "gridItemConfig", publicName: "gridItemConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridChange: "gridChange", gridItemEvent: "gridItemEvent", widgetPickerOpen: "widgetPickerOpen" }, host: { properties: { "class.widget-grid-edit": "editMode()" } }, providers: [WidgetGridService], viewQueries: [{ propertyName: "gridster", first: true, predicate: Gridster, descendants: true, isSignal: true }, { propertyName: "widgetPicker", first: true, predicate: ["widgetPicker"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (_editMode()) {\n  <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\" [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\">\n    <mat-icon>add</mat-icon>\n  </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n  <div class=\"empty\">\n    <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\">\n      {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n      <ng-content select=\".empty\"><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content>\n  </div>\n} @else {\n  <gridster [options]=\"options\">\n    @for (item of widgetGrid; track item.id) {\n      <gridster-item [item]=\"item\">\n        @if (_editMode()) {\n          <div class=\"toolbar\">\n            <!-- drag handle -->\n            <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n            <!-- edit -->\n            <button ymt-icon-button icon-button-size=\"small\"\n            [matTooltip]=\"'yuv.widget-grid.widget.edit.tooltip' | translate\"\n            (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n            <!-- remove -->\n            <button ymt-icon-button icon-button-size=\"small\"\n            [matTooltip]=\"'yuv.widget-grid.widget.remove.tooltip' | translate\"\n            (click)=\"removeItem(item)\"><mat-icon class=\"ymt-icon--size-s\">clear</mat-icon></button>\n          </div>\n        }\n        <div class=\"cmp\">\n          <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\"></ng-container>\n        </div>\n      </gridster-item>\n    }\n  </gridster>\n}\n<ng-template #widgetPicker>\n  <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\"></yuv-widget-picker>\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "component", type: Gridster, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItem, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: YuvWidgetGridComponent, isStandalone: true, selector: "yuv-widget-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, gridItemConfig: { classPropertyName: "gridItemConfig", publicName: "gridItemConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridChange: "gridChange", gridItemEvent: "gridItemEvent", widgetPickerOpen: "widgetPickerOpen" }, host: { properties: { "class.widget-grid-edit": "editMode()" } }, providers: [WidgetGridService], viewQueries: [{ propertyName: "gridster", first: true, predicate: Gridster, descendants: true, isSignal: true }, { propertyName: "widgetPicker", first: true, predicate: ["widgetPicker"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (_editMode()) {\n  <button\n    class=\"fab\"\n    mat-fab\n    [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\"\n    (click)=\"onAddItem()\"\n    [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n  <div class=\"empty\">\n    <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\">\n      {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n    <ng-content select=\".empty\"\n      ><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content\n    >\n  </div>\n} @else {\n  <gridster [options]=\"options()\">\n    @for (item of widgetGrid; track item.id) {\n      @if (item.isApplicable) {\n        <gridster-item [item]=\"item\">\n          @if (_editMode()) {\n            <div class=\"toolbar\">\n              <!-- drag handle -->\n              <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n              <!-- edit -->\n              <button\n                ymt-icon-button\n                icon-button-size=\"small\"\n                [matTooltip]=\"'yuv.widget-grid.widget.edit.tooltip' | translate\"\n                (click)=\"onOpenWidgetPicker(item)\"\n              >\n                <mat-icon class=\"ymt-icon--size-s\">edit</mat-icon>\n              </button>\n              <!-- remove -->\n              <button\n                ymt-icon-button\n                icon-button-size=\"small\"\n                [matTooltip]=\"'yuv.widget-grid.widget.remove.tooltip' | translate\"\n                (click)=\"onRemoveItem(item)\"\n              >\n                <mat-icon class=\"ymt-icon--size-s\">clear</mat-icon>\n              </button>\n            </div>\n          }\n          <div class=\"cmp\">\n            <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\" />\n          </div>\n        </gridster-item>\n      }\n    }\n  </gridster>\n}\n<ng-template #widgetPicker>\n  <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\" />\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i3$1.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "component", type: Gridster, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItem, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
             type: Component,
@@ -655,15 +783,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         GridsterItem,
                         YmtIconButtonDirective,
                         MatTooltip
-                    ], providers: [WidgetGridService], host: { '[class.widget-grid-edit]': 'editMode()' }, template: "@if (_editMode()) {\n  <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\" [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\">\n    <mat-icon>add</mat-icon>\n  </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n  <div class=\"empty\">\n    <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\">\n      {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n      <ng-content select=\".empty\"><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content>\n  </div>\n} @else {\n  <gridster [options]=\"options\">\n    @for (item of widgetGrid; track item.id) {\n      <gridster-item [item]=\"item\">\n        @if (_editMode()) {\n          <div class=\"toolbar\">\n            <!-- drag handle -->\n            <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n            <!-- edit -->\n            <button ymt-icon-button icon-button-size=\"small\"\n            [matTooltip]=\"'yuv.widget-grid.widget.edit.tooltip' | translate\"\n            (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n            <!-- remove -->\n            <button ymt-icon-button icon-button-size=\"small\"\n            [matTooltip]=\"'yuv.widget-grid.widget.remove.tooltip' | translate\"\n            (click)=\"removeItem(item)\"><mat-icon class=\"ymt-icon--size-s\">clear</mat-icon></button>\n          </div>\n        }\n        <div class=\"cmp\">\n          <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\"></ng-container>\n        </div>\n      </gridster-item>\n    }\n  </gridster>\n}\n<ng-template #widgetPicker>\n  <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\"></yuv-widget-picker>\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"] }]
+                    ], providers: [WidgetGridService], host: { '[class.widget-grid-edit]': 'editMode()' }, template: "@if (_editMode()) {\n  <button\n    class=\"fab\"\n    mat-fab\n    [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\"\n    (click)=\"onAddItem()\"\n    [matTooltip]=\"'yuv.widget-grid.widget.add.tooltip' | translate\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n}\n\n@if (widgetGrid.length === 0 && !_editMode()) {\n  <div class=\"empty\">\n    <!-- <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"_editMode.set(true)\">\n      {{'yuv.widget-grid.empty.create' | translate}}</button> -->\n    <ng-content select=\".empty\"\n      ><p>{{ 'yuv.widget-grid.empty' | translate }}</p></ng-content\n    >\n  </div>\n} @else {\n  <gridster [options]=\"options()\">\n    @for (item of widgetGrid; track item.id) {\n      @if (item.isApplicable) {\n        <gridster-item [item]=\"item\">\n          @if (_editMode()) {\n            <div class=\"toolbar\">\n              <!-- drag handle -->\n              <mat-icon class=\"dragHandle ymt-icon--size-s\">drag_indicator</mat-icon>\n              <!-- edit -->\n              <button\n                ymt-icon-button\n                icon-button-size=\"small\"\n                [matTooltip]=\"'yuv.widget-grid.widget.edit.tooltip' | translate\"\n                (click)=\"onOpenWidgetPicker(item)\"\n              >\n                <mat-icon class=\"ymt-icon--size-s\">edit</mat-icon>\n              </button>\n              <!-- remove -->\n              <button\n                ymt-icon-button\n                icon-button-size=\"small\"\n                [matTooltip]=\"'yuv.widget-grid.widget.remove.tooltip' | translate\"\n                (click)=\"onRemoveItem(item)\"\n              >\n                <mat-icon class=\"ymt-icon--size-s\">clear</mat-icon>\n              </button>\n            </div>\n          }\n          <div class=\"cmp\">\n            <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\" />\n          </div>\n        </gridster-item>\n      }\n    }\n  </gridster>\n}\n<ng-template #widgetPicker>\n  <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\" />\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gridster: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Gridster), { isSignal: true }] }], widgetPicker: [{ type: i0.ViewChild, args: ['widgetPicker', { ...{ read: TemplateRef }, isSignal: true }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], gridItemConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemConfig", required: false }] }], buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], gridChange: [{ type: i0.Output, args: ["gridChange"] }], gridItemEvent: [{ type: i0.Output, args: ["gridItemEvent"] }], widgetPickerOpen: [{ type: i0.Output, args: ["widgetPickerOpen"] }] } });
 
 class WorkspaceEditComponent {
-    dialogRef = inject((MatDialogRef));
+    //#region Dependencies
+    #dialogRef = inject((MatDialogRef));
+    //#endregion
+    //#region Angular stuff
     workspaceForm = input.required(...(ngDevMode ? [{ debugName: "workspaceForm" }] : /* istanbul ignore next */ []));
     workspaceSubmit = output();
+    //#endregion
+    //#region UI Methods
+    onCancel() {
+        this.#dialogRef.close();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: WorkspaceEditComponent, isStandalone: true, selector: "yuv-workspace-edit", inputs: { workspaceForm: { classPropertyName: "workspaceForm", publicName: "workspaceForm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { workspaceSubmit: "workspaceSubmit" }, ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.widget-grid.workspaces.edit.title' | translate\">\n  <main>\n    <form id=\"workspaceEditForm\" [formGroup]=\"workspaceForm()\" (ngSubmit)=\"workspaceSubmit.emit()\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.widget-grid.workspaces.workspace.label' | translate }}</mat-label>\n        <input matInput formControlName=\"label\" />\n      </mat-form-field>\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"dialogRef.close()\">\n      {{ 'yuv.widget-grid.workspaces.edit.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" form=\"workspaceEditForm\" type=\"submit\" [disabled]=\"workspaceForm().invalid\">\n      {{ 'yuv.widget-grid.workspaces.edit.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{padding:var(--ymt-spacing-m)}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: WorkspaceEditComponent, isStandalone: true, selector: "yuv-workspace-edit", inputs: { workspaceForm: { classPropertyName: "workspaceForm", publicName: "workspaceForm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { workspaceSubmit: "workspaceSubmit" }, ngImport: i0, template: "<yuv-dialog [headertitle]=\"'yuv.widget-grid.workspaces.edit.title' | translate\">\n  <main>\n    <form id=\"workspaceEditForm\" [formGroup]=\"workspaceForm()\" (ngSubmit)=\"workspaceSubmit.emit()\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.widget-grid.workspaces.workspace.label' | translate }}</mat-label>\n        <input matInput formControlName=\"label\" />\n      </mat-form-field>\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"onCancel()\">\n      {{ 'yuv.widget-grid.workspaces.edit.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" form=\"workspaceEditForm\" type=\"submit\" [disabled]=\"workspaceForm().invalid\">\n      {{ 'yuv.widget-grid.workspaces.edit.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{padding:var(--ymt-spacing-m)}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WorkspaceEditComponent, decorators: [{
             type: Component,
@@ -674,7 +810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         YmtButtonDirective,
                         TranslatePipe$1,
                         ReactiveFormsModule
-                    ], template: "<yuv-dialog [headertitel]=\"'yuv.widget-grid.workspaces.edit.title' | translate\">\n  <main>\n    <form id=\"workspaceEditForm\" [formGroup]=\"workspaceForm()\" (ngSubmit)=\"workspaceSubmit.emit()\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.widget-grid.workspaces.workspace.label' | translate }}</mat-label>\n        <input matInput formControlName=\"label\" />\n      </mat-form-field>\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"dialogRef.close()\">\n      {{ 'yuv.widget-grid.workspaces.edit.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" form=\"workspaceEditForm\" type=\"submit\" [disabled]=\"workspaceForm().invalid\">\n      {{ 'yuv.widget-grid.workspaces.edit.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{padding:var(--ymt-spacing-m)}:host mat-form-field{width:100%}\n"] }]
+                    ], template: "<yuv-dialog [headertitle]=\"'yuv.widget-grid.workspaces.edit.title' | translate\">\n  <main>\n    <form id=\"workspaceEditForm\" [formGroup]=\"workspaceForm()\" (ngSubmit)=\"workspaceSubmit.emit()\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.widget-grid.workspaces.workspace.label' | translate }}</mat-label>\n        <input matInput formControlName=\"label\" />\n      </mat-form-field>\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" type=\"button\" (click)=\"onCancel()\">\n      {{ 'yuv.widget-grid.workspaces.edit.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" form=\"workspaceEditForm\" type=\"submit\" [disabled]=\"workspaceForm().invalid\">\n      {{ 'yuv.widget-grid.workspaces.edit.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{padding:var(--ymt-spacing-m)}:host mat-form-field{width:100%}\n"] }]
         }], propDecorators: { workspaceForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceForm", required: true }] }], workspaceSubmit: [{ type: i0.Output, args: ["workspaceSubmit"] }] } });
 
 /**
@@ -683,10 +819,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * switch between workspaces to use or edit the widgets in the current workspace.
  */
 class YuvWidgetGridWorkspacesComponent {
+    //#region Dependencies
     #dialog = inject(MatDialog);
     #fb = inject(FormBuilder);
     #confirm = inject(ConfirmService);
+    #logger = inject(Logger);
     translate = inject(TranslateService);
+    //#endregion
+    //#region Angular stuff
+    /**
+     * Collection of buckets to load available widgets from. Wildcards are also posssible:
+     * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
+     *
+     * `*` represents any character 0-n times
+     * `?` represents exactly one character
+     */
+    buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
+    configChange = output();
+    gridItemEvent = output();
+    editModeChange = output();
+    //#endregion
+    //#region Properties
     workspaceDialogRef;
     #DEFAULT_WORKSPACE_OPTIONS = {
         gridConfig: {
@@ -710,48 +863,24 @@ class YuvWidgetGridWorkspacesComponent {
     }), ...(ngDevMode ? [{ debugName: "_workspaceOptions" }] : /* istanbul ignore next */ []));
     workspaceConfig = input(undefined, ...(ngDevMode ? [{ debugName: "workspaceConfig" }] : /* istanbul ignore next */ []));
     _workspaceConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "_workspaceConfig" }] : /* istanbul ignore next */ []));
-    #workspaceConfigEffect = effect(() => {
-        const wsc = this.workspaceConfig();
-        untracked(() => {
-            this._workspaceConfig.set(wsc);
-            this.#updateOriginalWorkspaceConfig();
-            if (wsc?.currentWorkspace) {
-                this.setWorkspace(wsc.currentWorkspace, true);
-            }
-        });
-    }, ...(ngDevMode ? [{ debugName: "#workspaceConfigEffect" }] : /* istanbul ignore next */ []));
-    /**
-     * Collection of buckets to load available widgets from. Wildcards are also posssible:
-     * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
-     *
-     * `*` represents any character 0-n times
-     * `?` represents exactly one character
-     */
-    buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
-    configChange = output();
-    gridItemEvent = output();
-    editModeChange = output();
     editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
-    // persist the last 'accepted' workspace config to be able to revert changes
-    #originalWidgetGridWorkspaceConfig;
     // currently selected workspace
     workspace = signal(undefined, ...(ngDevMode ? [{ debugName: "workspace" }] : /* istanbul ignore next */ []));
-    #workspaceEffect = effect(() => {
-        const ws = this.workspace();
-        this.workspaceLabel.set(ws ? this.getLabel(ws) : '');
-        untracked(() => {
-            if (ws)
-                this.workspaceForm.patchValue({ label: this.workspaceLabel(), id: ws.id });
-            this.gridItemConfig.set(ws ? JSON.parse(JSON.stringify(ws.grid)) : undefined);
-        });
-    }, ...(ngDevMode ? [{ debugName: "#workspaceEffect" }] : /* istanbul ignore next */ []));
     workspaceLabel = signal('', ...(ngDevMode ? [{ debugName: "workspaceLabel" }] : /* istanbul ignore next */ []));
     gridItemConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : /* istanbul ignore next */ []));
+    // persist the last 'accepted' workspace config to be able to revert changes
+    #originalWidgetGridWorkspaceConfig;
+    //#endregion
+    constructor() {
+        effect(this.#workspaceEffect);
+        effect(this.#workspaceConfigEffect);
+    }
     getLabel(workspace) {
         return workspace.translateLabel ? this.translate.instant(workspace.label) : workspace.label;
     }
-    setWorkspace(id, silent = false) {
-        const workspace = this._workspaceConfig()?.workspaces.find((w) => w.id === id);
+    //#region UI Methods
+    onSetWorkspace(id, silent = false) {
+        const workspace = this._workspaceConfig()?.workspaces.find((item) => item.id === id);
         if (workspace) {
             this.workspace.set(workspace);
             this._workspaceConfig.update((cfg) => ({
@@ -764,15 +893,90 @@ class YuvWidgetGridWorkspacesComponent {
             this.workspace.set(undefined);
         }
         if (!silent)
-            this.emitConfigChange();
+            this.#emitConfigChange();
     }
-    openWorkspaceDialog(create, tplRef) {
+    onOpenWorkspaceDialog(create, tplRef) {
         if (create) {
             this.workspaceForm.reset();
         }
         this.workspaceDialogRef = this.#dialog.open(tplRef);
     }
-    saveWorkspace() {
+    onDeleteCurrentWorkspace() {
+        const workspaceConfig = this._workspaceConfig();
+        const workspace = this.workspace();
+        if (workspace && workspaceConfig) {
+            const idx = workspaceConfig.workspaces.findIndex((item) => item.id === workspace.id);
+            if (idx > -1) {
+                this.#confirm
+                    .confirm({
+                    message: this.translate.instant('yuv.widget-grid.workspaces.workspace.delete.confirm.message', {
+                        label: workspace.label
+                    })
+                })
+                    .subscribe((confirmed) => {
+                    if (!confirmed)
+                        return;
+                    const workspaces = workspaceConfig.workspaces;
+                    workspaces.splice(idx, 1);
+                    // pick another workspace if the current one is deleted
+                    const newCurrentWorkspace = workspaces.length > 0 ? workspaces[0] : undefined;
+                    this._workspaceConfig.set({
+                        ...workspaceConfig,
+                        workspaces,
+                        currentWorkspace: newCurrentWorkspace?.id
+                    });
+                    this.workspace.set(newCurrentWorkspace);
+                    this.#emitConfigChange();
+                });
+            }
+        }
+    }
+    onToggleEditMode() {
+        this.editMode.set(!this.editMode());
+    }
+    onRevertWorkspaceConfig() {
+        if (this.#originalWidgetGridWorkspaceConfig) {
+            this._workspaceConfig.set(WidgetGridUtils.gridConfigParse(this.#originalWidgetGridWorkspaceConfig));
+        }
+        const cws = this.workspaceConfig()?.currentWorkspace;
+        if (cws)
+            this.onSetWorkspace(cws, true);
+        this.editMode.set(false);
+    }
+    /**
+     * Emit current changes and reset original workspace config internally
+     *
+     * @returns void
+     */
+    onPersistWorkspaceConfig() {
+        this.onSaveWorkspace();
+        // this.#updateOriginalWorkspaceConfig();
+        // this.emitConfigChange();
+        this.editMode.set(false);
+    }
+    onGridChange(grid) {
+        const workspace = this.workspace();
+        if (workspace) {
+            workspace.grid = grid;
+            const wsc = this._workspaceConfig();
+            const idx = wsc ? wsc.workspaces.findIndex((item) => item.id === workspace.id) : -1;
+            if (idx > -1) {
+                const wgw = this._workspaceConfig()?.workspaces || [];
+                wgw[idx] = workspace;
+                this._workspaceConfig.update((curr) => ({
+                    ...curr,
+                    workspaces: wgw
+                }));
+            }
+        }
+    }
+    onGridEvent(gridItemEvent) {
+        this.gridItemEvent.emit(gridItemEvent);
+    }
+    onEnableEditMode() {
+        this.editMode.set(true);
+    }
+    onSaveWorkspace() {
         let cfg = this._workspaceConfig();
         if (!cfg) {
             cfg = {
@@ -795,98 +999,62 @@ class YuvWidgetGridWorkspacesComponent {
             this.workspaceForm.patchValue({ id: newWorkspace.id, label: newWorkspace.label });
         }
         else {
-            const existingIndex = cfg.workspaces.findIndex((w) => w.id === this.workspaceForm.value.id);
-            if (existingIndex === -1) {
-                const updatedWorkspace = cfg.workspaces[existingIndex];
-                updatedWorkspace.label = this.workspaceForm.value.label;
-                const workspaces = cfg.workspaces;
-                workspaces[existingIndex] = updatedWorkspace;
-                this._workspaceConfig.set({
-                    ...cfg,
-                    workspaces
-                });
+            const existingIndex = cfg.workspaces.findIndex((item) => item.id === this.workspaceForm.value.id);
+            /**
+             * ADR: only update the label when the workspace is found in the current config.
+             *
+             * The previous implementation had the index check inverted (`existingIndex === -1`),
+             * which would have dereferenced `cfg.workspaces[-1]` and crashed on `.label` if a
+             * form submission ever arrived for a non-existent workspace id. In the current UI
+             * flow this branch is only entered with an id that exists in the list, so the bug
+             * stayed silent — but the inverted check was load-bearing on that invariant.
+             *
+             * `existingIndex === -1` is treated as a "should not happen" state — it would only
+             * occur if the workspace was removed externally (other tab/race) between opening
+             * the edit dialog and submitting it. We no-op and log a warning so the anomaly is
+             * visible in dev tools without crashing the UI.
+             */
+            if (existingIndex !== -1) {
+                cfg.workspaces[existingIndex].label = this.workspaceForm.value.label;
             }
             else {
-                // workspace label may have changed
-                cfg.workspaces[existingIndex].label = this.workspaceForm.value.label;
+                this.#logger.error('onSaveWorkspace: workspace not in config; ignored', this.workspaceForm.value.id);
             }
         }
         this.workspaceDialogRef?.close();
-        this.emitConfigChange();
+        this.#emitConfigChange();
+    }
+    //#endregion
+    //#region Utilities
+    #emitConfigChange() {
+        this.configChange.emit(this._workspaceConfig());
     }
     #updateOriginalWorkspaceConfig() {
         this.#originalWidgetGridWorkspaceConfig = WidgetGridUtils.gridConfigStringify(this.workspaceConfig());
     }
-    onGridEvent(e) {
-        this.gridItemEvent.emit(e);
-    }
-    onGridChange(grid) {
-        const ws = this.workspace();
-        if (ws) {
-            ws.grid = grid;
-            const wsc = this._workspaceConfig();
-            const idx = wsc ? wsc.workspaces.findIndex((w) => w.id === ws.id) : -1;
-            if (idx > -1) {
-                const wgw = this._workspaceConfig()?.workspaces || [];
-                wgw[idx] = ws;
-                this._workspaceConfig.update((curr) => ({
-                    ...curr,
-                    workspaces: wgw
-                }));
-            }
-        }
-    }
-    // emit current changes and reset original workspace config internally
-    persistWorkspaceConfig() {
-        this.saveWorkspace();
-        // this.#updateOriginalWorkspaceConfig();
-        // this.emitConfigChange();
-        this.editMode.set(false);
-    }
-    revertWorkspaceConfig() {
-        if (this.#originalWidgetGridWorkspaceConfig) {
-            this._workspaceConfig.set(WidgetGridUtils.gridConfigParse(this.#originalWidgetGridWorkspaceConfig));
-        }
-        const cws = this.workspaceConfig()?.currentWorkspace;
-        if (cws)
-            this.setWorkspace(cws, true);
-        this.editMode.set(false);
-    }
-    deleteCurrentWorkspace() {
-        const wsc = this._workspaceConfig();
-        const ws = this.workspace();
-        if (ws && wsc) {
-            const idx = wsc.workspaces.findIndex((w) => w.id === ws.id);
-            if (idx > -1) {
-                this.#confirm
-                    .confirm({
-                    message: this.translate.instant('yuv.widget-grid.workspaces.workspace.delete.confirm.message', {
-                        label: ws.label
-                    })
-                })
-                    .subscribe((confirmed) => {
-                    if (!confirmed)
-                        return;
-                    const workspaces = wsc.workspaces;
-                    workspaces.splice(idx, 1);
-                    // pick another workspace if the current one is deleted
-                    const newCurrentWorkspace = workspaces.length > 0 ? workspaces[0] : undefined;
-                    this._workspaceConfig.set({
-                        ...wsc,
-                        workspaces,
-                        currentWorkspace: newCurrentWorkspace?.id
-                    });
-                    this.workspace.set(newCurrentWorkspace);
-                    this.emitConfigChange();
-                });
+    //#endregion
+    //#region Effect
+    #workspaceEffect = () => {
+        const workspace = this.workspace();
+        this.workspaceLabel.set(workspace ? this.getLabel(workspace) : '');
+        untracked(() => {
+            if (workspace)
+                this.workspaceForm.patchValue({ label: this.workspaceLabel(), id: workspace.id });
+            this.gridItemConfig.set(workspace ? JSON.parse(JSON.stringify(workspace.grid)) : undefined);
+        });
+    };
+    #workspaceConfigEffect = () => {
+        const wsc = this.workspaceConfig();
+        untracked(() => {
+            this._workspaceConfig.set(wsc);
+            this.#updateOriginalWorkspaceConfig();
+            if (wsc?.currentWorkspace) {
+                this.onSetWorkspace(wsc.currentWorkspace, true);
             }
-        }
-    }
-    emitConfigChange() {
-        this.configChange.emit(this._workspaceConfig());
-    }
+        });
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: YuvWidgetGridWorkspacesComponent, isStandalone: true, selector: "yuv-widget-grid-workspaces", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, workspaceConfig: { classPropertyName: "workspaceConfig", publicName: "workspaceConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", gridItemEvent: "gridItemEvent", editModeChange: "editModeChange" }, ngImport: i0, template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n  @if (ws) {\n    @let workspaces = _workspaceConfig()?.workspaces || [];\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'yuv.widget-grid.workspaces.workspace.menu.tooltip' | translate\"\n      [disabled]=\"editMode()\"\n      [matMenuTriggerFor]=\"workspacePickerMenu\"\n    >\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <mat-menu #workspacePickerMenu=\"matMenu\">\n      @for (ws of workspaces; track ws.id) {\n        <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ getLabel(ws) }}</button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWorkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n    </mat-menu>\n\n    @if (!editMode()) {\n      <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      @if (!ws.preventEdit) {\n        <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n        <mat-menu #workspaceMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"editMode.set(!editMode())\">{{ 'yuv.widget-grid.workspaces.workspace.menu.edit' | translate }}</button>\n          <button mat-menu-item (click)=\"deleteCurrentWorkspace()\">{{ 'yuv.widget-grid.workspaces.workspace.menu.delete' | translate }}</button>\n        </mat-menu>\n      }\n    } @else {\n      @if (ws.preventRename || ws.translateLabel) {\n        <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      } @else {\n        <input type=\"text\" class=\"label\" [formControl]=\"workspaceLabelControl\" />\n      }\n      <button ymtButton=\"secondary\" (click)=\"revertWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.cancel' | translate }}\n      </button>\n      <button ymtButton=\"primary\" (click)=\"persistWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.save' | translate }}\n      </button>\n    }\n  }\n</div>\n\n@if (ws) {\n  <yuv-widget-grid\n    [gridConfig]=\"_workspaceOptions().gridConfig\"\n    [gridItemConfig]=\"gridItemConfig()\"\n    [buckets]=\"buckets()\"\n    [editMode]=\"editMode()\"\n    (gridChange)=\"onGridChange($event)\"\n    (gridItemEvent)=\"onGridEvent($event)\"\n  >\n    <div class=\"empty\">\n      <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n      <button ymtButton=\"primary\" (click)=\"editMode.set(true)\">\n        {{ 'yuv.widget-grid.empty.create' | translate }}\n      </button>\n    </div>\n  </yuv-widget-grid>\n} @else {\n  <div class=\"empty\">\n    <p>{{ 'yuv.widget-grid.workspaces.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"openWorkspaceDialog(true, tplWorkspaceEdit)\">\n      {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n    </button>\n  </div>\n}\n\n<ng-template #tplWorkspaceEdit>\n  <yuv-workspace-edit [workspaceForm]=\"workspaceForm\" (workspaceSubmit)=\"saveWorkspace()\"></yuv-workspace-edit>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow-y:auto}:host .toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--ymt-spacing-m)}:host .toolbar .label{flex:1;font:var(--ymt-font-headline-medium);letter-spacing:var(--ymt-font-headline-medium-tracking);margin-inline:0;margin-block:.75em;padding-inline:.25em 0;padding-block:.25em}:host .toolbar input.label{border:0;background-color:transparent}:host .toolbar input.label:not([disabled]){outline:1px solid var(--ymt-outline)}:host yuv-widget-grid{flex:1}:host .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: YuvWidgetGridComponent, selector: "yuv-widget-grid", inputs: ["gridConfig", "editMode", "gridItemConfig", "buckets"], outputs: ["gridChange", "gridItemEvent", "widgetPickerOpen"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: WorkspaceEditComponent, selector: "yuv-workspace-edit", inputs: ["workspaceForm"], outputs: ["workspaceSubmit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: YuvWidgetGridWorkspacesComponent, isStandalone: true, selector: "yuv-widget-grid-workspaces", inputs: { buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, workspaceConfig: { classPropertyName: "workspaceConfig", publicName: "workspaceConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", gridItemEvent: "gridItemEvent", editModeChange: "editModeChange" }, ngImport: i0, template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n  @if (ws) {\n    @let workspaces = _workspaceConfig()?.workspaces || [];\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'yuv.widget-grid.workspaces.workspace.menu.tooltip' | translate\"\n      [disabled]=\"editMode()\"\n      [matMenuTriggerFor]=\"workspacePickerMenu\"\n    >\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <mat-menu #workspacePickerMenu=\"matMenu\">\n      @for (ws of workspaces; track ws.id) {\n        <button mat-menu-item (click)=\"onSetWorkspace(ws.id)\">{{ getLabel(ws) }}</button>\n      }\n      <mat-divider />\n      <button mat-menu-item (click)=\"onOpenWorkspaceDialog(true, tplWorkspaceEdit)\">\n        {{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}\n      </button>\n    </mat-menu>\n\n    @if (!editMode()) {\n      <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      @if (!ws.preventEdit) {\n        <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n        <mat-menu #workspaceMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"onToggleEditMode()\">\n            {{ 'yuv.widget-grid.workspaces.workspace.menu.edit' | translate }}\n          </button>\n          <button mat-menu-item (click)=\"onDeleteCurrentWorkspace()\">\n            {{ 'yuv.widget-grid.workspaces.workspace.menu.delete' | translate }}\n          </button>\n        </mat-menu>\n      }\n    } @else {\n      @if (ws.preventRename || ws.translateLabel) {\n        <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      } @else {\n        <input type=\"text\" class=\"label\" [formControl]=\"workspaceLabelControl\" />\n      }\n      <button ymtButton=\"secondary\" (click)=\"onRevertWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.cancel' | translate }}\n      </button>\n      <button ymtButton=\"primary\" (click)=\"onPersistWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.save' | translate }}\n      </button>\n    }\n  }\n</div>\n\n@if (ws) {\n  <yuv-widget-grid\n    [gridConfig]=\"_workspaceOptions().gridConfig\"\n    [gridItemConfig]=\"gridItemConfig()\"\n    [buckets]=\"buckets()\"\n    [editMode]=\"editMode()\"\n    (gridChange)=\"onGridChange($event)\"\n    (gridItemEvent)=\"onGridEvent($event)\"\n  >\n    <div class=\"empty\">\n      <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n      <button ymtButton=\"primary\" (click)=\"onEnableEditMode()\">\n        {{ 'yuv.widget-grid.empty.create' | translate }}\n      </button>\n    </div>\n  </yuv-widget-grid>\n} @else {\n  <div class=\"empty\">\n    <p>{{ 'yuv.widget-grid.workspaces.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"onOpenWorkspaceDialog(true, tplWorkspaceEdit)\">\n      {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n    </button>\n  </div>\n}\n\n<ng-template #tplWorkspaceEdit>\n  <yuv-workspace-edit [workspaceForm]=\"workspaceForm\" (workspaceSubmit)=\"onSaveWorkspace()\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow-y:auto}:host .toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--ymt-spacing-m)}:host .toolbar .label{flex:1;font:var(--ymt-font-headline-medium);letter-spacing:var(--ymt-font-headline-medium-tracking);margin-inline:0;margin-block:.75em;padding-inline:.25em 0;padding-block:.25em}:host .toolbar input.label{border:0;background-color:transparent}:host .toolbar input.label:not([disabled]){outline:1px solid var(--ymt-outline)}:host yuv-widget-grid{flex:1}:host .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: YuvWidgetGridComponent, selector: "yuv-widget-grid", inputs: ["gridConfig", "editMode", "gridItemConfig", "buckets"], outputs: ["gridChange", "gridItemEvent", "widgetPickerOpen"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: WorkspaceEditComponent, selector: "yuv-workspace-edit", inputs: ["workspaceForm"], outputs: ["workspaceSubmit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
             type: Component,
@@ -903,18 +1071,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         MatTooltipModule,
                         TranslatePipe,
                         WorkspaceEditComponent
-                    ], template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n  @if (ws) {\n    @let workspaces = _workspaceConfig()?.workspaces || [];\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'yuv.widget-grid.workspaces.workspace.menu.tooltip' | translate\"\n      [disabled]=\"editMode()\"\n      [matMenuTriggerFor]=\"workspacePickerMenu\"\n    >\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <mat-menu #workspacePickerMenu=\"matMenu\">\n      @for (ws of workspaces; track ws.id) {\n        <button mat-menu-item (click)=\"setWorkspace(ws.id)\">{{ getLabel(ws) }}</button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"openWorkspaceDialog(true, tplWorkspaceEdit)\">{{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}</button>\n    </mat-menu>\n\n    @if (!editMode()) {\n      <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      @if (!ws.preventEdit) {\n        <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n        <mat-menu #workspaceMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"editMode.set(!editMode())\">{{ 'yuv.widget-grid.workspaces.workspace.menu.edit' | translate }}</button>\n          <button mat-menu-item (click)=\"deleteCurrentWorkspace()\">{{ 'yuv.widget-grid.workspaces.workspace.menu.delete' | translate }}</button>\n        </mat-menu>\n      }\n    } @else {\n      @if (ws.preventRename || ws.translateLabel) {\n        <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      } @else {\n        <input type=\"text\" class=\"label\" [formControl]=\"workspaceLabelControl\" />\n      }\n      <button ymtButton=\"secondary\" (click)=\"revertWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.cancel' | translate }}\n      </button>\n      <button ymtButton=\"primary\" (click)=\"persistWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.save' | translate }}\n      </button>\n    }\n  }\n</div>\n\n@if (ws) {\n  <yuv-widget-grid\n    [gridConfig]=\"_workspaceOptions().gridConfig\"\n    [gridItemConfig]=\"gridItemConfig()\"\n    [buckets]=\"buckets()\"\n    [editMode]=\"editMode()\"\n    (gridChange)=\"onGridChange($event)\"\n    (gridItemEvent)=\"onGridEvent($event)\"\n  >\n    <div class=\"empty\">\n      <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n      <button ymtButton=\"primary\" (click)=\"editMode.set(true)\">\n        {{ 'yuv.widget-grid.empty.create' | translate }}\n      </button>\n    </div>\n  </yuv-widget-grid>\n} @else {\n  <div class=\"empty\">\n    <p>{{ 'yuv.widget-grid.workspaces.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"openWorkspaceDialog(true, tplWorkspaceEdit)\">\n      {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n    </button>\n  </div>\n}\n\n<ng-template #tplWorkspaceEdit>\n  <yuv-workspace-edit [workspaceForm]=\"workspaceForm\" (workspaceSubmit)=\"saveWorkspace()\"></yuv-workspace-edit>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow-y:auto}:host .toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--ymt-spacing-m)}:host .toolbar .label{flex:1;font:var(--ymt-font-headline-medium);letter-spacing:var(--ymt-font-headline-medium-tracking);margin-inline:0;margin-block:.75em;padding-inline:.25em 0;padding-block:.25em}:host .toolbar input.label{border:0;background-color:transparent}:host .toolbar input.label:not([disabled]){outline:1px solid var(--ymt-outline)}:host yuv-widget-grid{flex:1}:host .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], workspaceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceConfig", required: false }] }], buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], gridItemEvent: [{ type: i0.Output, args: ["gridItemEvent"] }], editModeChange: [{ type: i0.Output, args: ["editModeChange"] }] } });
+                    ], template: "@let ws = workspace();\n\n<div class=\"toolbar\">\n  @if (ws) {\n    @let workspaces = _workspaceConfig()?.workspaces || [];\n\n    <button\n      mat-icon-button\n      [matTooltip]=\"'yuv.widget-grid.workspaces.workspace.menu.tooltip' | translate\"\n      [disabled]=\"editMode()\"\n      [matMenuTriggerFor]=\"workspacePickerMenu\"\n    >\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <mat-menu #workspacePickerMenu=\"matMenu\">\n      @for (ws of workspaces; track ws.id) {\n        <button mat-menu-item (click)=\"onSetWorkspace(ws.id)\">{{ getLabel(ws) }}</button>\n      }\n      <mat-divider />\n      <button mat-menu-item (click)=\"onOpenWorkspaceDialog(true, tplWorkspaceEdit)\">\n        {{ 'yuv.widget-grid.workspaces.workspace.menu.create' | translate }}\n      </button>\n    </mat-menu>\n\n    @if (!editMode()) {\n      <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      @if (!ws.preventEdit) {\n        <button mat-icon-button [matMenuTriggerFor]=\"workspaceMenu\"><mat-icon>more_vert</mat-icon></button>\n        <mat-menu #workspaceMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"onToggleEditMode()\">\n            {{ 'yuv.widget-grid.workspaces.workspace.menu.edit' | translate }}\n          </button>\n          <button mat-menu-item (click)=\"onDeleteCurrentWorkspace()\">\n            {{ 'yuv.widget-grid.workspaces.workspace.menu.delete' | translate }}\n          </button>\n        </mat-menu>\n      }\n    } @else {\n      @if (ws.preventRename || ws.translateLabel) {\n        <h2 class=\"label\">{{ workspaceLabel() }}</h2>\n      } @else {\n        <input type=\"text\" class=\"label\" [formControl]=\"workspaceLabelControl\" />\n      }\n      <button ymtButton=\"secondary\" (click)=\"onRevertWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.cancel' | translate }}\n      </button>\n      <button ymtButton=\"primary\" (click)=\"onPersistWorkspaceConfig()\">\n        {{ 'yuv.widget-grid.workspaces.editMode.save' | translate }}\n      </button>\n    }\n  }\n</div>\n\n@if (ws) {\n  <yuv-widget-grid\n    [gridConfig]=\"_workspaceOptions().gridConfig\"\n    [gridItemConfig]=\"gridItemConfig()\"\n    [buckets]=\"buckets()\"\n    [editMode]=\"editMode()\"\n    (gridChange)=\"onGridChange($event)\"\n    (gridItemEvent)=\"onGridEvent($event)\"\n  >\n    <div class=\"empty\">\n      <p>{{ 'yuv.widget-grid.empty' | translate }}</p>\n      <button ymtButton=\"primary\" (click)=\"onEnableEditMode()\">\n        {{ 'yuv.widget-grid.empty.create' | translate }}\n      </button>\n    </div>\n  </yuv-widget-grid>\n} @else {\n  <div class=\"empty\">\n    <p>{{ 'yuv.widget-grid.workspaces.empty' | translate }}</p>\n    <button ymtButton=\"primary\" (click)=\"onOpenWorkspaceDialog(true, tplWorkspaceEdit)\">\n      {{ 'yuv.widget-grid.workspaces.empty.button.create' | translate }}\n    </button>\n  </div>\n}\n\n<ng-template #tplWorkspaceEdit>\n  <yuv-workspace-edit [workspaceForm]=\"workspaceForm\" (workspaceSubmit)=\"onSaveWorkspace()\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow-y:auto}:host .toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--ymt-spacing-m)}:host .toolbar .label{flex:1;font:var(--ymt-font-headline-medium);letter-spacing:var(--ymt-font-headline-medium-tracking);margin-inline:0;margin-block:.75em;padding-inline:.25em 0;padding-block:.25em}:host .toolbar input.label{border:0;background-color:transparent}:host .toolbar input.label:not([disabled]){outline:1px solid var(--ymt-outline)}:host yuv-widget-grid{flex:1}:host .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { buckets: [{ type: i0.Input, args: [{ isSignal: true, alias: "buckets", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], gridItemEvent: [{ type: i0.Output, args: ["gridItemEvent"] }], editModeChange: [{ type: i0.Output, args: ["editModeChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], workspaceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceConfig", required: false }] }] } });
+
+// widget-grid-workspaces/widget-grid-workspaces.component
+
+// export * from './widget-grid-event.service';
+// export * from './widget-grid.utils';
 
-const cmp = [
-    YuvWidgetGridComponent,
-    YuvWidgetGridWorkspacesComponent
-];
+const cmp = [YuvWidgetGridComponent, YuvWidgetGridWorkspacesComponent];
 class YuvWidgetGridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
-            YuvWidgetGridWorkspacesComponent], exports: [YuvWidgetGridComponent,
-            YuvWidgetGridWorkspacesComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent, YuvWidgetGridWorkspacesComponent], exports: [YuvWidgetGridComponent, YuvWidgetGridWorkspacesComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridModule, imports: [cmp] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: YuvWidgetGridModule, decorators: [{