@yuuvis/client-framework 2.1.0 → 2.1.1

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

@@ -1,26 +1,189 @@
-import * as i1$1 from '@angular/common';
-import { CommonModule, JsonPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, input, effect, Component, inject, EventEmitter, Input, Output, viewChildren, output, Pipe, computed } from '@angular/core';
-import * as i2$1 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
+import { inject, input, computed, Component, effect, signal, output, viewChildren, Input, viewChild, untracked, NgModule, Pipe } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1 from '@yuuvis/client-core';
-import { YuvEventType, LocaleDatePipe, TranslateModule, RetentionField, TranslateService, ObjectConfigService, EventService, DmsService, SystemService, UserService, PendingChangesService, NotificationService, Situation, ConfigService, RetentionService } from '@yuuvis/client-core';
-import { YuvMediaViewerComponent } from '@yuuvis/media-viewer';
+import { RetentionService, TranslateModule, LocaleDatePipe, ObjectConfigService, TranslateService, EventService, DmsService, YuvEventType, PendingChangesService, NotificationService, SystemService, Situation, ConfigService, UserService } from '@yuuvis/client-core';
+import { RendererDirective } from '@yuuvis/client-framework/renderer';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ReactiveFormsModule } from '@angular/forms';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { BusyOverlayDirective } from '@yuuvis/client-framework/common';
+import * as i2$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { ObjectPreviewComponent } from '@yuuvis/client-framework/object-preview';
+import { ReactiveFormsModule } from '@angular/forms';
 import { YUV_ICONS } from '@yuuvis/client-framework/icons';
 import { finalize } from 'rxjs';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 import { YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
-import * as i2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { PanelComponent } from '@yuuvis/client-framework/panel';
 import { MatButtonModule } from '@angular/material/button';
 import { ObjectFormComponent } from '@yuuvis/client-framework/object-form';
 
+class RetentionBadgeComponent {
+    constructor() {
+        this.#retention = inject(RetentionService);
+        this.dmsObject = input.required();
+        this.retentionData = computed(() => {
+            return this.#retention.getRetentionState(this.dmsObject());
+        });
+    }
+    #retention;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: RetentionBadgeComponent, isStandalone: true, selector: "yuv-retention-badge", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let rd = retentionData();\n@if (rd.underRetention) {\n  <div class=\"badge\">\n    <span class=\"badge__icon\">\n      <mat-icon class=\"ymt-icon--size-s\">lock_clock</mat-icon>\n    </span>\n    <span class=\"badge__label\">\n      <span class=\"badge__label-truncated\">\n        {{\n          'yuv.retention-badge.retain'\n            | translate\n              : {\n                  from: rd.start | localeDate: 'shortDate',\n                  until: rd.end | localeDate: 'shortDate'\n                }\n        }}\n      </span>\n    </span>\n  </div>\n}\n", styles: [":host{display:contents}:host .badge{font:var(--ymt-font-body-subtle);color:var(--badge-retention-color, var(--ymt-on-surface));display:inline-flex;overflow:hidden;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);background-color:var(--badge-retention-background, var(--ymt-primary-container));border-radius:var(--ymt-corner-full);gap:var(--ymt-spacing-s)}:host .badge__icon{flex-shrink:0;color:var(--badge-retention-icon-color, var(--ymt-on-primary-container));display:flex;align-items:center;justify-content:center}:host .badge__label{color:var(--badge-retention-color, var(--ymt-on-surface));align-self:stretch;display:flex;align-items:center;justify-content:center;border-top-right-radius:var(--ymt-corner-full);border-bottom-right-radius:var(--ymt-corner-full);overflow:hidden}:host .badge__label-truncated{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: RetentionBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-retention-badge', standalone: true, imports: [CommonModule, TranslateModule, LocaleDatePipe, MatIconModule], template: "@let rd = retentionData();\n@if (rd.underRetention) {\n  <div class=\"badge\">\n    <span class=\"badge__icon\">\n      <mat-icon class=\"ymt-icon--size-s\">lock_clock</mat-icon>\n    </span>\n    <span class=\"badge__label\">\n      <span class=\"badge__label-truncated\">\n        {{\n          'yuv.retention-badge.retain'\n            | translate\n              : {\n                  from: rd.start | localeDate: 'shortDate',\n                  until: rd.end | localeDate: 'shortDate'\n                }\n        }}\n      </span>\n    </span>\n  </div>\n}\n", styles: [":host{display:contents}:host .badge{font:var(--ymt-font-body-subtle);color:var(--badge-retention-color, var(--ymt-on-surface));display:inline-flex;overflow:hidden;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);background-color:var(--badge-retention-background, var(--ymt-primary-container));border-radius:var(--ymt-corner-full);gap:var(--ymt-spacing-s)}:host .badge__icon{flex-shrink:0;color:var(--badge-retention-icon-color, var(--ymt-on-primary-container));display:flex;align-items:center;justify-content:center}:host .badge__label{color:var(--badge-retention-color, var(--ymt-on-surface));align-self:stretch;display:flex;align-items:center;justify-content:center;border-top-right-radius:var(--ymt-corner-full);border-bottom-right-radius:var(--ymt-corner-full);overflow:hidden}:host .badge__label-truncated{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"] }]
+        }] });
+
+/**
+ * Component showing header data for a dms object. These will be
+ * generated from the object config for the given object.
+ */
+class ObjectDetailsHeaderComponent {
+    constructor() {
+        this.#objectConfig = inject(ObjectConfigService);
+        this.dmsObject = input(undefined);
+        this.#dmsObjectEffect = effect(() => {
+            const o = this.dmsObject();
+            const t = this.type();
+            if (o && t)
+                this.#setHeaderData();
+            else
+                this.headerData = undefined;
+        });
+        /**
+         * Virtual object type to use for retrieving header data
+         */
+        this.type = input.required();
+        /**
+         * Bucket of the object config to retrieve header data from
+         */
+        this.bucket = input(undefined);
+    }
+    #objectConfig;
+    #dmsObjectEffect;
+    #setHeaderData() {
+        const o = this.dmsObject();
+        if (!o) {
+            this.headerData = undefined;
+        }
+        else {
+            const roc = this.#objectConfig.getResolvedObjectConfig(o.data, this.type(), this.bucket());
+            this.headerData = {
+                title: roc.title,
+                description: roc.description,
+                icon: roc.icon?.value
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectDetailsHeaderComponent, isStandalone: true, selector: "yuv-object-details-header", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dmsObj = dmsObject();\n@if (dmsObj && headerData) {\n  <div class=\"icon\">\n    <mat-icon>{{ headerData.icon }}</mat-icon>\n  </div>\n  <h2><ng-container *yuvRenderer=\"headerData.title\"></ng-container></h2>\n  <div class=\"description\"><ng-container *yuvRenderer=\"headerData.description\"></ng-container></div>\n  <div class=\"badges\">\n    <yuv-retention-badge [dmsObject]=\"dmsObj\"></yuv-retention-badge>\n  </div>\n}\n", styles: [":host{display:grid;padding:var(--ymt-spacing-m);grid-template-rows:auto auto;grid-template-columns:auto 1fr;grid-template-areas:\"icon title\" \"icon description\" \". badges\";row-gap:var(--ymt-spacing-xs);column-gap:var(--ymt-spacing-m)}:host .icon{grid-area:icon}:host h2{grid-area:title;margin:0}:host .description{grid-area:description}:host .badges{grid-area:badges}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "component", type: RetentionBadgeComponent, selector: "yuv-retention-badge", inputs: ["dmsObject"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-details-header', imports: [CommonModule, MatIconModule, RendererDirective, RetentionBadgeComponent], template: "@let dmsObj = dmsObject();\n@if (dmsObj && headerData) {\n  <div class=\"icon\">\n    <mat-icon>{{ headerData.icon }}</mat-icon>\n  </div>\n  <h2><ng-container *yuvRenderer=\"headerData.title\"></ng-container></h2>\n  <div class=\"description\"><ng-container *yuvRenderer=\"headerData.description\"></ng-container></div>\n  <div class=\"badges\">\n    <yuv-retention-badge [dmsObject]=\"dmsObj\"></yuv-retention-badge>\n  </div>\n}\n", styles: [":host{display:grid;padding:var(--ymt-spacing-m);grid-template-rows:auto auto;grid-template-columns:auto 1fr;grid-template-areas:\"icon title\" \"icon description\" \". badges\";row-gap:var(--ymt-spacing-xs);column-gap:var(--ymt-spacing-m)}:host .icon{grid-area:icon}:host h2{grid-area:title;margin:0}:host .description{grid-area:description}:host .badges{grid-area:badges}\n"] }]
+        }] });
+
+/**
+ * Wrapper component for details of a dms object. This component
+ * provides a header based on the object configuration for the given object.
+ * It will also take care of loading the object if you only provide the objects ID.
+ */
+class ObjectDetailsShellComponent {
+    #eventService;
+    #dmsService;
+    #dmsObjectEffect;
+    #objectIdEffect;
+    constructor() {
+        // this.#objectConfig
+        //   .getObjectConfigs$()
+        //   // this.objectConfigService.getObjectConfigs$(this.bucket || '')
+        //   .pipe(takeUntilDestroyed())
+        //   .subscribe((res: ObjectConfigRecord) => {
+        //     this.oc = res;
+        //     if (this._dmsObject) this._getHeaderData();
+        //   });
+        this.translate = inject(TranslateService);
+        this.#eventService = inject(EventService);
+        this.#dmsService = inject(DmsService);
+        this.retentionState = signal(undefined);
+        this.busy = signal(false);
+        /**
+         * DmsObject to show the details for.
+         */
+        this.dmsObject = input(undefined);
+        this._dmsObject = signal(undefined);
+        this.#dmsObjectEffect = effect(() => {
+            this._dmsObject.set(this.dmsObject());
+        });
+        /**
+         * Virtual object type to use for retrieving header data
+         */
+        this.type = input.required();
+        /**
+         * Bucket of the object config to retrieve header data from
+         */
+        this.bucket = input(undefined);
+        /**
+         * ID to store the components layout state (splitted tabs, gutter position)
+         */
+        this.layoutSettingsID = input(undefined);
+        /**
+         * ID of a DmsObject. The object will be fetched from the backend upfront.
+         */
+        this.objectId = input(undefined);
+        this.#objectIdEffect = effect(() => {
+            const oid = this.objectId();
+            if (oid)
+                this.#getDmsObject(oid);
+            else
+                this._dmsObject.set(undefined);
+        });
+        this.dmsObjectChange = output();
+        this.#eventService
+            .on(YuvEventType.DMS_OBJECT_UPDATED)
+            .pipe(takeUntilDestroyed())
+            .subscribe((e) => {
+            const o = e.data;
+            const dmsObj = this._dmsObject();
+            if (dmsObj && dmsObj.id === o.id)
+                this._dmsObject.set(o);
+        });
+        this.#eventService
+            .on(YuvEventType.DMS_OBJECT_DELETED)
+            .pipe(takeUntilDestroyed())
+            .subscribe((e) => {
+            if (e.data?.id === this._dmsObject()?.id) {
+                this._dmsObject.set(undefined);
+            }
+        });
+    }
+    #getDmsObject(id) {
+        this.busy.set(true);
+        this.#dmsService.getDmsObject(id).subscribe({
+            next: (dmsObject) => this._dmsObject.set(dmsObject),
+            error: () => {
+                this._dmsObject.set(undefined);
+                this.contextError = this.translate.instant('yuv.object-metadata.context.load.error');
+            },
+            complete: () => {
+                this.busy.set(false);
+                const o = this._dmsObject();
+                if (o)
+                    this.dmsObjectChange.emit(o);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectDetailsShellComponent, isStandalone: true, selector: "yuv-object-details-shell", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, layoutSettingsID: { classPropertyName: "layoutSettingsID", publicName: "layoutSettingsID", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dmsObjectChange: "dmsObjectChange" }, ngImport: i0, template: "@let dmsObj = _dmsObject();\n@if (dmsObj) {\n  <yuv-object-details-header [dmsObject]=\"dmsObj\" [type]=\"type()\" [bucket]=\"bucket()\"></yuv-object-details-header>\n  <div class=\"content\" [yuvBusyOverlay]=\"busy()\">\n    <ng-content></ng-content>\n  </div>\n} @else {\n  <div class=\"empty\">\n    @if (contextError) {\n      <div class=\"error\">{{ contextError }}</div>\n    } @else {\n      <!-- EMPTY -->\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;background-color:var(--ymt-surface)}:host .content{flex:1}:host .empty{height:100%;display:grid;align-items:center;justify-content:center}:host .empty .error{max-width:40ch;margin:var(--ymt-spacing-m);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-s);border-radius:.5em;line-height:1.5em;border:1px solid var(--ymt-outline-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ObjectDetailsHeaderComponent, selector: "yuv-object-details-header", inputs: ["dmsObject", "type", "bucket"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-details-shell', standalone: true, imports: [CommonModule, ObjectDetailsHeaderComponent, MatTooltipModule, BusyOverlayDirective], template: "@let dmsObj = _dmsObject();\n@if (dmsObj) {\n  <yuv-object-details-header [dmsObject]=\"dmsObj\" [type]=\"type()\" [bucket]=\"bucket()\"></yuv-object-details-header>\n  <div class=\"content\" [yuvBusyOverlay]=\"busy()\">\n    <ng-content></ng-content>\n  </div>\n} @else {\n  <div class=\"empty\">\n    @if (contextError) {\n      <div class=\"error\">{{ contextError }}</div>\n    } @else {\n      <!-- EMPTY -->\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;background-color:var(--ymt-surface)}:host .content{flex:1}:host .empty{height:100%;display:grid;align-items:center;justify-content:center}:host .empty .error{max-width:40ch;margin:var(--ymt-spacing-m);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-s);border-radius:.5em;line-height:1.5em;border:1px solid var(--ymt-outline-variant)}\n"] }]
+        }], ctorParameters: () => [] });
+
 class ObjectAuditComponent {
     #dmsObjectEffect;
     get objectID() {
@@ -180,134 +343,13 @@ class ObjectAuditComponent {
         this.error = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectAuditComponent, deps: [{ token: i1.AuditService }, { token: i1.EventService }, { token: i1.SystemService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectAuditComponent, isStandalone: true, selector: "yuv-object-audit", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, skipActions: { classPropertyName: "skipActions", publicName: "skipActions", isSignal: true, isRequired: false, transformFunction: null }, allActions: { classPropertyName: "allActions", publicName: "allActions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"yuv-audit\" [ngClass]=\"{ singleEntry: auditsRes?.items?.length === 1, onPage: auditsRes && auditsRes.page > 1 }\" [yuvBusyOverlay]=\"busy\">\n  @if (error) {\n    <div class=\"error\">\n      <div translate>yuv.audit.fetch.error</div>\n    </div>\n  }\n\n  @if (auditsRes) {\n    <!-- list of audits -->\n    @let resItems = resolvedItems();\n    @if (resItems.length) {\n      <div class=\"timeline\">\n        @for (item of resItems; track $index) {\n          <div class=\"audit\">\n            <div class=\"date\">{{ item.creationDate | localeDate }}</div>\n            <div class=\"node\">\n              <div class=\"label\">\n                <span class=\"title\">{{ item.label }}</span>               \n              </div>\n              <div class=\"more meta\">{{ item.more }}</div>\n              <div class=\"creator meta\">{{ item.createdBy.title }}</div>\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"empty\" translate>yuv.audit.result.empty</div>\n    }\n\n    <!-- controls -->\n    @if (auditsRes.hasMoreItems || auditsRes.page > 1) {\n      <div class=\"footer\" yuvOfflineDisabled>\n        <div class=\"paging\">\n          <button ymtIconButton [attr.aria-label]=\"'yuv.audit.label.paging.prev' | translate\" [disabled]=\"auditsRes.page === 1\" (click)=\"goToPage(auditsRes.page - 1)\">\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <div class=\"page\">\n            {{ auditsRes.page }}\n          </div>\n          <button ymtIconButton [attr.aria-label]=\"'yuv.audit.label.paging.next' | translate\" [disabled]=\"!auditsRes.hasMoreItems\" (click)=\"goToPage(auditsRes.page + 1)\">\n            <mat-icon>chevron_right</mat-icon>\n          </button>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{--_object-audit-panel-background: var(--object-audit-panel-background, var(--ymt-surface))}:host .yuv-audit{position:relative;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:\"items\" \"footer\";background-color:var(--_object-audit-panel-background);container-type:inline-size;container-name:cmp}:host .yuv-audit .error{grid-area:items;display:flex;flex-flow:column;align-items:center;justify-content:center}:host .yuv-audit .error>div{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);margin:var(--ymt-spacing-m);padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host .yuv-audit .audits{grid-area:items}:host .yuv-audit .empty{grid-area:items;display:flex;flex-flow:column;align-items:center;justify-content:center;color:var(--ymt-text-color-subtle)}:host .yuv-audit .footer{grid-area:footer;background-color:var(--ymt-surface);border-top:1px solid var(--ymt-outline-variant);display:flex}:host .yuv-audit .footer .paging{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:var(--ymt-spacing-xs)}:host .yuv-audit .footer .paging .page{padding:0 var(--ymt-spacing-xs)}:host .timeline{--track-color: var(--ymt-outline-variant);--track-size: var(--ymt-spacing-4xl);overflow-y:auto;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-2xs) var(--ymt-spacing-3xl) var(--ymt-spacing-l)}@container (max-width: 450px){:host .timeline .audit{grid-template-columns:var(--track-size) auto;grid-template-rows:var(--track-size) auto;grid-template-areas:\"line date\" \"node node\"}:host .timeline .audit .date{justify-self:start}:host .timeline .audit .date,:host .timeline .audit:after{translate:0 .5em}:host .timeline .audit .node{margin:0;width:100%}:host .timeline .audit:last-child:before{height:100%}}:host .timeline :where(.audit){display:grid;grid-template-columns:1fr var(--track-size) 1fr;grid-template-areas:\"date line node\"}:host .timeline :where(.audit) .date{grid-area:date;justify-self:end;align-self:center}:host .timeline :where(.audit) .node{grid-area:node;justify-self:start;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25em;margin:var(--ymt-spacing-xs) 0;padding:var(--ymt-spacing-m);box-sizing:border-box;display:grid;gap:var(--ymt-spacing-3xs)}:host .timeline :where(.audit) .node .label{display:flex;align-items:end}:host .timeline :where(.audit) .node .label .title{flex:1;word-break:break-word;font-weight:700;color:var(--ymt-text-color)}:host .timeline :where(.audit) .node .label .version{line-height:1em;border-radius:2px;background-color:rgb(from var(--ymt-primary) r g b/.15);color:var(--ymt-primary);font:var(--ymt-font-body-subtle);font-family:monospace;align-self:center;margin-left:var(--ymt-spacing-m);padding:4px 6px;display:block}:host .timeline :where(.audit) .node .meta{color:var(--ymt-text-color-subtle)}:host .timeline :where(.audit):before{grid-area:line;content:\"\";width:calc(50% - 1px);height:100%;border-inline-end:1px solid var(--track-color)}:host .timeline :where(.audit):after{grid-area:line;content:\"\";width:11px;height:11px;border-radius:50%;border:2px solid var(--track-color);background-color:var(--ymt-surface-panel);box-sizing:border-box;align-self:center;justify-self:center}:host .timeline :where(.audit):first-child:before{height:50%;align-self:end}:host .timeline :where(.audit):last-child:before{height:50%;align-self:start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectAuditComponent, isStandalone: true, selector: "yuv-object-audit", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, skipActions: { classPropertyName: "skipActions", publicName: "skipActions", isSignal: true, isRequired: false, transformFunction: null }, allActions: { classPropertyName: "allActions", publicName: "allActions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"yuv-audit\" [ngClass]=\"{ singleEntry: auditsRes?.items?.length === 1, onPage: auditsRes && auditsRes.page > 1 }\" [yuvBusyOverlay]=\"busy\">\n  @if (error) {\n    <div class=\"error\">\n      <div translate>yuv.audit.fetch.error</div>\n    </div>\n  }\n\n  @if (auditsRes) {\n    <!-- list of audits -->\n    @let resItems = resolvedItems();\n    @if (resItems.length) {\n      <div class=\"timeline\">\n        @for (item of resItems; track $index) {\n          <div class=\"audit\">\n            <div class=\"date\">{{ item.creationDate | localeDate }}</div>\n            <div class=\"node\">\n              <div class=\"label\">\n                <span class=\"title\">{{ item.label }}</span>               \n              </div>\n              <div class=\"more meta\">{{ item.more }}</div>\n              <div class=\"creator meta\">{{ item.createdBy.title }}</div>\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"empty\" translate>yuv.audit.result.empty</div>\n    }\n\n    <!-- controls -->\n    @if (auditsRes.hasMoreItems || auditsRes.page > 1) {\n      <div class=\"footer\" yuvOfflineDisabled>\n        <div class=\"paging\">\n          <button ymtIconButton [attr.aria-label]=\"'yuv.audit.label.paging.prev' | translate\" [disabled]=\"auditsRes.page === 1\" (click)=\"goToPage(auditsRes.page - 1)\">\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <div class=\"page\">\n            {{ auditsRes.page }}\n          </div>\n          <button ymtIconButton [attr.aria-label]=\"'yuv.audit.label.paging.next' | translate\" [disabled]=\"!auditsRes.hasMoreItems\" (click)=\"goToPage(auditsRes.page + 1)\">\n            <mat-icon>chevron_right</mat-icon>\n          </button>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{--_object-audit-panel-background: var(--object-audit-panel-background, var(--ymt-surface))}:host .yuv-audit{position:relative;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:\"items\" \"footer\";background-color:var(--_object-audit-panel-background);container-type:inline-size;container-name:cmp}:host .yuv-audit .error{grid-area:items;display:flex;flex-flow:column;align-items:center;justify-content:center}:host .yuv-audit .error>div{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);margin:var(--ymt-spacing-m);padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host .yuv-audit .audits{grid-area:items}:host .yuv-audit .empty{grid-area:items;display:flex;flex-flow:column;align-items:center;justify-content:center;color:var(--ymt-text-color-subtle)}:host .yuv-audit .footer{grid-area:footer;background-color:var(--ymt-surface);border-top:1px solid var(--ymt-outline-variant);display:flex}:host .yuv-audit .footer .paging{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:var(--ymt-spacing-xs)}:host .yuv-audit .footer .paging .page{padding:0 var(--ymt-spacing-xs)}:host .timeline{--track-color: var(--ymt-outline-variant);--track-size: var(--ymt-spacing-4xl);overflow-y:auto;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-2xs) var(--ymt-spacing-3xl) var(--ymt-spacing-l)}@container (max-width: 450px){:host .timeline .audit{grid-template-columns:var(--track-size) auto;grid-template-rows:var(--track-size) auto;grid-template-areas:\"line date\" \"node node\"}:host .timeline .audit .date{justify-self:start}:host .timeline .audit .date,:host .timeline .audit:after{translate:0 .5em}:host .timeline .audit .node{margin:0;width:100%}:host .timeline .audit:last-child:before{height:100%}}:host .timeline :where(.audit){display:grid;grid-template-columns:1fr var(--track-size) 1fr;grid-template-areas:\"date line node\"}:host .timeline :where(.audit) .date{grid-area:date;justify-self:end;align-self:center}:host .timeline :where(.audit) .node{grid-area:node;justify-self:start;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25em;margin:var(--ymt-spacing-xs) 0;padding:var(--ymt-spacing-m);box-sizing:border-box;display:grid;gap:var(--ymt-spacing-3xs)}:host .timeline :where(.audit) .node .label{display:flex;align-items:end}:host .timeline :where(.audit) .node .label .title{flex:1;word-break:break-word;font-weight:700;color:var(--ymt-text-color)}:host .timeline :where(.audit) .node .label .version{line-height:1em;border-radius:2px;background-color:rgb(from var(--ymt-primary) r g b/.15);color:var(--ymt-primary);font:var(--ymt-font-body-subtle);font-family:monospace;align-self:center;margin-left:var(--ymt-spacing-m);padding:4px 6px;display:block}:host .timeline :where(.audit) .node .meta{color:var(--ymt-text-color-subtle)}:host .timeline :where(.audit):before{grid-area:line;content:\"\";width:calc(50% - 1px);height:100%;border-inline-end:1px solid var(--track-color)}:host .timeline :where(.audit):after{grid-area:line;content:\"\";width:11px;height:11px;border-radius:50%;border:2px solid var(--track-color);background-color:var(--ymt-surface-panel);box-sizing:border-box;align-self:center;justify-self:center}:host .timeline :where(.audit):first-child:before{height:50%;align-self:end}:host .timeline :where(.audit):last-child:before{height:50%;align-self:start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectAuditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-object-audit', standalone: true, imports: [CommonModule, ReactiveFormsModule, BusyOverlayDirective, LocaleDatePipe, TranslateModule, MatIconModule, YmtIconButtonDirective], template: "<div class=\"yuv-audit\" [ngClass]=\"{ singleEntry: auditsRes?.items?.length === 1, onPage: auditsRes && auditsRes.page > 1 }\" [yuvBusyOverlay]=\"busy\">\n  @if (error) {\n    <div class=\"error\">\n      <div translate>yuv.audit.fetch.error</div>\n    </div>\n  }\n\n  @if (auditsRes) {\n    <!-- list of audits -->\n    @let resItems = resolvedItems();\n    @if (resItems.length) {\n      <div class=\"timeline\">\n        @for (item of resItems; track $index) {\n          <div class=\"audit\">\n            <div class=\"date\">{{ item.creationDate | localeDate }}</div>\n            <div class=\"node\">\n              <div class=\"label\">\n                <span class=\"title\">{{ item.label }}</span>               \n              </div>\n              <div class=\"more meta\">{{ item.more }}</div>\n              <div class=\"creator meta\">{{ item.createdBy.title }}</div>\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"empty\" translate>yuv.audit.result.empty</div>\n    }\n\n    <!-- controls -->\n    @if (auditsRes.hasMoreItems || auditsRes.page > 1) {\n      <div class=\"footer\" yuvOfflineDisabled>\n        <div class=\"paging\">\n          <button ymtIconButton [attr.aria-label]=\"'yuv.audit.label.paging.prev' | translate\" [disabled]=\"auditsRes.page === 1\" (click)=\"goToPage(auditsRes.page - 1)\">\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <div class=\"page\">\n            {{ auditsRes.page }}\n          </div>\n          <button ymtIconButton [attr.aria-label]=\"'yuv.audit.label.paging.next' | translate\" [disabled]=\"!auditsRes.hasMoreItems\" (click)=\"goToPage(auditsRes.page + 1)\">\n            <mat-icon>chevron_right</mat-icon>\n          </button>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{--_object-audit-panel-background: var(--object-audit-panel-background, var(--ymt-surface))}:host .yuv-audit{position:relative;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:\"items\" \"footer\";background-color:var(--_object-audit-panel-background);container-type:inline-size;container-name:cmp}:host .yuv-audit .error{grid-area:items;display:flex;flex-flow:column;align-items:center;justify-content:center}:host .yuv-audit .error>div{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);margin:var(--ymt-spacing-m);padding:var(--ymt-spacing-m);border-radius:var(--ymt-spacing-xs)}:host .yuv-audit .audits{grid-area:items}:host .yuv-audit .empty{grid-area:items;display:flex;flex-flow:column;align-items:center;justify-content:center;color:var(--ymt-text-color-subtle)}:host .yuv-audit .footer{grid-area:footer;background-color:var(--ymt-surface);border-top:1px solid var(--ymt-outline-variant);display:flex}:host .yuv-audit .footer .paging{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:var(--ymt-spacing-xs)}:host .yuv-audit .footer .paging .page{padding:0 var(--ymt-spacing-xs)}:host .timeline{--track-color: var(--ymt-outline-variant);--track-size: var(--ymt-spacing-4xl);overflow-y:auto;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-2xs) var(--ymt-spacing-3xl) var(--ymt-spacing-l)}@container (max-width: 450px){:host .timeline .audit{grid-template-columns:var(--track-size) auto;grid-template-rows:var(--track-size) auto;grid-template-areas:\"line date\" \"node node\"}:host .timeline .audit .date{justify-self:start}:host .timeline .audit .date,:host .timeline .audit:after{translate:0 .5em}:host .timeline .audit .node{margin:0;width:100%}:host .timeline .audit:last-child:before{height:100%}}:host .timeline :where(.audit){display:grid;grid-template-columns:1fr var(--track-size) 1fr;grid-template-areas:\"date line node\"}:host .timeline :where(.audit) .date{grid-area:date;justify-self:end;align-self:center}:host .timeline :where(.audit) .node{grid-area:node;justify-self:start;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);border-radius:.25em;margin:var(--ymt-spacing-xs) 0;padding:var(--ymt-spacing-m);box-sizing:border-box;display:grid;gap:var(--ymt-spacing-3xs)}:host .timeline :where(.audit) .node .label{display:flex;align-items:end}:host .timeline :where(.audit) .node .label .title{flex:1;word-break:break-word;font-weight:700;color:var(--ymt-text-color)}:host .timeline :where(.audit) .node .label .version{line-height:1em;border-radius:2px;background-color:rgb(from var(--ymt-primary) r g b/.15);color:var(--ymt-primary);font:var(--ymt-font-body-subtle);font-family:monospace;align-self:center;margin-left:var(--ymt-spacing-m);padding:4px 6px;display:block}:host .timeline :where(.audit) .node .meta{color:var(--ymt-text-color-subtle)}:host .timeline :where(.audit):before{grid-area:line;content:\"\";width:calc(50% - 1px);height:100%;border-inline-end:1px solid var(--track-color)}:host .timeline :where(.audit):after{grid-area:line;content:\"\";width:11px;height:11px;border-radius:50%;border:2px solid var(--track-color);background-color:var(--ymt-surface-panel);box-sizing:border-box;align-self:center;justify-self:center}:host .timeline :where(.audit):first-child:before{height:50%;align-self:end}:host .timeline :where(.audit):last-child:before{height:50%;align-self:start}\n"] }]
         }], ctorParameters: () => [{ type: i1.AuditService }, { type: i1.EventService }, { type: i1.SystemService }, { type: i1.TranslateService }] });
 
