@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.1

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

@@ -4,33 +4,32 @@ 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 i4$2 from '@angular/material/icon';
+import * as i3$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@yuuvis/client-core';
-import { TranslateService, TranslateModule } from '@yuuvis/client-core';
+import { TranslateService, TranslatePipe } from '@yuuvis/client-core';
 import { GridsterItemComponent, DisplayGrid, GridType, GridsterComponent } from 'angular-gridster2';
-import * as i4 from 'ng-dynamic-component';
+import * as i3 from 'ng-dynamic-component';
 import { DynamicIoModule } from 'ng-dynamic-component';
 import { ReplaySubject, Subject } from 'rxjs';
-import * as i4$1 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
-import * as i6 from '@angular/material/button';
+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-framework/common';
-import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
 import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import * as i3$1 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import * as i5 from '@angular/material/tooltip';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+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 from '@angular/material/input';
+import * as i2$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$3 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
-import { MatDividerModule } from '@angular/material/divider';
+import { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
 
 class WidgetGridEventService {
     constructor() {
@@ -40,10 +39,10 @@ class WidgetGridEventService {
     trigger(evt) {
         this.widgetGridEventSource.next(evt);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridEventService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -51,10 +50,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }] });
 
 class NoopComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", 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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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"] }]
         }], propDecorators: { widgetConfig: [{
@@ -208,10 +207,10 @@ class WidgetGridRegistry {
         const regexPattern = new RegExp('^' + pattern.replace(/\?/g, '.').replace(/\*/g, '.*') + '$');
         return regexPattern.test(text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridRegistry, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridRegistry, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridRegistry, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -366,10 +365,10 @@ class WidgetGridService {
         this.widgetGridSource.next(this.widgetGrid);
         this.widgetGridUpdateSource.next(gridItemId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetGridService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: WidgetGridRegistry }] });
 
@@ -396,16 +395,18 @@ class WidgetPickerComponent {
                 this.widgetConfigState = s || undefined;
             }
         };
-        this.pickerData = input(this.#dialogData.pickerData);
+        this.pickerData = input(this.#dialogData.pickerData, ...(ngDevMode ? [{ debugName: "pickerData" }] : []));
         this.#pickerDataEffect = effect(() => {
             const pd = this.pickerData();
             if (pd) {
-                const gridWidget = this.#widgetGridRegistry.getRegisteredWidgets().find((w) => w.id === pd.widgetName);
+                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" }] : []));
         /**
          * Collection of buckets to load available widgets from. Wildcards are also posssible:
          * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
@@ -413,7 +414,7 @@ class WidgetPickerComponent {
          * `*` represents any character 0-n times
          * `?` represents exactly one character
          */
-        this.buckets = input(this.#dialogData.buckets);
+        this.buckets = input(this.#dialogData.buckets, ...(ngDevMode ? [{ debugName: "buckets" }] : []));
         this.picked = output();
         this.canceled = output();
         this.pickerFormControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((widgets) => {
@@ -472,15 +473,15 @@ class WidgetPickerComponent {
     ngOnInit() {
         this.registeredWidgets = this.#widgetGridRegistry.getRegisteredWidgets(this.buckets());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: i3$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i4.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SignalComponentIoModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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", "ngComponentOutletNgModuleFactory"], 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WidgetPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-widget-picker', imports: [
                         CommonModule,
                         MatButtonModule,
-                        TranslateModule,
+                        TranslatePipe,
                         MatIconModule,
                         DialogComponent,
                         YmtButtonDirective,
@@ -489,7 +490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         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"] }]
-        }], ctorParameters: () => [] });
+        }], 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 YuvWidgetGridComponent {
     #dialog;
@@ -522,7 +523,7 @@ class YuvWidgetGridComponent {
                 this.emitChange();
             }
         };
-        this.gridConfig = input();
+        this.gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : []));
         this.#gridConfigEffect = effect(() => {
             const cfg = this.gridConfig();
             if (cfg?.rows) {
@@ -548,14 +549,14 @@ class YuvWidgetGridComponent {
             if (this.options.api?.optionsChanged) {
                 this.options.api.optionsChanged();
             }
-        });
-        this._editMode = signal(false);
+        }, ...(ngDevMode ? [{ debugName: "#gridConfigEffect" }] : []));
+        this._editMode = signal(false, ...(ngDevMode ? [{ debugName: "_editMode" }] : []));
         /**
          * Whether or not to enable edit mode. In edit mode controls
          * for editing existing tiles and creating new ones are shown.
          * This mode also enables positioning and resizing of the tiles.
          */
-        this.editMode = input(false);
+        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
         this.#editModeEffect = effect(() => {
             const e = this.editMode();
             this._editMode.set(e);
@@ -568,11 +569,11 @@ class YuvWidgetGridComponent {
                     this.options.api.optionsChanged();
                 }
             }, 0);
-        });
-        this.gridItemConfig = input(undefined);
+        }, ...(ngDevMode ? [{ debugName: "#editModeEffect" }] : []));
+        this.gridItemConfig = input(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : []));
         this.#gridItemConfigEffect = effect(() => {
             this.#widgetGridService.setWidgetGrid(this.gridItemConfig());
-        });
+        }, ...(ngDevMode ? [{ debugName: "#gridItemConfigEffect" }] : []));
         /**
          * Collection of buckets to load available widgets from. Wildcards are also posssible:
          * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
@@ -580,7 +581,7 @@ class YuvWidgetGridComponent {
          * `*` represents any character 0-n times
          * `?` represents exactly one character
          */
