@yuuvis/client-framework 3.0.0 → 3.1.0

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

@@ -1,189 +1,30 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, signal, Injectable, effect, viewChild, linkedSignal, untracked, output, viewChildren, NgModule, Pipe } from '@angular/core';
+import { signal, input, effect, Component, inject, computed, ChangeDetectionStrategy, Injectable, viewChild, linkedSignal, untracked, output, viewChildren, NgModule, Pipe } from '@angular/core';
 import { takeUntilDestroyed, toSignal, rxResource } from '@angular/core/rxjs-interop';
+import { ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@yuuvis/client-core';
-import { ObjectConfigService, EventService, YuvEventType, Utils, DmsService, TranslateService, LocaleDatePipe, TranslatePipe, SystemService, Situation, PendingChangesService, NotificationService, UserService, TabGuardDirective } from '@yuuvis/client-core';
+import * as i1 from '@yuuvis/client-core';
+import { YuvEventType, LocaleDatePipe, TranslatePipe, ObjectConfigService, EventService, Utils, DmsService, TranslateService, SystemService, Situation, PendingChangesService, NotificationService, UserService, TabGuardDirective } from '@yuuvis/client-core';
+import { BusyOverlayDirective, RetentionBadgeComponent } from '@yuuvis/client-framework/common';
+import { YUV_ICONS } from '@yuuvis/client-framework/icons';
+import { YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
+import { finalize, of, map } from 'rxjs';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
-import * as i1 from '@yuuvis/material/panes';
+import * as i1$1 from '@yuuvis/material/panes';
 import { YmtPanesModule } from '@yuuvis/material/panes';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { BusyOverlayDirective, RetentionBadgeComponent } from '@yuuvis/client-framework/common';
-import { finalize, of, map } from 'rxjs';
 import * as i1$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { ObjectPreviewComponent } from '@yuuvis/client-framework/object-preview';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { YUV_ICONS } from '@yuuvis/client-framework/icons';
-import { YmtIconButtonDirective, YmtButtonDirective } from '@yuuvis/material';
 import { MatButtonModule } from '@angular/material/button';
 import { ObjectFormComponent } from '@yuuvis/client-framework/object-form';
 import { ObjectSummaryDataComponent } from '@yuuvis/client-framework/object-summary';
 import * as i2$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-/**
- * Component showing header data for a dms object. These will be
- * generated from the object config for the given object.
- *
- * You could inject a set of actions into the headers actions slot
- * by adding them to the components body:
- *
- * ```html
- * <yuv-object-details-header [dmsObject]="obj">
- *   <ng-template #yuvHeaderActions>...</ng-template>
- * </yuv-object-details-header>
- * ```
- */
-class ObjectDetailsHeaderComponent {
-    #objectConfig;
-    #eventService;
-    constructor() {
-        this.#objectConfig = inject(ObjectConfigService);
-        this.#eventService = inject(EventService);
-        this.dmsObject = input(undefined, ...(ngDevMode ? [{ debugName: "dmsObject" }] : /* istanbul ignore next */ []));
-        /**
-         * Virtual object type to use for retrieving header data
-         */
-        this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        /**
-         * Bucket of the object config to retrieve header data from
-         */
-        this.bucket = input(undefined, ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
-        /** Template rendered in the actions area, aligned to the right of the title row. */
-        this.actions = input(undefined, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
-        /** Template rendered in the badges area, aligned to the right of the subtitle row. */
-        this.badges = input(...(ngDevMode ? [undefined, { debugName: "badges" }] : /* istanbul ignore next */ []));
-        this.headerData = computed(() => {
-            const object = this.dmsObject();
-            const type = this.type();
-            return object && type ? this.#setHeaderData() : undefined;
-        }, ...(ngDevMode ? [{ debugName: "headerData" }] : /* istanbul ignore next */ []));
-        this.#eventService
-            .on(YuvEventType.DMS_OBJECT_UPDATED)
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => this.#setHeaderData());
-    }
-    #setHeaderData() {
-        const object = this.dmsObject();
-        if (!object) {
-            return undefined;
-        }
-        else {
-            const roc = this.#objectConfig.getResolvedObjectConfig(object.data, this.type(), this.bucket());
-            return {
-                title: roc.title,
-                description: roc.description,
-                icon: roc.icon?.value
-            };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dmsObj = dmsObject();\n@let headerD = headerData();\n@if (dmsObj && headerD) {\n  <ymt-pane-header [icon]=\"headerD.icon\" [actions]=\"actions()\" [badges]=\"badges()\">\n    <ng-template #yuvPaneHeaderTitle>\n      <ng-container *yuvRenderer=\"headerD.title\" />\n    </ng-template>\n    <ng-template #yuvPaneHeaderSubtitle>\n      <ng-container *yuvRenderer=\"headerD.description\" />\n    </ng-template>\n  </ymt-pane-header>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-object-details-header', imports: [MatIconModule, YmtPanesModule, RendererDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dmsObj = dmsObject();\n@let headerD = headerData();\n@if (dmsObj && headerD) {\n  <ymt-pane-header [icon]=\"headerD.icon\" [actions]=\"actions()\" [badges]=\"badges()\">\n    <ng-template #yuvPaneHeaderTitle>\n      <ng-container *yuvRenderer=\"headerD.title\" />\n    </ng-template>\n    <ng-template #yuvPaneHeaderSubtitle>\n      <ng-container *yuvRenderer=\"headerD.description\" />\n    </ng-template>\n  </ymt-pane-header>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { dmsObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "dmsObject", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }] } });
-
-class ObjectDetailsShellService {
-    constructor() {
-        this.id = Utils.uuid();
-        this.#dmsService = inject(DmsService);
-        this.translate = inject(TranslateService);
-        this.#dmsObject = signal(undefined, ...(ngDevMode ? [{ debugName: "#dmsObject" }] : /* istanbul ignore next */ []));
-        this.dmsObject = this.#dmsObject.asReadonly();
-        this.contextError = signal(undefined, ...(ngDevMode ? [{ debugName: "contextError" }] : /* istanbul ignore next */ []));
-        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-    }
-    #dmsService;
-    #dmsObject;
-    setDmsObject(dmsObject) {
-        this.#dmsObject.set(dmsObject);
-        this.contextError.set(undefined);
-    }
-    fetchDmsObject(id) {
-        this.busy.set(true);
-        this.#dmsService
-            .getDmsObject(id)
-            .pipe(finalize(() => this.busy.set(false)))
-            .subscribe({
-            next: (dmsObject) => this.#dmsObject.set(dmsObject),
-            error: () => {
-                this.#dmsObject.set(undefined);
-                this.contextError.set(this.translate.instant('yuv.object-metadata.context.load.error'));
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * 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;
-    #odShellService;
-    constructor() {
-        this.#eventService = inject(EventService);
-        this.#odShellService = inject(ObjectDetailsShellService);
-        this.retentionState = signal(undefined, ...(ngDevMode ? [{ debugName: "retentionState" }] : /* istanbul ignore next */ []));
-        this.contextError = this.#odShellService.contextError;
-        this.dmsObject = this.#odShellService.dmsObject;
-        this.busy = this.#odShellService.busy;
-        /** Template rendered in the actions area, aligned to the right of the title row. */
-        this.actions = input(undefined, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
-        /** Template rendered in the badges area, aligned to the right of the subtitle row. */
-        this.badges = input(...(ngDevMode ? [undefined, { debugName: "badges" }] : /* istanbul ignore next */ []));
-        /**
-         * Virtual object type to use for retrieving header data
-         */
-        this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        /**
-         * Bucket of the object config to retrieve header data from
-         */
-        this.bucket = input(undefined, ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to hide the header
-         */
-        this.hideHeader = input(false, ...(ngDevMode ? [{ debugName: "hideHeader" }] : /* istanbul ignore next */ []));
-        this.#eventService
-            .on(YuvEventType.DMS_OBJECT_UPDATED, YuvEventType.DMS_OBJECT_DELETED)
-            .pipe(takeUntilDestroyed())
-            .subscribe((evt) => {
-            switch (evt.type) {
-                case YuvEventType.DMS_OBJECT_UPDATED: {
-                    const obj = evt.data;
-                    const dmsObj = this.dmsObject();
-                    if (dmsObj?.id === obj.id)
-                        this.#odShellService.setDmsObject(obj);
-                    break;
-                }
-                case YuvEventType.DMS_OBJECT_DELETED: {
-                    if (evt.data?.id === this.dmsObject()?.id) {
-                        this.#odShellService.setDmsObject(undefined);
-                    }
-                }
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ObjectDetailsShellComponent, isStandalone: true, selector: "yuv-object-details-shell", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", 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 }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dmsObj = dmsObject();\n@if (dmsObj) {\n  @if (!hideHeader()) {\n    <yuv-object-details-header\n      [dmsObject]=\"dmsObj\"\n      [type]=\"type()\"\n      [bucket]=\"bucket()\"\n      [badges]=\"badges()\"\n      [actions]=\"actions()\"\n    />\n  }\n  <div class=\"content\" [yuvBusyOverlay]=\"busy()\">\n    <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;overflow:hidden}: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: "component", type: ObjectDetailsHeaderComponent, selector: "yuv-object-details-header", inputs: ["dmsObject", "type", "bucket", "actions", "badges"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-object-details-shell', standalone: true, imports: [ObjectDetailsHeaderComponent, MatTooltipModule, BusyOverlayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dmsObj = dmsObject();\n@if (dmsObj) {\n  @if (!hideHeader()) {\n    <yuv-object-details-header\n      [dmsObject]=\"dmsObj\"\n      [type]=\"type()\"\n      [bucket]=\"bucket()\"\n      [badges]=\"badges()\"\n      [actions]=\"actions()\"\n    />\n  }\n  <div class=\"content\" [yuvBusyOverlay]=\"busy()\">\n    <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;overflow:hidden}: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: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }] } });
-
 class ObjectAuditComponent {
     #dmsObjectEffect;
     get objectID() {
@@ -341,7 +182,7 @@ class ObjectAuditComponent {
         this.auditsRes.set(undefined);
         this.error.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectAuditComponent, deps: [{ token: i1$1.AuditService }, { token: i1$1.EventService }, { token: i1$1.SystemService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.9", 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: "@let auditsResult = auditsRes();\n\n<div\n  class=\"yuv-audit\"\n  [ngClass]=\"{ singleEntry: auditsResult?.items?.length === 1, onPage: auditsResult && auditsResult.page > 1 }\"\n  [yuvBusyOverlay]=\"busy()\"\n>\n  @if (error()) {\n    <div class=\"error\">\n      <div translate>yuv.audit.fetch.error</div>\n    </div>\n  }\n\n  @if (auditsResult) {\n    <!-- list of audits -->\n    @let resItems = resolvedItems();\n    @if (resItems.length) {\n      <ul class=\"timeline\" [attr.aria-label]=\"'yuv.audit.timeline' | translate\">\n        @for (item of resItems; track $index) {\n          <li class=\"audit\" attr.aria-labelledby=\"'title-{{ $index }} creator-{{ $index }} date-{{ $index }}'\">\n            <time [attr.datetime]=\"item.creationDate\" class=\"date\">{{ item.creationDate | localeDate }}</time>\n            <div class=\"node\">\n              <div class=\"label\">\n                <span class=\"title\" id=\"title-{{ $index }}\">{{ item.label }}</span>\n                <span class=\"version\">{{ 'yuv.audit.label.version' | translate: ({version: item.version}) }}</span>\n              </div>\n              <div class=\"more meta\">{{ item.more }}</div>\n              <div class=\"creator meta\" id=\"creator-{{ $index }}\">{{ item.createdBy.title }}</div>\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"empty\" translate>yuv.audit.result.empty</div>\n    }\n\n    <!-- controls -->\n    @if (auditsResult.hasMoreItems || auditsResult.page > 1) {\n      <div class=\"footer\" yuvOfflineDisabled>\n        <div class=\"paging\">\n          <button\n            ymtIconButton\n            [attr.aria-label]=\"'yuv.audit.label.paging.prev' | translate\"\n            [disabled]=\"auditsResult.page === 1\"\n            (click)=\"goToPage(auditsResult.page - 1)\"\n          >\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <div class=\"page\">\n            {{ auditsResult.page }}\n          </div>\n          <button\n            ymtIconButton\n            [attr.aria-label]=\"'yuv.audit.label.paging.next' | translate\"\n            [disabled]=\"!auditsResult.hasMoreItems\"\n            (click)=\"goToPage(auditsResult.page + 1)\"\n          >\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%;width: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);margin-block-start:0;margin-block-end:0;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) 6fr;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:center}: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:2px 4px;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:2px solid var(--track-color)}:host .timeline :where(.audit):after{grid-area:line;content:\"\";width:14px;height:14px;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", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { 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"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectAuditComponent, decorators: [{
@@ -355,7 +196,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatIconModule,
                         YmtIconButtonDirective
                     ], template: "@let auditsResult = auditsRes();\n\n<div\n  class=\"yuv-audit\"\n  [ngClass]=\"{ singleEntry: auditsResult?.items?.length === 1, onPage: auditsResult && auditsResult.page > 1 }\"\n  [yuvBusyOverlay]=\"busy()\"\n>\n  @if (error()) {\n    <div class=\"error\">\n      <div translate>yuv.audit.fetch.error</div>\n    </div>\n  }\n\n  @if (auditsResult) {\n    <!-- list of audits -->\n    @let resItems = resolvedItems();\n    @if (resItems.length) {\n      <ul class=\"timeline\" [attr.aria-label]=\"'yuv.audit.timeline' | translate\">\n        @for (item of resItems; track $index) {\n          <li class=\"audit\" attr.aria-labelledby=\"'title-{{ $index }} creator-{{ $index }} date-{{ $index }}'\">\n            <time [attr.datetime]=\"item.creationDate\" class=\"date\">{{ item.creationDate | localeDate }}</time>\n            <div class=\"node\">\n              <div class=\"label\">\n                <span class=\"title\" id=\"title-{{ $index }}\">{{ item.label }}</span>\n                <span class=\"version\">{{ 'yuv.audit.label.version' | translate: ({version: item.version}) }}</span>\n              </div>\n              <div class=\"more meta\">{{ item.more }}</div>\n              <div class=\"creator meta\" id=\"creator-{{ $index }}\">{{ item.createdBy.title }}</div>\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"empty\" translate>yuv.audit.result.empty</div>\n    }\n\n    <!-- controls -->\n    @if (auditsResult.hasMoreItems || auditsResult.page > 1) {\n      <div class=\"footer\" yuvOfflineDisabled>\n        <div class=\"paging\">\n          <button\n            ymtIconButton\n            [attr.aria-label]=\"'yuv.audit.label.paging.prev' | translate\"\n            [disabled]=\"auditsResult.page === 1\"\n            (click)=\"goToPage(auditsResult.page - 1)\"\n          >\n            <mat-icon>chevron_left</mat-icon>\n          </button>\n          <div class=\"page\">\n            {{ auditsResult.page }}\n          </div>\n          <button\n            ymtIconButton\n            [attr.aria-label]=\"'yuv.audit.label.paging.next' | translate\"\n            [disabled]=\"!auditsResult.hasMoreItems\"\n            (click)=\"goToPage(auditsResult.page + 1)\"\n          >\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%;width: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);margin-block-start:0;margin-block-end:0;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) 6fr;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:center}: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:2px 4px;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:2px solid var(--track-color)}:host .timeline :where(.audit):after{grid-area:line;content:\"\";width:14px;height:14px;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$1.AuditService }, { type: i1$1.EventService }, { type: i1$1.SystemService }, { type: i1$1.TranslateService }], propDecorators: { dmsObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "dmsObject", required: false }] }], skipActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipActions", required: false }] }], allActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allActions", required: false }] }] } });
+        }], ctorParameters: () => [{ type: i1.AuditService }, { type: i1.EventService }, { type: i1.SystemService }, { type: i1.TranslateService }], propDecorators: { dmsObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "dmsObject", required: false }] }], skipActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipActions", required: false }] }], allActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allActions", required: false }] }] } });
+
+/**
+ * Component showing header data for a dms object. These will be
+ * generated from the object config for the given object.
+ *
+ * You could inject a set of actions into the headers actions slot
+ * by adding them to the components body:
+ *
+ * ```html
+ * <yuv-object-details-header [dmsObject]="obj">
+ *   <ng-template #yuvHeaderActions>...</ng-template>
+ * </yuv-object-details-header>
+ * ```
+ */
+class ObjectDetailsHeaderComponent {
+    #objectConfig;
+    #eventService;
+    constructor() {
+        this.#objectConfig = inject(ObjectConfigService);
+        this.#eventService = inject(EventService);
+        this.dmsObject = input(undefined, ...(ngDevMode ? [{ debugName: "dmsObject" }] : /* istanbul ignore next */ []));
+        /**
+         * Virtual object type to use for retrieving header data
+         */
+        this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Bucket of the object config to retrieve header data from
+         */
+        this.bucket = input(undefined, ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
+        /** Template rendered in the actions area, aligned to the right of the title row. */
+        this.actions = input(undefined, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Template rendered in the badges area, aligned to the right of the subtitle row. */
+        this.badges = input(...(ngDevMode ? [undefined, { debugName: "badges" }] : /* istanbul ignore next */ []));
+        this.headerData = computed(() => {
+            const object = this.dmsObject();
+            const type = this.type();
+            return object && type ? this.#setHeaderData() : undefined;
+        }, ...(ngDevMode ? [{ debugName: "headerData" }] : /* istanbul ignore next */ []));
+        this.#eventService
+            .on(YuvEventType.DMS_OBJECT_UPDATED)
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.#setHeaderData());
+    }
+    #setHeaderData() {
+        const object = this.dmsObject();
+        if (!object) {
+            return undefined;
+        }
+        else {
+            const roc = this.#objectConfig.getResolvedObjectConfig(object.data, this.type(), this.bucket());
+            return {
+                title: roc.title,
+                description: roc.description,
+                icon: roc.icon?.value
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dmsObj = dmsObject();\n@let headerD = headerData();\n@if (dmsObj && headerD) {\n  <ymt-pane-header [icon]=\"headerD.icon\" [actions]=\"actions()\" [badges]=\"badges()\">\n    <ng-template #yuvPaneHeaderTitle>\n      <ng-container *yuvRenderer=\"headerD.title\" />\n    </ng-template>\n    <ng-template #yuvPaneHeaderSubtitle>\n      <ng-container *yuvRenderer=\"headerD.description\" />\n    </ng-template>\n  </ymt-pane-header>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i1$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-details-header', imports: [MatIconModule, YmtPanesModule, RendererDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dmsObj = dmsObject();\n@let headerD = headerData();\n@if (dmsObj && headerD) {\n  <ymt-pane-header [icon]=\"headerD.icon\" [actions]=\"actions()\" [badges]=\"badges()\">\n    <ng-template #yuvPaneHeaderTitle>\n      <ng-container *yuvRenderer=\"headerD.title\" />\n    </ng-template>\n    <ng-template #yuvPaneHeaderSubtitle>\n      <ng-container *yuvRenderer=\"headerD.description\" />\n    </ng-template>\n  </ymt-pane-header>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { dmsObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "dmsObject", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }] } });
+
+class ObjectDetailsShellService {
+    constructor() {
+        this.id = Utils.uuid();
+        this.#dmsService = inject(DmsService);
+        this.translate = inject(TranslateService);
+        this.#dmsObject = signal(undefined, ...(ngDevMode ? [{ debugName: "#dmsObject" }] : /* istanbul ignore next */ []));
+        this.dmsObject = this.#dmsObject.asReadonly();
+        this.contextError = signal(undefined, ...(ngDevMode ? [{ debugName: "contextError" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    }
+    #dmsService;
+    #dmsObject;
+    setDmsObject(dmsObject) {
+        this.#dmsObject.set(dmsObject);
+        this.contextError.set(undefined);
+    }
+    fetchDmsObject(id) {
+        this.busy.set(true);
+        this.#dmsService
+            .getDmsObject(id)
+            .pipe(finalize(() => this.busy.set(false)))
+            .subscribe({
+            next: (dmsObject) => this.#dmsObject.set(dmsObject),
+            error: () => {
+                this.#dmsObject.set(undefined);
+                this.contextError.set(this.translate.instant('yuv.object-metadata.context.load.error'));
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * 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;
+    #odShellService;
+    constructor() {
+        this.#eventService = inject(EventService);
+        this.#odShellService = inject(ObjectDetailsShellService);
+        this.retentionState = signal(undefined, ...(ngDevMode ? [{ debugName: "retentionState" }] : /* istanbul ignore next */ []));
+        this.contextError = this.#odShellService.contextError;
+        this.dmsObject = this.#odShellService.dmsObject;
+        this.busy = this.#odShellService.busy;
+        /** Template rendered in the actions area, aligned to the right of the title row. */
+        this.actions = input(undefined, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        /** Template rendered in the badges area, aligned to the right of the subtitle row. */
+        this.badges = input(...(ngDevMode ? [undefined, { debugName: "badges" }] : /* istanbul ignore next */ []));
+        /**
+         * Virtual object type to use for retrieving header data
+         */
+        this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Bucket of the object config to retrieve header data from
+         */
+        this.bucket = input(undefined, ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the header
+         */
+        this.hideHeader = input(false, ...(ngDevMode ? [{ debugName: "hideHeader" }] : /* istanbul ignore next */ []));
+        this.#eventService
+            .on(YuvEventType.DMS_OBJECT_UPDATED, YuvEventType.DMS_OBJECT_DELETED)
+            .pipe(takeUntilDestroyed())
+            .subscribe((evt) => {
+            switch (evt.type) {
+                case YuvEventType.DMS_OBJECT_UPDATED: {
+                    const obj = evt.data;
+                    const dmsObj = this.dmsObject();
+                    if (dmsObj?.id === obj.id)
+                        this.#odShellService.setDmsObject(obj);
+                    break;
+                }
+                case YuvEventType.DMS_OBJECT_DELETED: {
+                    if (evt.data?.id === this.dmsObject()?.id) {
+                        this.#odShellService.setDmsObject(undefined);
+                    }
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ObjectDetailsShellComponent, isStandalone: true, selector: "yuv-object-details-shell", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", 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 }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dmsObj = dmsObject();\n@if (dmsObj) {\n  @if (!hideHeader()) {\n    <yuv-object-details-header\n      [dmsObject]=\"dmsObj\"\n      [type]=\"type()\"\n      [bucket]=\"bucket()\"\n      [badges]=\"badges()\"\n      [actions]=\"actions()\"\n    />\n  }\n  <div class=\"content\" [yuvBusyOverlay]=\"busy()\">\n    <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;overflow:hidden}: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: "component", type: ObjectDetailsHeaderComponent, selector: "yuv-object-details-header", inputs: ["dmsObject", "type", "bucket", "actions", "badges"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ObjectDetailsShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-details-shell', standalone: true, imports: [ObjectDetailsHeaderComponent, MatTooltipModule, BusyOverlayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dmsObj = dmsObject();\n@if (dmsObj) {\n  @if (!hideHeader()) {\n    <yuv-object-details-header\n      [dmsObject]=\"dmsObj\"\n      [type]=\"type()\"\n      [bucket]=\"bucket()\"\n      [badges]=\"badges()\"\n      [actions]=\"actions()\"\n    />\n  }\n  <div class=\"content\" [yuvBusyOverlay]=\"busy()\">\n    <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;overflow:hidden}: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: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], bucket: [{ type: i0.Input, args: [{ isSignal: true, alias: "bucket", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }] } });
 
 class ObjectMetadataSectionComponent {
     constructor() {
@@ -820,5 +820,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FormSectionGroupPipe, ObjectAuditComponent, ObjectDetailsComponent, ObjectDetailsHeaderComponent, ObjectDetailsShellComponent, ObjectDetailsShellService, ObjectMetadataComponent, YuvObjectDetailsModule };
+export { FormSectionGroupPipe, ObjectAuditComponent, ObjectDetailsComponent, ObjectDetailsHeaderComponent, ObjectDetailsShellComponent, ObjectDetailsShellService, ObjectMetadataComponent, ObjectMetadataSectionComponent, YuvObjectDetailsModule };
 //# sourceMappingURL=yuuvis-client-framework-object-details.mjs.map