-class ObjectDetailsShellComponent {
-    /**
-     * DmsObject to show the details for.
-     */
-    set dmsObject(o) {
-        this._dmsObject = o;
-        // this.objectTypeId = o ? this.systemService.getLeadingObjectTypeID(o.objectTypeId, o.data[BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS] as string) : undefined;
-        if (this._dmsObject) {
-            this._getHeaderData();
-            this.retentionEndDate = this._dmsObject.data[RetentionField.RETENTION_END]
-                ? new Date(this._dmsObject.data[RetentionField.RETENTION_END])
-                : undefined;
-            const today = new Date();
-            this.retentionEnded = this.retentionEndDate && today > this.retentionEndDate;
-        }
-    }
-    get dmsObject() {
-        return this._dmsObject;
-    }
-    /**
-     * ID of a DmsObject. The object will be fetched from the backend upfront.
-     */
-    set objectId(id) {
-        if (id) {
-            this._getDmsObject(id);
-        }
-        else {
-            this.dmsObject = undefined;
-        }
-    }
-    constructor() {
-        this.translate = inject(TranslateService);
-        this.objectConfigService = inject(ObjectConfigService);
-        this.eventService = inject(EventService);
-        this.dmsService = inject(DmsService);
-        this.systemService = inject(SystemService);
-        this.userService = inject(UserService);
-        this._subs = [];
-        this.busy = false;
-        this.isAdvancedUser = this.userService.isAdvancedUser;
-        this.dmsObjectChange = new EventEmitter();
-        this.objectConfigService
-            .getObjectConfigs$()
-            // this.objectConfigService.getObjectConfigs$(this.bucket || '')
-            .pipe(takeUntilDestroyed())
-            .subscribe((res) => {
-            this.oc = res;
-            if (this._dmsObject)
-                this._getHeaderData();
-        });
-        this.eventService
-            .on(YuvEventType.DMS_OBJECT_UPDATED)
-            .pipe(takeUntilDestroyed())
-            .subscribe((e) => {
-            const o = e.data;
-            if (this._dmsObject && this._dmsObject.id === o.id)
-                this.dmsObject = o;
-        });
-    }
-    _getHeaderData() {
-        if (this._dmsObject) {
-            const oc = this.oc[this._dmsObject.objectTypeId];
-            // const ic = oc.icon ? (this._dmsObject.data[oc.icon.propertyName] as string) : this._dmsObject.objectTypeId;
-            const icon = {
-                title: this.systemService.getLocalizedLabel(this._dmsObject.objectTypeId)
-            };
-            if (oc.icon)
-                icon.svg = oc.icon.svg;
-            else
-                icon.src = this.systemService.getObjectTypeIconUri(this._dmsObject.objectTypeId);
-            this.headerData = {
-                icon,
-                title: oc.title ? this.dmsObject?.data[oc.title.propertyName] : undefined,
-                description: oc.description ? this.dmsObject?.data[oc.description.propertyName] : undefined
-            };
-        }
-        else
-            this.headerData = undefined;
-    }
-    _getDmsObject(id) {
-        this.busy = true;
-        this.dmsService.getDmsObject(id).subscribe({
-            next: (dmsObject) => (this.dmsObject = dmsObject),
-            error: () => {
-                this.dmsObject = undefined;
-                this.contextError = this.translate.instant('yuv.object-metadata.context.load.error');
-            },
-            complete: () => {
-                this.busy = false;
-                this.dmsObjectChange.emit(this.dmsObject);
-            }
-        });
-    }
-    ngOnInit() {
-        this._subs.push(this.eventService.on(YuvEventType.DMS_OBJECT_DELETED).subscribe((event) => {
-            if (event.data?.id === this._dmsObject?.id) {
-                this._dmsObject = undefined;
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this._subs.forEach((s) => s.unsubscribe());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: ObjectDetailsShellComponent, isStandalone: true, selector: "yuv-object-details-shell", inputs: { layoutSettingsID: "layoutSettingsID", dmsObject: "dmsObject", objectId: "objectId" }, outputs: { dmsObjectChange: "dmsObjectChange" }, ngImport: i0, template: "<yuv-panel\n  *ngIf=\"dmsObject; else tplEmpty\"\n  [yuvBusyOverlay]=\"busy\"\n  [icon]=\"headerData?.icon\"\n  [matTooltip]=\"headerData?.title\"\n  [description]=\"headerData?.description\"\n>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</yuv-panel>\n\n<ng-template #tplEmpty>\n  <div class=\"empty\">\n    <div class=\"error\" *ngIf=\"contextError; else tplEmptyNoError\">{{ contextError }}</div>\n  </div>\n</ng-template>\n\n<ng-template #tplEmptyNoError> EMPTY </ng-template>\n\n\n", styles: [":host{display:block}:host yuv-panel{height:100%}:host .content{height:100%}:host .empty{height:100%;display:grid;align-items:center;justify-content:center}:host .empty .error{max-width:40ch;margin:var(--ymt-spacing-m);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-s);border-radius:.5em;line-height:1.5em;border:1px solid var(--ymt-outline-variant)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PanelComponent, selector: "yuv-panel", inputs: ["icon", "title", "description"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsShellComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-object-details-shell', standalone: true, imports: [CommonModule, PanelComponent,
-                        MatTooltipModule,
-                        BusyOverlayDirective], template: "<yuv-panel\n  *ngIf=\"dmsObject; else tplEmpty\"\n  [yuvBusyOverlay]=\"busy\"\n  [icon]=\"headerData?.icon\"\n  [matTooltip]=\"headerData?.title\"\n  [description]=\"headerData?.description\"\n>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</yuv-panel>\n\n<ng-template #tplEmpty>\n  <div class=\"empty\">\n    <div class=\"error\" *ngIf=\"contextError; else tplEmptyNoError\">{{ contextError }}</div>\n  </div>\n</ng-template>\n\n<ng-template #tplEmptyNoError> EMPTY </ng-template>\n\n\n", styles: [":host{display:block}:host yuv-panel{height:100%}:host .content{height:100%}:host .empty{height:100%;display:grid;align-items:center;justify-content:center}:host .empty .error{max-width:40ch;margin:var(--ymt-spacing-m);color:var(--ymt-text-color-subtle);padding:var(--ymt-spacing-s);border-radius:.5em;line-height:1.5em;border:1px solid var(--ymt-outline-variant)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { layoutSettingsID: [{
-                type: Input
-            }], dmsObject: [{
-                type: Input
-            }], dmsObjectChange: [{
-                type: Output
-            }], objectId: [{
-                type: Input
-            }] } });
-
 class ObjectMetadataComponent {
     constructor() {
         this.#pendingChanges = inject(PendingChangesService);
@@ -488,7 +530,7 @@ class ObjectMetadataComponent {
         this.#formSubscriptions.forEach((s) => s.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectMetadataComponent, isStandalone: true, selector: "yuv-object-metadata", inputs: { disableControls: { classPropertyName: "disableControls", publicName: "disableControls", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, formDisabled: { classPropertyName: "formDisabled", publicName: "formDisabled", isSignal: false, isRequired: false, transformFunction: null }, dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, flavoredDmsObject: { classPropertyName: "flavoredDmsObject", publicName: "flavoredDmsObject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexDataSaved: "indexDataSaved", statusChanged: "statusChanged" }, host: { properties: { "class.empty": "empty()" } }, viewQueries: [{ propertyName: "objectForms", predicate: ObjectFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<main>\n  @if (empty()) {\n      <p class=\"empty\">{{ 'yuv.object-metadata.empty.message' | translate }}</p>\n  } @else {\n    <yuv-object-form [formOptions]=\"mainFormOptions()\" (statusChanged)=\"onFormStatusChanged('main', $event)\"></yuv-object-form>\n\n    @for (fo of flavorFormOptions(); track $index) {\n      <details [attr.open]=\"$index === 0\">\n        <summary>\n          @if (fo.icon) {\n            @if (fo.svgIcon) {\n              <mat-icon [svgIcon]=\"fo.icon\"></mat-icon>\n            } @else {\n              <mat-icon>{{ fo.icon }}</mat-icon>\n            }\n          }\n          <span>{{ fo.label }}</span\n          ><mat-icon class=\"arr\">keyboard_arrow_down</mat-icon>\n        </summary>\n        <yuv-object-form [formOptions]=\"fo.formOptions\" (statusChanged)=\"onFormStatusChanged(fo.id, $event)\"></yuv-object-form>\n      </details>\n    }\n  }\n</main>\n\n<footer [ngClass]=\"{ visible: !disableControls() && controlsVisible() }\">\n  <div class=\"container\">\n    <button ymtButton=\"secondary\" button-size=\"small\" (click)=\"resetForm()\" [hidden]=\"!combinedFormState?.dirty\" [disabled]=\"!combinedFormState?.dirty\">\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      button-size=\"small\"\n      [ngClass]=\"{ spinning: busy() }\"\n      (click)=\"save()\"\n      [disabled]=\"!combinedFormState?.dirty || combinedFormState?.invalid\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </div>\n</footer>\n", styles: [":host{--_object-metadata-panel-background: var(--object-metadata-footer-background, var(--ymt-surface));--_object-metadata-footer-background: var(--object-metadata-footer-background, var(--ymt-surface-container));--_object-metadata-footer-border-color: var(--object-metadata-footer-border-color, var(--ymt-outline-variant));--_object-metadata-footer-height: 4rem;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;height:100%;overflow:hidden;position:relative;background-color:var(--_object-metadata-panel-background)}:host.empty main{justify-content:center;align-items:center}:host main{grid-row:1/span 3;grid-column:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-l) var(--_object-metadata-footer-height) var(--ymt-spacing-l)}:host footer{grid-row:-1;grid-column:1;padding:var(--ymt-spacing-l);opacity:0}:host footer .container{background:var(--_object-metadata-footer-background);padding:var(--ymt-spacing-s);display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-s);border-radius:var(--ymt-corner-full)}:host footer.visible{animation:controlsAppear .2s ease-in-out forwards}:host main details{background-color:var(--ymt-surface);border:1px solid var(--ymt-outline-variant)}:host main details:not(:last-child){margin-block-end:var(--ymt-spacing-m)}:host main details[open] yuv-icon.arr{transform:rotate(180deg)}:host main details summary{padding:var(--ymt-spacing-xs);cursor:pointer;display:flex;align-items:center;font-weight:700;color:var(--ymt-text-color-subtle);position:relative}:host main details summary span{flex:1}:host main details summary::marker{display:none}:host main details summary mat-icon{margin-inline-end:var(--ymt-spacing-xs)}@keyframes controlsAppear{0%{opacity:0;translate:0 var(--ymt-spacing-m)}to{opacity:1;translate:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ObjectFormComponent, selector: "yuv-object-form", inputs: ["formOptions", "inert", "elementExtensions", "isInnerTableForm"], outputs: ["statusChanged", "onFormReady"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectMetadataComponent, isStandalone: true, selector: "yuv-object-metadata", inputs: { disableControls: { classPropertyName: "disableControls", publicName: "disableControls", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, formDisabled: { classPropertyName: "formDisabled", publicName: "formDisabled", isSignal: false, isRequired: false, transformFunction: null }, dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, flavoredDmsObject: { classPropertyName: "flavoredDmsObject", publicName: "flavoredDmsObject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexDataSaved: "indexDataSaved", statusChanged: "statusChanged" }, host: { properties: { "class.empty": "empty()" } }, viewQueries: [{ propertyName: "objectForms", predicate: ObjectFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<main>\n  @if (empty()) {\n      <p class=\"empty\">{{ 'yuv.object-metadata.empty.message' | translate }}</p>\n  } @else {\n    <yuv-object-form [formOptions]=\"mainFormOptions()\" (statusChanged)=\"onFormStatusChanged('main', $event)\"></yuv-object-form>\n\n    @for (fo of flavorFormOptions(); track $index) {\n      <details [attr.open]=\"$index === 0\">\n        <summary>\n          @if (fo.icon) {\n            @if (fo.svgIcon) {\n              <mat-icon [svgIcon]=\"fo.icon\"></mat-icon>\n            } @else {\n              <mat-icon>{{ fo.icon }}</mat-icon>\n            }\n          }\n          <span>{{ fo.label }}</span\n          ><mat-icon class=\"arr\">keyboard_arrow_down</mat-icon>\n        </summary>\n        <yuv-object-form [formOptions]=\"fo.formOptions\" (statusChanged)=\"onFormStatusChanged(fo.id, $event)\"></yuv-object-form>\n      </details>\n    }\n  }\n</main>\n\n<footer [ngClass]=\"{ visible: !disableControls() && controlsVisible() }\">\n  <div class=\"container\">\n    <button ymtButton=\"secondary\" button-size=\"small\" (click)=\"resetForm()\" [hidden]=\"!combinedFormState?.dirty\" [disabled]=\"!combinedFormState?.dirty\">\n      {{ 'yuv.object-metadata.button.reset' | translate }}\n    </button>\n    <button\n      ymtButton=\"primary\"\n      button-size=\"small\"\n      [ngClass]=\"{ spinning: busy() }\"\n      (click)=\"save()\"\n      [disabled]=\"!combinedFormState?.dirty || combinedFormState?.invalid\"\n    >\n      {{ 'yuv.object-metadata.button.save' | translate }}\n    </button>\n  </div>\n</footer>\n", styles: [":host{--_object-metadata-panel-background: var(--object-metadata-footer-background, var(--ymt-surface));--_object-metadata-footer-background: var(--object-metadata-footer-background, var(--ymt-surface-container));--_object-metadata-footer-border-color: var(--object-metadata-footer-border-color, var(--ymt-outline-variant));--_object-metadata-footer-height: 4rem;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr;height:100%;overflow:hidden;position:relative;background-color:var(--_object-metadata-panel-background)}:host.empty main{justify-content:center;align-items:center}:host main{grid-row:1/span 3;grid-column:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;padding:var(--ymt-spacing-3xl) var(--ymt-spacing-l) var(--_object-metadata-footer-height) var(--ymt-spacing-l)}:host footer{grid-row:-1;grid-column:1;padding:var(--ymt-spacing-l);opacity:0}:host footer .container{background:var(--_object-metadata-footer-background);padding:var(--ymt-spacing-s);display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-s);border-radius:var(--ymt-corner-full)}:host footer.visible{animation:controlsAppear .2s ease-in-out forwards}:host main details{background-color:var(--ymt-surface);border:1px solid var(--ymt-outline-variant)}:host main details:not(:last-child){margin-block-end:var(--ymt-spacing-m)}:host main details[open] yuv-icon.arr{transform:rotate(180deg)}:host main details summary{padding:var(--ymt-spacing-xs);cursor:pointer;display:flex;align-items:center;font-weight:700;color:var(--ymt-text-color-subtle);position:relative}:host main details summary span{flex:1}:host main details summary::marker{display:none}:host main details summary mat-icon{margin-inline-end:var(--ymt-spacing-xs)}@keyframes controlsAppear{0%{opacity:0;translate:0 var(--ymt-spacing-m)}to{opacity:1;translate:0 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ObjectFormComponent, selector: "yuv-object-form", inputs: ["formOptions", "inert", "elementExtensions", "isInnerTableForm"], outputs: ["statusChanged", "onFormReady"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: ObjectMetadataComponent, decorators: [{
             type: Component,
@@ -504,6 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
 class ObjectDetailsComponent {
     #configService;
     #userService;
+    #detailsShellEffect;
     /**
      * If you want to set the order of the tabs within object details, you can use
      * this input property. The tab order will be defined by the index of the
@@ -521,39 +564,85 @@ class ObjectDetailsComponent {
     constructor() {
         this.#configService = inject(ConfigService);
         this.#userService = inject(UserService);
+        this.detailsShell = viewChild.required(ObjectDetailsShellComponent);
+        this.#detailsShellEffect = effect(() => {
+            const shell = this.detailsShell();
+            untracked(() => {
+                this._dmsObject = shell._dmsObject;
+            });
+        });
         this.isAdvancedUser = this.#userService.isAdvancedUser;
         this.currentUser = signal(this.#userService.getCurrentUser());
+        /**
+         * ID to store the components layout state (splitted tabs, gutter position)
+         */
+        this.layoutSettingsID = signal(undefined);
+        /**
+         * DmsObject to show the details for.
+         */
+        this.dmsObject = input(undefined);
+        /**
+         * Virtual object type to use for retrieving header data
+         */
+        this.type = input.required();
         if (this.#configService.get('client.objectDetailsTabs'))
             this.panelOrder = this.#configService.get('client.objectDetailsTabs');
     }
     onIndexdataSaved(updatedObject) {
-        this.dmsObject = updatedObject;
+        if (this._dmsObject)
+            this._dmsObject.set(updatedObject);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectDetailsComponent, isStandalone: true, selector: "yuv-object-details", inputs: { panelOrder: "panelOrder", layoutSettingsID: "layoutSettingsID", dmsObject: "dmsObject", objectId: "objectId" }, ngImport: i0, template: "<yuv-object-details-shell [objectId]=\"objectId\" [(dmsObject)]=\"dmsObject\" [layoutSettingsID]=\"layoutSettingsID\">\n  <mat-tab-group>\n    <!-- content -->\n    <mat-tab [label]=\"'yuv.object-details.tabs.content.title' | translate\">\n      <ng-template matTabContent>\n        @if (dmsObject && dmsObject.content) {\n          <yuv-media-viewer\n            [id]=\"dmsObject.id\"\n            [metadata]=\"{ data: dmsObject.data, editable: true, user: currentUser() }\"\n            [type]=\"dmsObject.content.mimeType\"\n          ></yuv-media-viewer>\n        }\n\n        <span>{{ currentUser() | json }}</span>\n      </ng-template>\n    </mat-tab>\n\n    <!-- indexdata -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.indexdata.title' | translate\">\n      <ng-template matTabContent>\n        <yuv-object-metadata [dmsObject]=\"dmsObject\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n      </ng-template>\n    </mat-tab>\n    <!-- history -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.history.title' | translate\">\n      <ng-template matTabContent>\n        <yuv-object-audit [dmsObject]=\"dmsObject\"></yuv-object-audit> </ng-template\n    ></mat-tab>\n  </mat-tab-group>\n</yuv-object-details-shell>\n", styles: [":host{display:block}:host yuv-object-details-shell,:host yuv-object-form-edit{height:100%}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i2$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i2$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2$1.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: "component", type: ObjectDetailsShellComponent, selector: "yuv-object-details-shell", inputs: ["layoutSettingsID", "dmsObject", "objectId"], outputs: ["dmsObjectChange"] }, { kind: "component", type: YuvMediaViewerComponent, selector: "yuv-media-viewer", inputs: ["id", "type", "metadata", "src"] }, { kind: "component", type: ObjectMetadataComponent, selector: "yuv-object-metadata", inputs: ["disableControls", "situation", "formDisabled", "dmsObject", "flavoredDmsObject"], outputs: ["indexDataSaved", "statusChanged"] }, { kind: "component", type: ObjectAuditComponent, selector: "yuv-object-audit", inputs: ["dmsObject", "skipActions", "allActions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ObjectDetailsComponent, isStandalone: true, selector: "yuv-object-details", inputs: { panelOrder: { classPropertyName: "panelOrder", publicName: "panelOrder", isSignal: false, isRequired: false, transformFunction: null }, dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailsShell", first: true, predicate: ObjectDetailsShellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-object-details-shell [objectId]=\"objectId\" [dmsObject]=\"_dmsObject ? _dmsObject() : undefined\" [layoutSettingsID]=\"layoutSettingsID()\" [type]=\"type()\">\n  @let dmsObj = detailsShell()._dmsObject();\n  <mat-tab-group>\n    <!-- content -->\n    <mat-tab [label]=\"'yuv.object-details.tabs.content.title' | translate\">\n      <ng-template matTabContent>\n        @if (dmsObj && dmsObj.content) {\n          <yuv-object-preview [dmsObject]=\"dmsObj\"></yuv-object-preview>\n        }\n      </ng-template>\n    </mat-tab>\n\n    <!-- indexdata -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.indexdata.title' | translate\">\n      <ng-template matTabContent>\n        <yuv-object-metadata [dmsObject]=\"dmsObj\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n      </ng-template>\n    </mat-tab>\n    <!-- history -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.history.title' | translate\">\n      <ng-template matTabContent> <yuv-object-audit [dmsObject]=\"dmsObj\"></yuv-object-audit> </ng-template\n    ></mat-tab>\n  </mat-tab-group>\n</yuv-object-details-shell>\n", styles: [":host{display:block}:host yuv-object-details-shell{height:100%}:host mat-tab-group{overflow:hidden;height:100%}:host mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host yuv-object-preview{background-color:var(--ymt-surface-container-low)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i2$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i2$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2$1.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: "component", type: ObjectDetailsShellComponent, selector: "yuv-object-details-shell", inputs: ["dmsObject", "type", "bucket", "layoutSettingsID", "objectId"], outputs: ["dmsObjectChange"] }, { kind: "component", type: ObjectPreviewComponent, selector: "yuv-object-preview", inputs: ["objectId", "dmsObject", "version"] }, { kind: "component", type: ObjectMetadataComponent, selector: "yuv-object-metadata", inputs: ["disableControls", "situation", "formDisabled", "dmsObject", "flavoredDmsObject"], outputs: ["indexDataSaved", "statusChanged"] }, { kind: "component", type: ObjectAuditComponent, selector: "yuv-object-audit", inputs: ["dmsObject", "skipActions", "allActions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ObjectDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-object-details', standalone: true, imports: [
-                        JsonPipe,
                         CommonModule,
                         TranslateModule,
                         MatTabsModule,
                         ObjectDetailsShellComponent,
-                        YuvMediaViewerComponent,
+                        ObjectPreviewComponent,
                         ObjectMetadataComponent,
                         ObjectAuditComponent
-                    ], template: "<yuv-object-details-shell [objectId]=\"objectId\" [(dmsObject)]=\"dmsObject\" [layoutSettingsID]=\"layoutSettingsID\">\n  <mat-tab-group>\n    <!-- content -->\n    <mat-tab [label]=\"'yuv.object-details.tabs.content.title' | translate\">\n      <ng-template matTabContent>\n        @if (dmsObject && dmsObject.content) {\n          <yuv-media-viewer\n            [id]=\"dmsObject.id\"\n            [metadata]=\"{ data: dmsObject.data, editable: true, user: currentUser() }\"\n            [type]=\"dmsObject.content.mimeType\"\n          ></yuv-media-viewer>\n        }\n\n        <span>{{ currentUser() | json }}</span>\n      </ng-template>\n    </mat-tab>\n\n    <!-- indexdata -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.indexdata.title' | translate\">\n      <ng-template matTabContent>\n        <yuv-object-metadata [dmsObject]=\"dmsObject\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n      </ng-template>\n    </mat-tab>\n    <!-- history -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.history.title' | translate\">\n      <ng-template matTabContent>\n        <yuv-object-audit [dmsObject]=\"dmsObject\"></yuv-object-audit> </ng-template\n    ></mat-tab>\n  </mat-tab-group>\n</yuv-object-details-shell>\n", styles: [":host{display:block}:host yuv-object-details-shell,:host yuv-object-form-edit{height:100%}\n"] }]
+                    ], template: "<yuv-object-details-shell [objectId]=\"objectId\" [dmsObject]=\"_dmsObject ? _dmsObject() : undefined\" [layoutSettingsID]=\"layoutSettingsID()\" [type]=\"type()\">\n  @let dmsObj = detailsShell()._dmsObject();\n  <mat-tab-group>\n    <!-- content -->\n    <mat-tab [label]=\"'yuv.object-details.tabs.content.title' | translate\">\n      <ng-template matTabContent>\n        @if (dmsObj && dmsObj.content) {\n          <yuv-object-preview [dmsObject]=\"dmsObj\"></yuv-object-preview>\n        }\n      </ng-template>\n    </mat-tab>\n\n    <!-- indexdata -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.indexdata.title' | translate\">\n      <ng-template matTabContent>\n        <yuv-object-metadata [dmsObject]=\"dmsObj\" (indexDataSaved)=\"onIndexdataSaved($event)\"> </yuv-object-metadata>\n      </ng-template>\n    </mat-tab>\n    <!-- history -->\n    <mat-tab [label]=\"'yuv.object-metadata.tabs.history.title' | translate\">\n      <ng-template matTabContent> <yuv-object-audit [dmsObject]=\"dmsObj\"></yuv-object-audit> </ng-template\n    ></mat-tab>\n  </mat-tab-group>\n</yuv-object-details-shell>\n", styles: [":host{display:block}:host yuv-object-details-shell{height:100%}:host mat-tab-group{overflow:hidden;height:100%}:host mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}:host yuv-object-preview{background-color:var(--ymt-surface-container-low)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panelOrder: [{
                 type: Input
-            }], layoutSettingsID: [{
-                type: Input
-            }], dmsObject: [{
-                type: Input
             }], objectId: [{
                 type: Input
             }] } });
 
+const cmp = [
+    ObjectDetailsComponent,
+    ObjectDetailsHeaderComponent,
+    ObjectDetailsShellComponent,
+    ObjectMetadataComponent,
+    ObjectAuditComponent,
+    RetentionBadgeComponent
+];
+class YuvObjectDetailsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectDetailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectDetailsModule, imports: [ObjectDetailsComponent,
+            ObjectDetailsHeaderComponent,
+            ObjectDetailsShellComponent,
+            ObjectMetadataComponent,
+            ObjectAuditComponent,
+            RetentionBadgeComponent], exports: [ObjectDetailsComponent,
+            ObjectDetailsHeaderComponent,
+            ObjectDetailsShellComponent,
+            ObjectMetadataComponent,
+            ObjectAuditComponent,
+            RetentionBadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectDetailsModule, imports: [cmp] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvObjectDetailsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: cmp,
+                    exports: cmp
+                }]
+        }] });
+
 class FormSectionGroupPipe {
     transform(form, id) {
         return form.get(id);
@@ -569,26 +658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 }]
         }] });
 
