@yuuvis/client-framework 2.1.8 → 2.1.10

package/fesm2022/yuuvis-client-framework-object-versions.mjs

@@ -0,0 +1,177 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, effect, input, output, signal, untracked, Component, NgModule } from '@angular/core';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from '@yuuvis/client-core';
+import { DmsService, TranslateService, TranslateModule, LocaleDatePipe } from '@yuuvis/client-core';
+import { LayoutSettingsService, ConfirmService, BusyOverlayDirective } from '@yuuvis/client-framework/common';
+import * as i3 from '@yuuvis/client-framework/list';
+import { ListComponent, YuvListModule } from '@yuuvis/client-framework/list';
+import { ObjectDetailsHeaderComponent } from '@yuuvis/client-framework/object-details';
+import { ObjectPreviewComponent } from '@yuuvis/client-framework/object-preview';
+import { ObjectSummaryDataComponent } from '@yuuvis/client-framework/object-summary';
+import * as i1 from '@yuuvis/client-framework/split-view';
+import { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';
+import { switchMap, finalize } from 'rxjs';
+
+class ObjectVersionsComponent {
+    constructor() {
+        this.#layoutSettingsService = inject(LayoutSettingsService);
+        this.#dmsService = inject(DmsService);
+        this.#confirm = inject(ConfirmService);
+        this.translate = inject(TranslateService);
+        this.versionList = viewChild(ListComponent);
+        this.#versionListEffect = effect(() => {
+            const list = this.versionList();
+            if (list)
+                setTimeout(() => list.focus(), 100);
+            this.#preSelect();
+        });
+        this.dmsObject = input.required();
+        this.#dmsObjectEffect = effect(() => {
+            const o = this.dmsObject();
+            // this.selectedVersion.set(o);
+            if (o)
+                this.#fetchVersions(o);
+        });
+        /**
+         * Object type to use for retrieving header data
+         */
+        this.type = input.required();
+        /**
+         * If the object config for the given type has been stored in a certain bucket, this
+         * bucket can be provided here. If no bucket is set, the config will be retrieved
+         * from the main object config
+         */
+        this.objectConfigBucket = input(undefined);
+        this.objectRestored = output();
+        this.splitGutterSize = this.#layoutSettingsService.DEFAULT_SPLIT_VIEW_GUTTER_SIZE;
+        this.busy = signal(false);
+        this.versions = signal([]);
+        this.#versionsEffect = effect(() => {
+            const v = this.versions();
+            untracked(() => {
+                this.#preSelect();
+            });
+        });
+        this.selectedVersion = signal(undefined);
+        this.error = signal(undefined);
+    }
+    #layoutSettingsService;
+    #dmsService;
+    #confirm;
+    #versionListEffect;
+    #dmsObjectEffect;
+    #versionsEffect;
+    #preSelect() {
+        const vl = this.versionList();
+        if (vl && !this.selectedVersion()) {
+            vl.select(0);
+        }
+    }
+    itemSelected(selectedIndex) {
+        const idx = selectedIndex[0];
+        this.selectedVersion.set(this.versions()[idx]);
+    }
+    downloadCurrentVersion() {
+        const o = this.selectedVersion();
+        if (o)
+            this.#dmsService.downloadContent([o], true);
+    }
+    restoreCurrentVersion() {
+        const o = this.selectedVersion();
+        if (o) {
+            this.#confirm
+                .confirm({
+                title: this.translate.instant('yuv.object-versions.actions.restore'),
+                message: this.translate.instant('yuv.object-versions.actions.restore.confirm.message', {
+                    version: o.version
+                })
+            })
+                .subscribe((confirmed) => {
+                if (confirmed)
+                    this.#executeRestoreCurrentVersion(o);
+            });
+        }
+    }
+    #executeRestoreCurrentVersion(version) {
+        this.busy.set(true);
+        this.#dmsService
+            .restoreDmsObject(version.id, version.version)
+            .pipe(switchMap((dmsObject) => this.#dmsService.getDmsObjectVersions(dmsObject.id)), finalize(() => this.busy.set(false)))
+            .subscribe({
+            next: (versions) => {
+                this.versions.set(versions);
+                this.versionList()?.select(0);
+            }
+        });
+    }
+    #fetchVersions(dmsObject) {
+        // if the dms object only has one version we do not need to ask the backend
+        if (dmsObject.version === 1) {
+            this.versions.set([dmsObject]);
+        }
+        else {
+            this.busy.set(true);
+            this.#dmsService
+                .getDmsObjectVersions(dmsObject.id)
+                .pipe(finalize(() => this.busy.set(false)))
+                .subscribe({
+                next: (versions) => {
+                    this.versions.set(versions);
+                },
+                error: (e) => {
+                    // TODO: handle errors
+                    this.error.set(this.translate.instant('yuv.object-versions.error.fetch-versions'));
+                    console.error(e);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectVersionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectVersionsComponent, isStandalone: true, selector: "yuv-object-versions", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, objectConfigBucket: { classPropertyName: "objectConfigBucket", publicName: "objectConfigBucket", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { objectRestored: "objectRestored" }, viewQueries: [{ propertyName: "versionList", first: true, predicate: ListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let err = error();\n@if (!err) {\n  <yuv-split-view [gutterSize]=\"splitGutterSize\" layoutSettingsID=\"yuv.object-versions.split\">\n    <!-- version details -->\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"version-details ymt-panel\" [yuvBusyOverlay]=\"busy()\">\n        @let selected = selectedVersion();\n        @if (selected) {\n          <yuv-object-details-header [dmsObject]=\"selected\" [type]=\"type()\" [bucket]=\"objectConfigBucket()\">\n            <ng-template #yuvHeaderActions>\n              <button mat-icon-button (click)=\"downloadCurrentVersion()\" [matTooltip]=\"'yuv.object-versions.actions.download' | translate\">\n                <mat-icon>download</mat-icon>\n              </button>\n              <button mat-icon-button (click)=\"restoreCurrentVersion()\" [matTooltip]=\"'yuv.object-versions.actions.restore' | translate\">\n                <mat-icon>restore_page</mat-icon>\n              </button>\n            </ng-template>\n          </yuv-object-details-header>\n\n          <mat-tab-group class=\"version-tabs\">\n            <mat-tab [label]=\"'yuv.object-versions.tabs.content.title' | translate\">\n              <ng-template matTabContent>\n                <yuv-object-preview [dmsObject]=\"selected\" [version]=\"selected.version\"></yuv-object-preview>\n              </ng-template>\n            </mat-tab>\n            <mat-tab [label]=\"'yuv.object-versions.tabs.indexdata.title' | translate\">\n              <ng-template matTabContent>\n                <yuv-object-summary-data [dmsObject]=\"selected\"></yuv-object-summary-data>\n              </ng-template> </mat-tab\n          ></mat-tab-group>\n        }\n      </div>\n    </ng-template>\n\n    <!-- versions list -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <div class=\"version-list ymt-panel\">\n        <yuv-list selectOnEnter=\"true\" (itemSelect)=\"itemSelected($event)\">\n          @for (v of versions(); track v.version) {\n            <div class=\"version\" yuvListItem>\n              <div class=\"label\">{{ 'yuv.object-versions.list.version' | translate: { version: v.version } }}</div>\n\n              <span class=\"modified-on\">{{ v.modified.on | localeDate }}</span>\n              <span class=\"modified-by\">{{ v.modified.by.title }}</span>\n            </div>\n          }\n        </yuv-list>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"error\">\n    <p>{{ err }}</p>\n  </div>\n}\n", styles: [":host{display:block}:host .ymt-panel{background-color:var(--ymt-surface);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host .ymt-panel{height:100%;overflow:hidden}:host mat-tab-group{overflow:hidden;height:100%}:host mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host .version{display:grid;grid-template-rows:auto auto;grid-template-columns:1fr auto;grid-template-areas:\"version version\" \"by on\";border-block-end:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-s) var(--ymt-spacing-l);gap:var(--ymt-spacing-s)}:host .version .label{grid-area:version;font:var(--ymt-font-title-small)}:host .version .modified-by{grid-area:by;font:var(--ymt-font-body);color:var(--ymt-text-color-subtle)}:host .version .modified-on{grid-area:on;font:var(--ymt-font-body);color:var(--ymt-text-color-subtle)}:host .error{height:100%;display:flex;align-items:center;justify-content:center}:host .error>p{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border:var(--ymt-danger);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-xs)}\n"], dependencies: [{ kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i1.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible"] }, { kind: "component", type: i1.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version"] }, { kind: "component", type: ObjectDetailsHeaderComponent, selector: "yuv-object-details-header", inputs: ["dmsObject", "type", "bucket"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i3.ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "component", type: ObjectSummaryDataComponent, selector: "yuv-object-summary-data", inputs: ["dmsObject"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectVersionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-versions', imports: [
+                        YuvSplitViewModule,
+                        TranslateModule,
+                        ObjectPreviewComponent,
+                        ObjectDetailsHeaderComponent,
+                        YuvListModule,
+                        BusyOverlayDirective,
+                        ObjectSummaryDataComponent,
+                        MatTabsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        LocaleDatePipe
+                    ], template: "@let err = error();\n@if (!err) {\n  <yuv-split-view [gutterSize]=\"splitGutterSize\" layoutSettingsID=\"yuv.object-versions.split\">\n    <!-- version details -->\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"version-details ymt-panel\" [yuvBusyOverlay]=\"busy()\">\n        @let selected = selectedVersion();\n        @if (selected) {\n          <yuv-object-details-header [dmsObject]=\"selected\" [type]=\"type()\" [bucket]=\"objectConfigBucket()\">\n            <ng-template #yuvHeaderActions>\n              <button mat-icon-button (click)=\"downloadCurrentVersion()\" [matTooltip]=\"'yuv.object-versions.actions.download' | translate\">\n                <mat-icon>download</mat-icon>\n              </button>\n              <button mat-icon-button (click)=\"restoreCurrentVersion()\" [matTooltip]=\"'yuv.object-versions.actions.restore' | translate\">\n                <mat-icon>restore_page</mat-icon>\n              </button>\n            </ng-template>\n          </yuv-object-details-header>\n\n          <mat-tab-group class=\"version-tabs\">\n            <mat-tab [label]=\"'yuv.object-versions.tabs.content.title' | translate\">\n              <ng-template matTabContent>\n                <yuv-object-preview [dmsObject]=\"selected\" [version]=\"selected.version\"></yuv-object-preview>\n              </ng-template>\n            </mat-tab>\n            <mat-tab [label]=\"'yuv.object-versions.tabs.indexdata.title' | translate\">\n              <ng-template matTabContent>\n                <yuv-object-summary-data [dmsObject]=\"selected\"></yuv-object-summary-data>\n              </ng-template> </mat-tab\n          ></mat-tab-group>\n        }\n      </div>\n    </ng-template>\n\n    <!-- versions list -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <div class=\"version-list ymt-panel\">\n        <yuv-list selectOnEnter=\"true\" (itemSelect)=\"itemSelected($event)\">\n          @for (v of versions(); track v.version) {\n            <div class=\"version\" yuvListItem>\n              <div class=\"label\">{{ 'yuv.object-versions.list.version' | translate: { version: v.version } }}</div>\n\n              <span class=\"modified-on\">{{ v.modified.on | localeDate }}</span>\n              <span class=\"modified-by\">{{ v.modified.by.title }}</span>\n            </div>\n          }\n        </yuv-list>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"error\">\n    <p>{{ err }}</p>\n  </div>\n}\n", styles: [":host{display:block}:host .ymt-panel{background-color:var(--ymt-surface);border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host .ymt-panel{height:100%;overflow:hidden}:host mat-tab-group{overflow:hidden;height:100%}:host mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host .version{display:grid;grid-template-rows:auto auto;grid-template-columns:1fr auto;grid-template-areas:\"version version\" \"by on\";border-block-end:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-s) var(--ymt-spacing-l);gap:var(--ymt-spacing-s)}:host .version .label{grid-area:version;font:var(--ymt-font-title-small)}:host .version .modified-by{grid-area:by;font:var(--ymt-font-body);color:var(--ymt-text-color-subtle)}:host .version .modified-on{grid-area:on;font:var(--ymt-font-body);color:var(--ymt-text-color-subtle)}:host .error{height:100%;display:flex;align-items:center;justify-content:center}:host .error>p{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border:var(--ymt-danger);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-xs)}\n"] }]
+        }] });
+
+const cmp = [ObjectVersionsComponent];
+class YuvObjectVersionsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectVersionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectVersionsModule, imports: [ObjectVersionsComponent], exports: [ObjectVersionsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectVersionsModule, imports: [cmp] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectVersionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: cmp,
+                    exports: cmp
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ObjectVersionsComponent, YuvObjectVersionsModule };
+//# sourceMappingURL=yuuvis-client-framework-object-versions.mjs.map

package/fesm2022/yuuvis-client-framework-object-versions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-object-versions.mjs","sources":["../../../../../libs/yuuvis/client-framework/object-versions/src/lib/object-versions.component.ts","../../../../../libs/yuuvis/client-framework/object-versions/src/lib/object-versions.component.html","../../../../../libs/yuuvis/client-framework/object-versions/src/lib/object-versions.module.ts","../../../../../libs/yuuvis/client-framework/object-versions/src/yuuvis-client-framework-object-versions.ts"],"sourcesContent":["import { Component, effect, inject, input, output, signal, untracked, viewChild } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DmsObject, DmsService, LocaleDatePipe, TranslateModule, TranslateService, VirtualObjectType } from '@yuuvis/client-core';\nimport { BusyOverlayDirective, ConfirmService, LayoutSettingsService } from '@yuuvis/client-framework/common';\nimport { ListComponent, YuvListModule } from '@yuuvis/client-framework/list';\nimport { ObjectDetailsHeaderComponent } from '@yuuvis/client-framework/object-details';\nimport { ObjectPreviewComponent } from '@yuuvis/client-framework/object-preview';\nimport { ObjectSummaryDataComponent } from '@yuuvis/client-framework/object-summary';\nimport { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';\nimport { finalize, switchMap } from 'rxjs';\n\n@Component({\n  selector: 'yuv-object-versions',\n  imports: [\n    YuvSplitViewModule,\n    TranslateModule,\n    ObjectPreviewComponent,\n    ObjectDetailsHeaderComponent,\n    YuvListModule,\n    BusyOverlayDirective,\n    ObjectSummaryDataComponent,\n    MatTabsModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    LocaleDatePipe\n  ],\n  templateUrl: './object-versions.component.html',\n  styleUrl: './object-versions.component.scss'\n})\nexport class ObjectVersionsComponent {\n  #layoutSettingsService = inject(LayoutSettingsService);\n  #dmsService = inject(DmsService);\n  #confirm = inject(ConfirmService);\n\n  private translate = inject(TranslateService);\n\n  versionList = viewChild(ListComponent);\n  #versionListEffect = effect(() => {\n    const list = this.versionList();\n\n    if (list) setTimeout(() => list.focus(), 100);\n    this.#preSelect();\n  });\n\n  dmsObject = input.required<DmsObject>();\n  #dmsObjectEffect = effect(() => {\n    const o = this.dmsObject();\n    // this.selectedVersion.set(o);\n    if (o) this.#fetchVersions(o);\n  });\n\n  /**\n   * Object type to use for retrieving header data\n   */\n  type = input.required<VirtualObjectType>();\n  /**\n   * If the object config for the given type has been stored in a certain bucket, this\n   * bucket can be provided here. If no bucket is set, the config will be retrieved\n   * from the main object config\n   */\n  objectConfigBucket = input<string | undefined>(undefined);\n\n  objectRestored = output<number>();\n\n  splitGutterSize = this.#layoutSettingsService.DEFAULT_SPLIT_VIEW_GUTTER_SIZE;\n  busy = signal<boolean>(false);\n  versions = signal<DmsObject[]>([]);\n  #versionsEffect = effect(() => {\n    const v = this.versions();\n    untracked(() => {\n      this.#preSelect();\n    });\n  });\n  selectedVersion = signal<DmsObject | undefined>(undefined);\n  error = signal<string | undefined>(undefined);\n\n  #preSelect() {\n    const vl = this.versionList();\n    if (vl && !this.selectedVersion()) {\n      vl.select(0);\n    }\n  }\n\n  itemSelected(selectedIndex: number[]) {\n    const idx = selectedIndex[0];\n    this.selectedVersion.set(this.versions()[idx]);\n  }\n\n  downloadCurrentVersion() {\n    const o = this.selectedVersion();\n    if (o) this.#dmsService.downloadContent([o], true);\n  }\n\n  restoreCurrentVersion() {\n    const o = this.selectedVersion();\n    if (o) {\n      this.#confirm\n        .confirm({\n          title: this.translate.instant('yuv.object-versions.actions.restore'),\n          message: this.translate.instant('yuv.object-versions.actions.restore.confirm.message', {\n            version: o.version\n          })\n        })\n        .subscribe((confirmed: boolean) => {\n          if (confirmed) this.#executeRestoreCurrentVersion(o);\n        });\n    }\n  }\n\n  #executeRestoreCurrentVersion(version: DmsObject) {\n    this.busy.set(true);\n    this.#dmsService\n      .restoreDmsObject(version.id, version.version)\n      .pipe(\n        switchMap((dmsObject: DmsObject) => this.#dmsService.getDmsObjectVersions(dmsObject.id)),\n        finalize(() => this.busy.set(false))\n      )\n      .subscribe({\n        next: (versions: DmsObject[]) => {\n          this.versions.set(versions);\n          this.versionList()?.select(0);\n        }\n      });\n  }\n\n  #fetchVersions(dmsObject: DmsObject) {\n    // if the dms object only has one version we do not need to ask the backend\n    if (dmsObject.version === 1) {\n      this.versions.set([dmsObject]);\n    } else {\n      this.busy.set(true);\n      this.#dmsService\n        .getDmsObjectVersions(dmsObject.id)\n        .pipe(finalize(() => this.busy.set(false)))\n        .subscribe({\n          next: (versions: DmsObject[]) => {\n            this.versions.set(versions);\n          },\n          error: (e) => {\n            // TODO: handle errors\n            this.error.set(this.translate.instant('yuv.object-versions.error.fetch-versions'));\n            console.error(e);\n          }\n        });\n    }\n  }\n}\n","@let err = error();\n@if (!err) {\n  <yuv-split-view [gutterSize]=\"splitGutterSize\" layoutSettingsID=\"yuv.object-versions.split\">\n    <!-- version details -->\n    <ng-template yuvSplitArea [size]=\"60\">\n      <div class=\"version-details ymt-panel\" [yuvBusyOverlay]=\"busy()\">\n        @let selected = selectedVersion();\n        @if (selected) {\n          <yuv-object-details-header [dmsObject]=\"selected\" [type]=\"type()\" [bucket]=\"objectConfigBucket()\">\n            <ng-template #yuvHeaderActions>\n              <button mat-icon-button (click)=\"downloadCurrentVersion()\" [matTooltip]=\"'yuv.object-versions.actions.download' | translate\">\n                <mat-icon>download</mat-icon>\n              </button>\n              <button mat-icon-button (click)=\"restoreCurrentVersion()\" [matTooltip]=\"'yuv.object-versions.actions.restore' | translate\">\n                <mat-icon>restore_page</mat-icon>\n              </button>\n            </ng-template>\n          </yuv-object-details-header>\n\n          <mat-tab-group class=\"version-tabs\">\n            <mat-tab [label]=\"'yuv.object-versions.tabs.content.title' | translate\">\n              <ng-template matTabContent>\n                <yuv-object-preview [dmsObject]=\"selected\" [version]=\"selected.version\"></yuv-object-preview>\n              </ng-template>\n            </mat-tab>\n            <mat-tab [label]=\"'yuv.object-versions.tabs.indexdata.title' | translate\">\n              <ng-template matTabContent>\n                <yuv-object-summary-data [dmsObject]=\"selected\"></yuv-object-summary-data>\n              </ng-template> </mat-tab\n          ></mat-tab-group>\n        }\n      </div>\n    </ng-template>\n\n    <!-- versions list -->\n    <ng-template yuvSplitArea [size]=\"40\">\n      <div class=\"version-list ymt-panel\">\n        <yuv-list selectOnEnter=\"true\" (itemSelect)=\"itemSelected($event)\">\n          @for (v of versions(); track v.version) {\n            <div class=\"version\" yuvListItem>\n              <div class=\"label\">{{ 'yuv.object-versions.list.version' | translate: { version: v.version } }}</div>\n\n              <span class=\"modified-on\">{{ v.modified.on | localeDate }}</span>\n              <span class=\"modified-by\">{{ v.modified.by.title }}</span>\n            </div>\n          }\n        </yuv-list>\n      </div>\n    </ng-template>\n  </yuv-split-view>\n} @else {\n  <div class=\"error\">\n    <p>{{ err }}</p>\n  </div>\n}\n","import { NgModule } from '@angular/core';\nimport { ObjectVersionsComponent } from './object-versions.component';\n\nconst cmp = [ObjectVersionsComponent];\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YuvObjectVersionsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/yuuvis-client-framework-overflow-hidden.mjs

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, contentChild, signal, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/**
+ * This component is designed to switch the rendered content when it is overflowing due to
+ * resizing. If there is enough available space you can render the 'real' component. If there
+ * is not enough space to render the whole component anymore (it would overflow) another component
+ * can take it's place. If you do not specify that replace-component, the component will just
+ * disappear and make room for other more important components.
+ */
+class OverflowHiddenComponent {
+    constructor() {
+        this.#elRef = inject(ElementRef);
+        // component/content to be rendered when there is enough space
+        this.defaultSlot = contentChild.required('yuvDefaultSlot');
+        // component/content to be rendered when the default component overflows
+        this.overflowSlot = contentChild('yuvOverflowSlot');
+        this.overflow = signal(false);
+    }
+    #elRef;
+    #contentObserver;
+    #initObserver() {
+        this.#contentObserver = new IntersectionObserver((entries) => {
+            const overflowContainer = entries[0];
+            this.overflow.set(overflowContainer.intersectionRatio < 1);
+        }, {
+            threshold: [1],
+            root: this.#elRef.nativeElement
+        });
+    }
+    ngAfterViewInit() {
+        this.#initObserver();
+        this.#contentObserver?.observe(this.#elRef.nativeElement.querySelector('.default'));
+    }
+    ngOnDestroy() {
+        if (this.#contentObserver)
+            this.#contentObserver.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: OverflowHiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: OverflowHiddenComponent, isStandalone: true, selector: "yuv-overflow-hidden", host: { properties: { "class.overflowing": "overflow()" } }, queries: [{ propertyName: "defaultSlot", first: true, predicate: ["yuvDefaultSlot"], descendants: true, isSignal: true }, { propertyName: "overflowSlot", first: true, predicate: ["yuvOverflowSlot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"default\">\n  <ng-container *ngTemplateOutlet=\"defaultSlot()\"></ng-container>\n</div>\n@let os = overflowSlot();\n@if (os) {\n  <div class=\"overflow\">\n    <ng-container *ngTemplateOutlet=\"os\"></ng-container>\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:auto;grid-template-rows:auto;align-items:center;overflow:hidden}:host.overflowing .default{opacity:0;z-index:0}:host.overflowing .overflow{opacity:1;z-index:1}:host .default,:host .overflow{grid-column:1;grid-row:1;z-index:1}:host .overflow{opacity:0;z-index:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: OverflowHiddenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-overflow-hidden', imports: [CommonModule], host: {
+                        '[class.overflowing]': 'overflow()'
+                    }, template: "<div class=\"default\">\n  <ng-container *ngTemplateOutlet=\"defaultSlot()\"></ng-container>\n</div>\n@let os = overflowSlot();\n@if (os) {\n  <div class=\"overflow\">\n    <ng-container *ngTemplateOutlet=\"os\"></ng-container>\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:auto;grid-template-rows:auto;align-items:center;overflow:hidden}:host.overflowing .default{opacity:0;z-index:0}:host.overflowing .overflow{opacity:1;z-index:1}:host .default,:host .overflow{grid-column:1;grid-row:1;z-index:1}:host .overflow{opacity:0;z-index:0}\n"] }]
+        }] });
+
+const cmp = [OverflowHiddenComponent];
+class YuvOverflowHiddenModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvOverflowHiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: YuvOverflowHiddenModule, imports: [OverflowHiddenComponent], exports: [OverflowHiddenComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvOverflowHiddenModule, imports: [cmp] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvOverflowHiddenModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: cmp,
+                    exports: cmp
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OverflowHiddenComponent, YuvOverflowHiddenModule };
+//# sourceMappingURL=yuuvis-client-framework-overflow-hidden.mjs.map

