@yuuvis/client-components 3.0.0-beta.21.1

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

@@ -0,0 +1,933 @@
+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 * 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 { 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 { MatInputModule } from '@angular/material/input';
+import * as i4$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
+
+class WidgetGridEventService {
+    widgetGridEventSource = new ReplaySubject();
+    widgetEvents$ = this.widgetGridEventSource.asObservable();
+    trigger(evt) {
+        this.widgetGridEventSource.next(evt);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NoopComponent {
+    widgetConfig;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.9", 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: [{
+                type: Input
+            }] } });
+
+/**
+ * This service provides the list of widgets that could be added
+ * to a widget grid. You could use it to register your own
+ * widgets.
+ */
+class WidgetGridRegistry {
+    translate = inject(TranslateService);
+    /**
+     * List of pre-registered widgets provided out-of-the-box
+     * by the widget grid module
+     */
+    registeredWidgets = [];
+    /**
+     * Buckets are collection of widget references.
+     * You can put any widget registered gloabally 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.
+     */
+    widgetBuckets = {};
+    /**
+     * Get the noop component. This component will be rendered in
+     * the grid tile if not matching widget could be found in the
+     * list of registered widgets. It will show some kind of 'not
+     * found' message and provide the controls to remove that none
+     * existing component from the widget grid.
+     * @returns NoopComponent
+     */
+    getNoopWidget() {
+        return {
+            id: 'noop',
+            label: this.translate.instant('yuv.widget-grid.widget.noop.label'),
+            widgetComponent: NoopComponent
+        };
+    }
+    /**
+     * Setup components are the administrative part of a widget. They
+     * are used to set up a widget. Not all the widgets will have a setup
+     * component.
+     * @param widgetName The widgets name
+     * @returns The setup component of a widget. Throws error if there
+     * is not widget registered with the given name
+     */
+    getWidgetSetupComponent(widgetName) {
+        const widget = this.registeredWidgets.find((w) => w.id === widgetName);
+        if (!widget)
+            throw Error('Widget setup component not found');
+        return widget.setupComponent;
+    }
+    /**
+     * Get the component for a widget. This is the component that will
+     * be rendered in a grid tile.
+     * @param widgetName The widgets name
+     * @returns The widget component or noop component if there is
+     * no component registered with the given name
+     */
+    getWidgetComponent(widgetName) {
+        const widget = this.registeredWidgets.find((w) => w.id === widgetName);
+        if (!widget)
+            console.error('Widget component not found');
+        return widget?.widgetComponent || NoopComponent;
+    }
+    /**
+     * Adds a new widget to the list of registered widgets. That way
+     * you can create custom widgets that are then available to be
+     * added to a users widget grid.
+     * @param widget The widget to be registered
+     * @param bucket List of buckets to register to. If a bucket does
+     * not exist it'll be created.
+     */
+    registerGridWidget(widget, buckets) {
+        const existingWidget = this.registeredWidgets.find((w) => w.id === widget.id);
+        if (!existingWidget)
+            this.registeredWidgets.push(widget);
+        if (buckets?.length) {
+            buckets.forEach((b) => {
+                this._addToBucket(b, widget.id);
+            });
+        }
+    }
+    /**
+     * Register a collection of widgets
+     * @param widgets The widgets to be registered
+     * @param bucket List of buckets to register to. If a bucket does
+     * 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))];
+        if (buckets?.length) {
+            buckets.forEach((b) => widgets.forEach((w) => this._addToBucket(b, w.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);
+    }
+    clearRegisteredWidget() {
+        this.registeredWidgets = [];
+    }
+    /**
+     * Get registered widgets. This list could be narrowed down by a list
+     * of buckets. Buckets are lists of registered widgets registered for
+     * a certain key (the buckets name).
+     * @param buckets name of buckets to restrict the widgets to
+     * @returns Array of grid widgets
+     */
+    getRegisteredWidgets(buckets) {
+        if (buckets?.length) {
+            // buckets may contain wildcards ...
+            // grab all buckets matching the wildcards
+            const matchedBuckets = {};
+            buckets.forEach((b) => {
+                if (b.match(/[*?]/)) {
+                    // bucket has a pattern
+                    Object.keys(this.widgetBuckets).forEach((wb) => {
+                        if (this._wildcardMatch(wb, b))
+                            matchedBuckets[wb] = 0;
+                    });
+                }
+                else
+                    matchedBuckets[b] = 0;
+            });
+            const bucketWidgetNames = {};
+            Object.keys(matchedBuckets).forEach((b) => this.widgetBuckets[b].forEach((widgetName) => {
+                bucketWidgetNames[widgetName] = 0;
+            }));
+            const widgetNames = Object.keys(bucketWidgetNames);
+            return this.registeredWidgets.filter((w) => widgetNames.includes(w.id)).map((w) => this.#translateLabel(w));
+        }
+        else
+            return this.registeredWidgets.map((w) => this.#translateLabel(w));
+    }
+    _wildcardMatch(text, pattern) {
+        const regexPattern = new RegExp('^' + pattern.replace(/\?/g, '.').replace(/\*/g, '.*') + '$');
+        return regexPattern.test(text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+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
+ * box. But if you want to use custom ones or add i18n you could overwrite
+ * them. The grid as well as the widgets will use those labels or fall back
+ * to their default ones. If you are developing own widgets you should
+ * consider using those labels as well.
+ */
+class WidgetGridService {
+    widgetGridRegistry;
+    widgetGrid = [];
+    widgetGridSource = new ReplaySubject();
+    widgetGrid$ = this.widgetGridSource.asObservable();
+    widgetGridUpdateSource = new Subject();
+    /**
+     * Emitted when the widget grid has been updated
+     */
+    widgetGridUpdate$ = this.widgetGridUpdateSource.asObservable();
+    addItemSize = {
+        rows: 2,
+        cols: 3,
+    };
+    constructor(widgetGridRegistry) {
+        this.widgetGridRegistry = widgetGridRegistry;
+    }
+    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 = {
+                    ...gic,
+                    widget: cmp,
+                    widgetConfigMap: {
+                        widgetConfig: cmp === NoopComponent
+                            ? {
+                                widgetName: gic.widgetName,
+                            }
+                            : gic.widgetConfig,
+                    },
+                };
+                return gc;
+            });
+        }
+        else {
+            this.widgetGrid = [];
+        }
+        this.widgetGridSource.next(this.widgetGrid);
+    }
+    /**
+     * Update config of an existing widget
+     * @param widgetId ID of the widget to be updated
+     * @param setupWidgetConfig The updated configuration for that widget
+     */
+    updateWidget(widgetId, setupWidgetConfig) {
+        const gridWidget = this.widgetGrid.find((w) => w.id === widgetId);
+        if (gridWidget && setupWidgetConfig) {
+            gridWidget.widgetConfig = setupWidgetConfig;
+            gridWidget.widgetConfigMap = { widgetConfig: setupWidgetConfig };
+        }
+        this.widgetGridSource.next(this.widgetGrid);
+        this.widgetGridUpdateSource.next(widgetId);
+    }
+    replaceWidget(widgetId, widgetName, setupWidgetConfig) {
+        const gridWidgetIndex = this.widgetGrid.findIndex((w) => w.id === widgetId);
+        if (gridWidgetIndex !== -1) {
+            const w = {
+                ...this.widgetGrid[gridWidgetIndex],
+                ...{
+                    widgetName,
+                    widgetConfig: setupWidgetConfig || {},
+                    widget: this.widgetGridRegistry.getWidgetComponent(widgetName),
+                    widgetConfigMap: { widgetConfig: setupWidgetConfig || {} },
+                },
+            };
+            this.widgetGrid[gridWidgetIndex] = w;
+            this.widgetGridSource.next(this.widgetGrid);
+            this.widgetGridUpdateSource.next(widgetId);
+        }
+    }
+    /**
+     * Add a new grid item to the widget grid.
+     * @param widgetName The name of the grid item to be added
+     * @param setupWidgetConfig
+     */
+    addWidget(widgetName, setupWidgetConfig) {
+        const gridWidget = {
+            id: WidgetGridUtils.uuid(),
+            widgetName,
+            widgetConfig: setupWidgetConfig,
+            widget: this.widgetGridRegistry.getWidgetComponent(widgetName),
+            widgetConfigMap: { widgetConfig: setupWidgetConfig },
+            x: 0,
+            y: 0,
+            rows: this.addItemSize.rows,
+            cols: this.addItemSize.cols,
+        };
+        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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: WidgetGridRegistry }] });
+
+class WidgetPickerComponent {
+    #widgetGridRegistry = inject(WidgetGridRegistry);
+    #widgetGridService = inject(WidgetGridService);
+    #dialogData = inject(MAT_DIALOG_DATA);
+    #dialogRef = inject((MatDialogRef));
+    pickerFormControl = new FormControl();
+    widgetId;
+    selectedWidget;
+    widgetConfigMap = {};
+    setupWidgetConfig;
+    widgetConfigDirty = false;
+    widgetConfigState;
+    registeredWidgets = [];
+    setupWidgetDynamicOutputs = {
+        widgetConfigChange: (widgetConfig) => {
+            this.onSetupConfigChange(widgetConfig);
+        },
+        widgetConfigStateChange: (s) => {
+            this.widgetConfigState = s || undefined;
+        }
+    };
+    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();
+    constructor() {
+        this.pickerFormControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((widgets) => {
+            if (widgets.length)
+                this.pick(widgets[0]);
+        });
+    }
+    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();
+        }
+    }
+    onSetupConfigChange(setupConfig) {
+        this.widgetConfigDirty = !!setupConfig;
+        this.setupWidgetConfig = setupConfig;
+    }
+    setupComponentSave() {
+        // TODO: save/emit config
+        if (this.widgetId && this.selectedWidget) {
+            if (this.pickerData()?.widgetName !== this.selectedWidget.id) {
+                this.#widgetGridService.replaceWidget(this.widgetId, this.selectedWidget.id, this.setupWidgetConfig);
+            }
+            else {
+                this.#widgetGridService.updateWidget(this.widgetId, this.setupWidgetConfig);
+            }
+        }
+        else {
+            this.#widgetGridService.addWidget(this.selectedWidget.id, this.setupWidgetConfig);
+        }
+        this.picked.emit();
+        this.#dialogRef.close();
+    }
+    setupComponentCancel() {
+        this.reset();
+    }
+    cancel() {
+        this.canceled.emit();
+        this.#dialogRef.close();
+    }
+    reset() {
+        this.selectedWidget = undefined;
+        this.setupWidgetConfig = undefined;
+    }
+    ngOnInit() {
+        this.registeredWidgets = this.#widgetGridRegistry.getRegisteredWidgets(this.buckets());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-widget-picker', imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        TranslatePipe,
+                        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"] }]
+        }], 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 = inject(MatDialog);
+    #widgetGridService = inject(WidgetGridService);
+    #widgetGridEventService = inject(WidgetGridEventService);
+    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
+     * for editing existing tiles and creating new ones are shown.
+     * 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:
+     * `[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 */ []));
+    // @Input() buckets?: string[];
+    /**
+     * Emitted when the grid has been changed
+     */
+    gridChange = output();
+    gridItemEvent = output();
+    /**
+     * Emitted when the widget picker is opened or closed in edit mode
+     */
+    widgetPickerOpen = output();
+    widgetGrid = [];
+    widgetPickerData;
+    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();
+        });
+    }
+    openWidgetPicker(item) {
+        if (item) {
+            // open setup component for selected grid item
+            this.widgetPickerData = {
+                widgetName: item.widgetName,
+                widgetConfigMap: item.widgetConfigMap,
+                widgetId: item.id
+            };
+        }
+        else {
+            this.widgetPickerData = undefined;
+        }
+        this.widgetPickerOpen.emit(true);
+        this.#dialog
+            .open(this.widgetPicker(), {
+            data: {
+                pickerData: this.widgetPickerData,
+                buckets: this.buckets()
+            }
+        })
+            .afterClosed()
+            .subscribe(() => this.widgetPickerOpen.emit(false));
+    }
+    /**
+     * Removes a widget from the grid
+     * @param item The widget to be removed
+     */
+    removeItem(item) {
+        this.#widgetGridService.removeWidget(item.id);
+    }
+    /**
+     * Add a new widget to the grid by opening the widget picker
+     */
+    addItem() {
+        this.openWidgetPicker();
+    }
+    emitChange() {
+        const mapped = [];
+        this.widgetGrid.forEach((i) => {
+            const m = { ...i };
+            delete m['widget'];
+            delete m['widgetConfigMap'];
+            mapped.push(m);
+        });
+        this.gridChange.emit(mapped);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-widget-grid', imports: [
+                        CommonModule,
+                        DynamicIoModule,
+                        SignalComponentIoModule,
+                        TranslatePipe,
+                        Gridster,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        WidgetPickerComponent,
+                        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"] }]
+        }], 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));
+    workspaceForm = input.required(...(ngDevMode ? [{ debugName: "workspaceForm" }] : /* istanbul ignore next */ []));
+    workspaceSubmit = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkspaceEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-workspace-edit', imports: [
+                        DialogComponent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        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"] }]
+        }], 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.
+ * Each workspace can have its own configuration and widgets. The user can
+ * switch between workspaces to use or edit the widgets in the current workspace.
+ */
+class YuvWidgetGridWorkspacesComponent {
+    #dialog = inject(MatDialog);
+    #fb = inject(FormBuilder);
+    #confirm = inject(ConfirmService);
+    translate = inject(TranslateService);
+    workspaceDialogRef;
+    #DEFAULT_WORKSPACE_OPTIONS = {
+        gridConfig: {
+            columns: 10,
+            rows: 10
+        }
+    };
+    workspaceForm = this.#fb.group({
+        id: [''],
+        label: ['', Validators.required]
+    });
+    get workspaceLabelControl() {
+        return this.workspaceForm.get('label');
+    }
+    options = input(this.#DEFAULT_WORKSPACE_OPTIONS, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    _workspaceOptions = computed(() => ({
+        gridConfig: {
+            ...this.#DEFAULT_WORKSPACE_OPTIONS.gridConfig,
+            ...(this.options().gridConfig || {})
+        }
+    }), ...(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 */ []));
+    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);
+        if (workspace) {
+            this.workspace.set(workspace);
+            this._workspaceConfig.update((cfg) => ({
+                ...cfg,
+                currentWorkspace: id
+            }));
+            this.#updateOriginalWorkspaceConfig();
+        }
+        else {
+            this.workspace.set(undefined);
+        }
+        if (!silent)
+            this.emitConfigChange();
+    }
+    openWorkspaceDialog(create, tplRef) {
+        if (create) {
+            this.workspaceForm.reset();
+        }
+        this.workspaceDialogRef = this.#dialog.open(tplRef);
+    }
+    saveWorkspace() {
+        let cfg = this._workspaceConfig();
+        if (!cfg) {
+            cfg = {
+                workspaces: []
+            };
+        }
+        const isNewWorkspace = !this.workspaceForm.value.id;
+        if (isNewWorkspace) {
+            const newWorkspace = {
+                id: WidgetGridUtils.uuid(),
+                label: this.workspaceForm.value.label,
+                grid: []
+            };
+            this._workspaceConfig.set({
+                ...cfg,
+                workspaces: [...cfg.workspaces, newWorkspace],
+                currentWorkspace: newWorkspace.id
+            });
+            this.workspace.set(newWorkspace);
+            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
+                });
+            }
+            else {
+                // workspace label may have changed
+                cfg.workspaces[existingIndex].label = this.workspaceForm.value.label;
+            }
+        }
+        this.workspaceDialogRef?.close();
+        this.emitConfigChange();
+    }
+    #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();
+                });
+            }
+        }
+    }
+    emitConfigChange() {
+        this.configChange.emit(this._workspaceConfig());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-widget-grid-workspaces', imports: [
+                        YuvWidgetGridComponent,
+                        YmtButtonDirective,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatMenuModule,
+                        MatDividerModule,
+                        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"] }] } });
+
+const cmp = [
+    YuvWidgetGridComponent,
+    YuvWidgetGridWorkspacesComponent
+];
+class YuvWidgetGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
+            YuvWidgetGridWorkspacesComponent], exports: [YuvWidgetGridComponent,
+            YuvWidgetGridWorkspacesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, imports: [cmp] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [cmp],
+                    exports: [cmp]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WidgetGridRegistry, WidgetGridService, YuvWidgetGridComponent, YuvWidgetGridModule, YuvWidgetGridWorkspacesComponent };
+//# sourceMappingURL=yuuvis-client-components-widget-grid.mjs.map