@yuuvis/client-framework 3.0.0-beta.21.0 → 3.0.0-beta.21.2

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

@@ -1,950 +1,11 @@
-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-framework/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 {
-    constructor() {
-        this.widgetGridEventSource = new ReplaySubject();
-        this.widgetEvents$ = this.widgetGridEventSource.asObservable();
-    }
-    trigger(evt) {
-        this.widgetGridEventSource.next(evt);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵ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 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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 {
-    constructor() {
-        this.translate = inject(TranslateService);
-        /**
-         * List of pre-registered widgets provided out-of-the-box
-         * by the widget grid module
-         */
-        this.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.
-         */
-        this.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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵ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 { this.PREF_FUNCTION = 'Function'; }
-    static { this.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 {
-    constructor(widgetGridRegistry) {
-        this.widgetGridRegistry = widgetGridRegistry;
-        this.widgetGrid = [];
-        this.widgetGridSource = new ReplaySubject();
-        this.widgetGrid$ = this.widgetGridSource.asObservable();
-        this.widgetGridUpdateSource = new Subject();
-        /**
-         * Emitted when the widget grid has been updated
-         */
-        this.widgetGridUpdate$ = this.widgetGridUpdateSource.asObservable();
-        this.addItemSize = {
-            rows: 2,
-            cols: 3,
-        };
-    }
-    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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetGridService, deps: [{ token: WidgetGridRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵ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;
-    #widgetGridService;
-    #dialogData;
-    #dialogRef;
-    #pickerDataEffect;
-    constructor() {
-        this.#widgetGridRegistry = inject(WidgetGridRegistry);
-        this.#widgetGridService = inject(WidgetGridService);
-        this.#dialogData = inject(MAT_DIALOG_DATA);
-        this.#dialogRef = inject((MatDialogRef));
-        this.pickerFormControl = new FormControl();
-        this.widgetConfigMap = {};
-        this.widgetConfigDirty = false;
-        this.registeredWidgets = [];
-        this.setupWidgetDynamicOutputs = {
-            widgetConfigChange: (widgetConfig) => {
-                this.onSetupConfigChange(widgetConfig);
-            },
-            widgetConfigStateChange: (s) => {
-                this.widgetConfigState = s || undefined;
-            }
-        };
-        this.pickerData = input(this.#dialogData.pickerData, ...(ngDevMode ? [{ debugName: "pickerData" }] : /* istanbul ignore next */ []));
-        this.#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
-         */
-        this.buckets = input(this.#dialogData.buckets, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
-        this.picked = output();
-        this.canceled = output();
-        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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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;
-    #widgetGridService;
-    #widgetGridEventService;
-    #gridConfigEffect;
-    #editModeEffect;
-    #gridItemConfigEffect;
-    constructor() {
-        this.#dialog = inject(MatDialog);
-        this.#widgetGridService = inject(WidgetGridService);
-        this.#widgetGridEventService = inject(WidgetGridEventService);
-        this.gridster = viewChild(Gridster, ...(ngDevMode ? [{ debugName: "gridster" }] : /* istanbul ignore next */ []));
-        this.widgetPicker = viewChild.required('widgetPicker', { read: TemplateRef });
-        this.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();
-            }
-        };
-        this.gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : /* istanbul ignore next */ []));
-        this.#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 */ []));
-        this._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.
-         */
-        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
-        this.#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 */ []));
-        this.gridItemConfig = input(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : /* istanbul ignore next */ []));
-        this.#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
-         */
-        this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
-        // @Input() buckets?: string[];
-        /**
-         * Emitted when the grid has been changed
-         */
-        this.gridChange = output();
-        this.gridItemEvent = output();
-        /**
-         * Emitted when the widget picker is opened or closed in edit mode
-         */
-        this.widgetPickerOpen = output();
-        this.widgetGrid = [];
-        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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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 {
-    constructor() {
-        this.dialogRef = inject((MatDialogRef));
-        this.workspaceForm = input.required(...(ngDevMode ? [{ debugName: "workspaceForm" }] : /* istanbul ignore next */ []));
-        this.workspaceSubmit = output();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkspaceEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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"] }] } });
+export * from '@yuuvis/client-components/widget-grid';
 
 /**
- * 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.
+ * @deprecated Import from `@yuuvis/client-components/widget-grid` instead.
+ * This entry point is a backward-compatibility shim and will be removed in a future release.
  */
-class YuvWidgetGridWorkspacesComponent {
-    constructor() {
-        this.#dialog = inject(MatDialog);
-        this.#fb = inject(FormBuilder);
-        this.#confirm = inject(ConfirmService);
-        this.translate = inject(TranslateService);
-        this.#DEFAULT_WORKSPACE_OPTIONS = {
-            gridConfig: {
-                columns: 10,
-                rows: 10
-            }
-        };
-        this.workspaceForm = this.#fb.group({
-            id: [''],
-            label: ['', Validators.required]
-        });
-        this.options = input(this.#DEFAULT_WORKSPACE_OPTIONS, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this._workspaceOptions = computed(() => ({
-            gridConfig: {
-                ...this.#DEFAULT_WORKSPACE_OPTIONS.gridConfig,
-                ...(this.options().gridConfig || {})
-            }
-        }), ...(ngDevMode ? [{ debugName: "_workspaceOptions" }] : /* istanbul ignore next */ []));
-        this.workspaceConfig = input(undefined, ...(ngDevMode ? [{ debugName: "workspaceConfig" }] : /* istanbul ignore next */ []));
-        this._workspaceConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "_workspaceConfig" }] : /* istanbul ignore next */ []));
-        this.#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
-         */
-        this.buckets = input(undefined, ...(ngDevMode ? [{ debugName: "buckets" }] : /* istanbul ignore next */ []));
-        this.configChange = output();
-        this.gridItemEvent = output();
-        this.editModeChange = output();
-        this.editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
-        // currently selected workspace
-        this.workspace = signal(undefined, ...(ngDevMode ? [{ debugName: "workspace" }] : /* istanbul ignore next */ []));
-        this.#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 */ []));
-        this.workspaceLabel = signal('', ...(ngDevMode ? [{ debugName: "workspaceLabel" }] : /* istanbul ignore next */ []));
-        this.gridItemConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "gridItemConfig" }] : /* istanbul ignore next */ []));
-    }
-    #dialog;
-    #fb;
-    #confirm;
-    #DEFAULT_WORKSPACE_OPTIONS;
-    get workspaceLabelControl() {
-        return this.workspaceForm.get('label');
-    }
-    #workspaceConfigEffect;
-    // persist the last 'accepted' workspace config to be able to revert changes
-    #originalWidgetGridWorkspaceConfig;
-    #workspaceEffect;
-    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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridWorkspacesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵ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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: YuvWidgetGridModule, imports: [YuvWidgetGridComponent,
-            YuvWidgetGridWorkspacesComponent], exports: [YuvWidgetGridComponent,
-            YuvWidgetGridWorkspacesComponent] }); }
-    static { this.ɵ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-framework-widget-grid.mjs.map