-class RetentionBadgeComponent {
-    constructor() {
-        this.#retention = inject(RetentionService);
-        this.dmsObject = input.required();
-        this.retentionData = computed(() => {
-            return this.#retention.getRetentionState(this.dmsObject());
-        });
-    }
-    #retention;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: RetentionBadgeComponent, isStandalone: true, selector: "yuv-retention-badge", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let rd = retentionData();\n@if (rd.underRetention) {\n  <div class=\"badge\">\n    <span class=\"badge__icon\">\n      <mat-icon class=\"ymt-icon--size-s\">lock_clock</mat-icon>\n    </span>\n    <span class=\"badge__label\">\n      <span class=\"badge__label-truncated\">\n        {{\n          'yuv.retention-badge.retain'\n            | translate\n              : {\n                  from: rd.start | localeDate: 'shortDate',\n                  until: rd.end | localeDate: 'shortDate'\n                }\n        }}\n      </span>\n    </span>\n  </div>\n}\n", styles: [":host{display:contents}:host .badge{font:var(--ymt-font-body-subtle);color:var(--badge-retention-color, var(--ymt-on-surface));display:inline-flex;overflow:hidden;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);background-color:var(--badge-retention-background, var(--ymt-primary-container));border-radius:var(--ymt-corner-full);gap:var(--ymt-spacing-s)}:host .badge__icon{flex-shrink:0;color:var(--badge-retention-icon-color, var(--ymt-on-primary-container));display:flex;align-items:center;justify-content:center}:host .badge__label{color:var(--badge-retention-color, var(--ymt-on-surface));align-self:stretch;display:flex;align-items:center;justify-content:center;border-top-right-radius:var(--ymt-corner-full);border-bottom-right-radius:var(--ymt-corner-full);overflow:hidden}:host .badge__label-truncated{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: RetentionBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-retention-badge', standalone: true, imports: [CommonModule, TranslateModule, LocaleDatePipe, MatIconModule], template: "@let rd = retentionData();\n@if (rd.underRetention) {\n  <div class=\"badge\">\n    <span class=\"badge__icon\">\n      <mat-icon class=\"ymt-icon--size-s\">lock_clock</mat-icon>\n    </span>\n    <span class=\"badge__label\">\n      <span class=\"badge__label-truncated\">\n        {{\n          'yuv.retention-badge.retain'\n            | translate\n              : {\n                  from: rd.start | localeDate: 'shortDate',\n                  until: rd.end | localeDate: 'shortDate'\n                }\n        }}\n      </span>\n    </span>\n  </div>\n}\n", styles: [":host{display:contents}:host .badge{font:var(--ymt-font-body-subtle);color:var(--badge-retention-color, var(--ymt-on-surface));display:inline-flex;overflow:hidden;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);background-color:var(--badge-retention-background, var(--ymt-primary-container));border-radius:var(--ymt-corner-full);gap:var(--ymt-spacing-s)}:host .badge__icon{flex-shrink:0;color:var(--badge-retention-icon-color, var(--ymt-on-primary-container));display:flex;align-items:center;justify-content:center}:host .badge__label{color:var(--badge-retention-color, var(--ymt-on-surface));align-self:stretch;display:flex;align-items:center;justify-content:center;border-top-right-radius:var(--ymt-corner-full);border-bottom-right-radius:var(--ymt-corner-full);overflow:hidden}:host .badge__label-truncated{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"] }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FormSectionGroupPipe, ObjectAuditComponent, ObjectDetailsComponent, ObjectDetailsShellComponent, ObjectMetadataComponent, RetentionBadgeComponent };
+export { FormSectionGroupPipe, ObjectAuditComponent, ObjectDetailsComponent, ObjectDetailsHeaderComponent, ObjectDetailsShellComponent, ObjectMetadataComponent, RetentionBadgeComponent, YuvObjectDetailsModule };
 //# sourceMappingURL=yuuvis-client-framework-object-details.mjs.map