-        this.buckets = input(undefined);
+        this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : []));
         // @Input() buckets?: string[];
         /**
          * Emitted when the grid has been changed
@@ -648,16 +649,16 @@ class YuvWidgetGridComponent {
         });
         this.gridChange.emit(mapped);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: "gridsterItems", first: true, predicate: GridsterItemComponent, 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", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i4.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItemComponent, 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: "gridsterItems", first: true, predicate: GridsterItemComponent, 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", "ngComponentOutletNgModuleFactory"], 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: GridsterComponent, 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: GridsterItemComponent, 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: "19.2.20", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-widget-grid', imports: [
                         CommonModule,
                         DynamicIoModule,
                         SignalComponentIoModule,
-                        TranslateModule,
+                        TranslatePipe,
                         GridsterComponent,
                         MatIconModule,
                         MatTooltipModule,
@@ -667,25 +668,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         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"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { gridsterItems: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GridsterItemComponent), { 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 {
     constructor() {
         this.dialogRef = inject((MatDialogRef));
-        this.workspaceForm = input.required();
+        this.workspaceForm = input.required(...(ngDevMode ? [{ debugName: "workspaceForm" }] : []));
         this.workspaceSubmit = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", 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: "ngmodule", type: CommonModule }, { 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: TranslateModule$1 }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", 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],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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WorkspaceEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WorkspaceEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-workspace-edit', imports: [CommonModule, DialogComponent, MatFormFieldModule,
+            args: [{ selector: 'yuv-workspace-edit', imports: [
+                        DialogComponent,
+                        MatFormFieldModule,
                         MatInputModule,
                         YmtButtonDirective,
-                        TranslateModule$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"] }]
-        }] });
+                        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"] }]
+        }], propDecorators: { workspaceForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceForm", required: true }] }], workspaceSubmit: [{ type: i0.Output, args: ["workspaceSubmit"] }] } });
 
 /**
  * Component for managing multiple widget grids in  so called workspaces.
@@ -708,15 +712,15 @@ class YuvWidgetGridWorkspacesComponent {
             id: [''],
             label: ['', Validators.required]
         });
-        this.options = input(this.#DEFAULT_WORKSPACE_OPTIONS);
+        this.options = input(this.#DEFAULT_WORKSPACE_OPTIONS, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this._workspaceOptions = computed(() => ({
             gridConfig: {
                 ...this.#DEFAULT_WORKSPACE_OPTIONS.gridConfig,
                 ...(this.options().gridConfig || {})
             }
-        }));
-        this.workspaceConfig = input(undefined);
-        this._workspaceConfig = signal(undefined);
+        }), ...(ngDevMode ? [{ debugName: "_workspaceOptions" }] : []));
+        this.workspaceConfig = input(undefined, ...(ngDevMode ? [{ debugName: "workspaceConfig" }] : []));
+        this._workspaceConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "_workspaceConfig" }] : []));
         this.#workspaceConfigEffect = effect(() => {
             const wsc = this.workspaceConfig();
             untracked(() => {
@@ -726,7 +730,7 @@ class YuvWidgetGridWorkspacesComponent {
                     this.setWorkspace(wsc.currentWorkspace, true);
                 }
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#workspaceConfigEffect" }] : []));
         /**
          * Collection of buckets to load available widgets from. Wildcards are also posssible:
          * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
@@ -734,13 +738,13 @@ class YuvWidgetGridWorkspacesComponent {
          * `*` represents any character 0-n times
          * `?` represents exactly one character
          */
-        this.buckets = input(undefined);
+        this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : []));
         this.configChange = output();
         this.gridItemEvent = output();
         this.editModeChange = output();
-        this.editMode = signal(false);
+        this.editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
         // currently selected workspace
-        this.workspace = signal(undefined);
+        this.workspace = signal(undefined, ...(ngDevMode ? [{ debugName: "workspace" }] : []));
         this.#workspaceEffect = effect(() => {
             const ws = this.workspace();
             this.workspaceLabel.set(ws ? this.getLabel(ws) : '');
@@ -749,9 +753,9 @@ class YuvWidgetGridWorkspacesComponent {
                     this.workspaceForm.patchValue({ label: this.workspaceLabel(), id: ws.id });
                 this.gridItemConfig.set(ws ? JSON.parse(JSON.stringify(ws.grid)) : undefined);
             });
-        });
-        this.workspaceLabel = signal('');
-        this.gridItemConfig = signal(undefined);
+        }, ...(ngDevMode ? [{ debugName: "#workspaceEffect" }] : []));
+        this.workspaceLabel = signal('', ...(ngDevMode ? [{ debugName: "workspaceLabel" }] : []));
+        this.gridItemConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : []));
     }
     #dialog;
     #fb;
@@ -902,13 +906,12 @@ class YuvWidgetGridWorkspacesComponent {
     emitConfigChange() {
         this.configChange.emit(this._workspaceConfig());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: "ngmodule", type: CommonModule }, { 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: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$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$3.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$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.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: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: WorkspaceEditComponent, selector: "yuv-workspace-edit", inputs: ["workspaceForm"], outputs: ["workspaceSubmit"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-widget-grid-workspaces', imports: [
-                        CommonModule,
                         YuvWidgetGridComponent,
                         YmtButtonDirective,
                         ReactiveFormsModule,
@@ -919,23 +922,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         MatMenuModule,
                         MatDividerModule,
                         MatTooltipModule,
-                        TranslateModule,
+                        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"] }] } });
 
 const cmp = [
     YuvWidgetGridComponent,
     YuvWidgetGridWorkspacesComponent
 ];
 class YuvWidgetGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
             YuvWidgetGridWorkspacesComponent], exports: [YuvWidgetGridComponent,
             YuvWidgetGridWorkspacesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridModule, imports: [cmp] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, imports: [cmp] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvWidgetGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvWidgetGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [cmp],