package/fesm2022/yuuvis-client-framework-overflow-hidden.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-overflow-hidden.mjs","sources":["../../../../../libs/yuuvis/client-framework/overflow-hidden/src/lib/overflow-hidden.component.ts","../../../../../libs/yuuvis/client-framework/overflow-hidden/src/lib/overflow-hidden.component.html","../../../../../libs/yuuvis/client-framework/overflow-hidden/src/lib/overflow-hidden.module.ts","../../../../../libs/yuuvis/client-framework/overflow-hidden/src/yuuvis-client-framework-overflow-hidden.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterViewInit, Component, contentChild, ElementRef, inject, OnDestroy, signal, TemplateRef } from '@angular/core';\n\n/**\n * This component is designed to switch the rendered content when it is overflowing due to\n * resizing. If there is enough available space you can render the 'real' component. If there\n * is not enough space to render the whole component anymore (it would overflow) another component\n * can take it's place. If you do not specify that replace-component, the component will just\n * disappear and make room for other more important components.\n */\n@Component({\n  selector: 'yuv-overflow-hidden',\n  imports: [CommonModule],\n  templateUrl: './overflow-hidden.component.html',\n  styleUrl: './overflow-hidden.component.scss',\n  host: {\n    '[class.overflowing]': 'overflow()'\n  }\n})\nexport class OverflowHiddenComponent implements AfterViewInit, OnDestroy {\n  #elRef = inject(ElementRef);\n\n  // component/content to be rendered when there is enough space\n  defaultSlot = contentChild.required<TemplateRef<any>>('yuvDefaultSlot');\n  // component/content to be rendered when the default component overflows\n  overflowSlot = contentChild<TemplateRef<any>>('yuvOverflowSlot');\n\n  #contentObserver?: IntersectionObserver;\n  overflow = signal<boolean>(false);\n\n  #initObserver() {\n    this.#contentObserver = new IntersectionObserver(\n      (entries) => {\n        const overflowContainer = entries[0];\n        this.overflow.set(overflowContainer.intersectionRatio < 1);\n      },\n      {\n        threshold: [1],\n        root: this.#elRef.nativeElement\n      }\n    );\n  }\n\n  ngAfterViewInit(): void {\n    this.#initObserver();\n    this.#contentObserver?.observe(this.#elRef.nativeElement.querySelector('.default'));\n  }\n\n  ngOnDestroy(): void {\n    if (this.#contentObserver) this.#contentObserver.disconnect();\n  }\n}\n","<div class=\"default\">\n  <ng-container *ngTemplateOutlet=\"defaultSlot()\"></ng-container>\n</div>\n@let os = overflowSlot();\n@if (os) {\n  <div class=\"overflow\">\n    <ng-container *ngTemplateOutlet=\"os\"></ng-container>\n  </div>\n}\n","import { NgModule } from '@angular/core';\n\nimport { OverflowHiddenComponent } from './overflow-hidden.component';\n\nconst cmp = [OverflowHiddenComponent];\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YuvOverflowHiddenModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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, computed, signal, untracked, NgModule } from '@angular/core';
+import { Injectable, Input, Component, inject, input, effect, output, viewChild, TemplateRef, signal, computed, untracked, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import * as i4$2 from '@angular/material/icon';
@@ -540,6 +540,7 @@ class YuvWidgetGridComponent {
                 };
             }
         });
+        this._editMode = signal(false);
         /**
          * Whether or not to enable edit mode. In edit mode controls
          * for editing existing tiles and creating new ones are shown.
@@ -548,6 +549,7 @@ class YuvWidgetGridComponent {
         this.editMode = input(false);
         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;
@@ -635,7 +637,7 @@ class YuvWidgetGridComponent {
         this.gridChange.emit(mapped);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvWidgetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: YuvWidgetGridComponent, isStandalone: true, selector: "yuv-widget-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, gridItemConfig: { classPropertyName: "gridItemConfig", publicName: "gridItemConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridChange: "gridChange", gridItemEvent: "gridItemEvent", widgetPickerOpen: "widgetPickerOpen" }, host: { properties: { "class.widget-grid-edit": "editMode()" } }, providers: [WidgetGridService], viewQueries: [{ propertyName: "gridsterItems", first: true, predicate: GridsterItemComponent, descendants: true, isSignal: true }, { propertyName: "widgetPicker", first: true, predicate: ["widgetPicker"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (editMode()) {\n  <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\">\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)\">{{'yuv.widget-grid.empty.create' | translate}}</button> -->\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 mat-icon-button (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n            <!-- remove -->\n            <button mat-icon-button (click)=\"removeItem(item)\"><mat-icon class=\"ymt-icon--size-s\">clear</mat-icon></button>\n          </div>\n        }\n        <div class=\"cmp\">\n          <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\"></ng-container>\n        </div>\n      </gridster-item>\n    }\n  </gridster>\n}\n<ng-template #widgetPicker>\n  <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\"></yuv-widget-picker>\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i4.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: YuvWidgetGridComponent, isStandalone: true, selector: "yuv-widget-grid", inputs: { gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, gridItemConfig: { classPropertyName: "gridItemConfig", publicName: "gridItemConfig", isSignal: true, isRequired: false, transformFunction: null }, buckets: { classPropertyName: "buckets", publicName: "buckets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridChange: "gridChange", gridItemEvent: "gridItemEvent", widgetPickerOpen: "widgetPickerOpen" }, host: { properties: { "class.widget-grid-edit": "editMode()" } }, providers: [WidgetGridService], viewQueries: [{ propertyName: "gridsterItems", first: true, predicate: GridsterItemComponent, descendants: true, isSignal: true }, { propertyName: "widgetPicker", first: true, predicate: ["widgetPicker"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (_editMode()) {\n  <button class=\"fab\" mat-fab [attr.aria-label]=\"'yuv.widget-grid.widget.add.label' | translate\" (click)=\"addItem()\">\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  </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 mat-icon-button (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n            <!-- remove -->\n            <button mat-icon-button (click)=\"removeItem(item)\"><mat-icon class=\"ymt-icon--size-s\">clear</mat-icon></button>\n          </div>\n        }\n        <div class=\"cmp\">\n          <ng-container *ngComponentOutlet=\"item.widget; ndcDynamicInputs: item.widgetConfigMap\"></ng-container>\n        </div>\n      </gridster-item>\n    }\n  </gridster>\n}\n<ng-template #widgetPicker>\n  <yuv-widget-picker [pickerData]=\"widgetPickerData\" [buckets]=\"buckets()\"></yuv-widget-picker>\n</ng-template>\n", styles: [":host{--_widget-grid-toolbar-background: var(--widget-grid-toolbar-background, var(--ymt-surface));--_widget-grid-on-toolbar: var(--widget-grid-on-toolbar, var(--ymt-on-surface));position:relative}:host .fab{position:absolute;inset-inline-end:var(--ymt-spacing-m);inset-block-end:var(--ymt-spacing-m);z-index:100}:host .cmp{height:100%}:host.widget-grid-edit gridster-item{outline:1px solid var(--ymt-outline);outline-offset:-1px}:host .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ymt-on-surface);font:var(--ymt-font-body-medium)}:host .empty p{padding:var(--ymt-spacing-m);max-width:45ch;text-align:center}:host gridster{background-color:transparent}:host gridster ::ng-deep .gridster-column,:host gridster ::ng-deep .gridster-row{border-color:var(--ymt-outline-variant);transition:none}:host gridster-item{transition:none;background-color:transparent}:host gridster-item .toolbar{position:absolute;z-index:1;background-color:var(--_widget-grid-toolbar-background);color:var(--_widget-grid-on-toolbar);right:0;top:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);gap:var(--ymt-spacing-s);display:flex;flex-flow:row nowrap;align-items:center;outline:1px solid var(--ymt-outline);outline-offset:-1px}:host gridster-item .toolbar button{color:currentColor}:host gridster-item .dragHandle{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:0 var(--ymt-spacing-s);cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DynamicIoModule }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "directive", type: i4.ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SignalComponentIoModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: WidgetPickerComponent, selector: "yuv-widget-picker", inputs: ["pickerData", "buckets"], outputs: ["picked", "canceled"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvWidgetGridComponent, decorators: [{
             type: Component,
@@ -648,8 +650,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                         MatIconModule,
                         MatButtonModule,
                         WidgetPickerComponent,
-                        GridsterItemComponent
-                    ], 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()\">\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)\">{{'yuv.widget-grid.empty.create' | translate}}</button> -->\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 mat-icon-button (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n            <!-- remove -->\n            <button mat-icon-button (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"] }]
+                        GridsterItemComponent,
+                        YmtButtonDirective
+                    ], 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()\">\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  </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 mat-icon-button (click)=\"openWidgetPicker(item)\"><mat-icon class=\"ymt-icon--size-s\">edit</mat-icon></button>\n            <!-- remove -->\n            <button mat-icon-button (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: () => [] });
 
 class WorkspaceEditComponent {