@yuuvis/client-framework 3.4.2 → 3.6.0

package/fesm2022/yuuvis-client-framework-renderer.mjs

@@ -1,13 +1,163 @@
 import * as i0 from '@angular/core';
-import { inject, input, Component, computed, effect, ChangeDetectionStrategy, signal, Injectable, ViewContainerRef, Directive } from '@angular/core';
-import { SystemService, LocaleDatePipe, FileSizePipe, IdmService, AppCacheService, TranslateService, TranslatePipe, InternalFieldType, ContentStreamField } from '@yuuvis/client-core';
+import { input, Component, inject, computed, ChangeDetectionStrategy, signal, Injectable, effect, ViewContainerRef, Directive } from '@angular/core';
+import { TranslateService, LocalizationService, SystemService, LocaleDatePipe, FileSizePipe, IdmService, AppCacheService, TranslatePipe, InternalFieldType, ContentStreamField } from '@yuuvis/client-core';
 import { MatIcon, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
 import { rxResource } from '@angular/core/rxjs-interop';
-import { switchMap, of, map, forkJoin } from 'rxjs';
+import { of, switchMap, map, catchError, forkJoin } from 'rxjs';
 import { DecimalPipe, DatePipe } from '@angular/common';
 
+/**
+ * Abstract class to be extended by audit-entry renderers. The renderer controls the
+ * inner content of an audit timeline entry; the surrounding framing (date column,
+ * timeline line, version badge, creator) stays with the host component.
+ */
+class AbstractAuditRendererComponent {
+    constructor() {
+        this.auditEntry = input.required(...(ngDevMode ? [{ debugName: "auditEntry" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AbstractAuditRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: AbstractAuditRendererComponent, isStandalone: true, selector: "yuv-abstract-audit-renderer", inputs: { auditEntry: { classPropertyName: "auditEntry", publicName: "auditEntry", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AbstractAuditRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'yuv-abstract-audit-renderer',
+                    template: ''
+                }]
+        }], propDecorators: { auditEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "auditEntry", required: true }] }] } });
+
+class DefaultAuditRendererComponent extends AbstractAuditRendererComponent {
+    constructor() {
+        super(...arguments);
+        this.#translate = inject(TranslateService);
+        this.#localization = inject(LocalizationService);
+        this.#auditLabels = {
+            a100: this.#translate.instant('yuv.audit.label.create.metadata'),
+            a101: this.#translate.instant('yuv.audit.label.create.metadata.withcontent'),
+            a110: this.#translate.instant('yuv.audit.label.create.tag'),
+            a200: this.#translate.instant('yuv.audit.label.delete'),
+            a201: this.#translate.instant('yuv.audit.label.delete.content'),
+            a202: this.#translate.instant('yuv.audit.label.delete.marked'),
+            a210: this.#translate.instant('yuv.audit.label.delete.tag'),
+            a220: this.#translate.instant('yuv.audit.label.delete.version'),
+            a300: this.#translate.instant('yuv.audit.label.update.metadata'),
+            a301: this.#translate.instant('yuv.audit.label.update.content'),
+            a302: this.#translate.instant('yuv.audit.label.update.metadata.withcontent'),
+            a303: this.#translate.instant('yuv.audit.label.update.move.content'),
+            a310: this.#translate.instant('yuv.audit.label.update.tag'),
+            a325: this.#translate.instant('yuv.audit.label.update.restore'),
+            a340: this.#translate.instant('yuv.audit.label.update.move'),
+            a400: this.#translate.instant('yuv.audit.label.get.content'),
+            a401: this.#translate.instant('yuv.audit.label.get.metadata'),
+            a402: this.#translate.instant('yuv.audit.label.get.rendition.text'),
+            a403: this.#translate.instant('yuv.audit.label.get.rendition.pdf'),
+            a404: this.#translate.instant('yuv.audit.label.get.rendition.thumbnail'),
+            a10000: this.#translate.instant('yuv.audit.label.get.custom')
+        };
+        this.resolved = computed(() => this.#resolve(this.auditEntry()), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    }
+    #translate;
+    #localization;
+    #auditLabels;
+    #resolve(entry) {
+        let label = this.#auditLabels[`a${entry.action}`];
+        let more;
+        if ([110, 210, 310].includes(entry.action)) {
+            const params = this.#getParams(entry);
+            if (params.length) {
+                const localizedLabel = `${params[0]}:${params[1]}`;
+                more = `${this.#localization.getLocalizedLabel(params[0]) ?? params[0]}: ${this.#localization.getLocalizedLabel(localizedLabel) ?? localizedLabel}`;
+            }
+        }
+        else if (entry.action === 325) {
+            const params = this.#getParams(entry);
+            more = this.#translate.instant('yuv.audit.label.update.restore.more', {
+                version: params[0] || '[?]'
+            });
+        }
+        else if (entry.action === 10000) {
+            label = this.#localization.getLocalizedLabel(`audit:custom:${entry.subaction}`) || `${entry.subaction}`;
+        }
+        return { label, more };
+    }
+    #getParams(entry) {
+        const m = entry.detail.match(/\[(.*?)\]/);
+        return m?.[1]?.split(',').map((i) => i.trim()) ?? [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DefaultAuditRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DefaultAuditRendererComponent, isStandalone: true, selector: "yuv-default-audit-renderer", usesInheritance: true, ngImport: i0, template: `
+    @let r = resolved();
+    <span class="title">{{ r.label }}</span>
+    @if (r.more) {
+      <div class="more meta">{{ r.more }}</div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DefaultAuditRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'yuv-default-audit-renderer',
+                    standalone: true,
+                    template: `
+    @let r = resolved();
+    <span class="title">{{ r.label }}</span>
+    @if (r.more) {
+      <div class="more meta">{{ r.more }}</div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Service for managing audit-entry renderers. Renderers are components that render the
+ * inner content of an audit entry in the timeline view of `ObjectAuditComponent`.
+ *
+ * Register a renderer for an `action` to override the default rendering of all audit
+ * entries with that action, or for an `action` + `subaction` pair to override a specific
+ * variant. Lookup prefers the subaction-specific renderer over the action-only renderer;
+ * if neither is registered, `DefaultAuditRendererComponent` is used.
+ */
+class AuditRendererService {
+    #renderers = signal({}, ...(ngDevMode ? [{ debugName: "#renderers" }] : /* istanbul ignore next */ []));
+    /**
+     * Register a renderer for a specific audit `action`. Pass `subaction` to scope the
+     * renderer to a particular (action, subaction) pair.
+     */
+    registerAuditRenderer(cmp, action, subaction) {
+        this.#renderers.update((curr) => ({ ...curr, [this.#getKey(action, subaction)]: cmp }));
+    }
+    /**
+     * Resolve the renderer for an audit entry. Tries `(action, subaction)` first, falls
+     * back to `(action)`, then to `DefaultAuditRendererComponent`.
+     */
+    getAuditRenderer(action, subaction) {
+        const r = this.#renderers();
+        if (subaction !== undefined) {
+            const scoped = r[this.#getKey(action, subaction)];
+            if (scoped)
+                return scoped;
+        }
+        return r[this.#getKey(action)] || DefaultAuditRendererComponent;
+    }
+    #getKey(action, subaction) {
+        const k = [String(action)];
+        if (subaction !== undefined)
+            k.push(String(subaction));
+        return k.join('-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AuditRendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AuditRendererService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AuditRendererService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * Abstract class to be extended by property renderers
  */
@@ -92,8 +242,9 @@ class IconRendererComponent extends AbstractRendererComponent {
         this.customId = crypto.randomUUID();
         this.#registerIconsEffect = effect(async () => {
             const meta = this.meta();
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             this.propertyName() === 'custom' &&
-                !(meta && meta['isFontIcon']) &&
+                !meta?.['isFontIcon'] &&
                 this.#iconRegistry.addSvgIconLiteral(this.customId, this.#sanitizer.bypassSecurityTrustHtml(this.value()));
         }, ...(ngDevMode ? [{ debugName: "#registerIconsEffect" }] : /* istanbul ignore next */ []));
     }
@@ -101,31 +252,11 @@ class IconRendererComponent extends AbstractRendererComponent {
     #sanitizer;
     #registerIconsEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IconRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IconRendererComponent, isStandalone: true, selector: "yuv-icon-renderer", usesInheritance: true, ngImport: i0, template: ` @let icon = value();
-    @if (propertyName() !== 'custom') {
-      <yuv-object-type-icon [objectTypeId]="icon || ''"></yuv-object-type-icon>
-    } @else if (icon !== null) {
-      @let metaData = meta();
-      @if (metaData && metaData['isFontIcon']) {
-        <mat-icon>{{ icon }}</mat-icon>
-      } @else {
-        <mat-icon [svgIcon]="customId"></mat-icon>
-      }
-    }`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host yuv-icon,:host yuv-object-type-icon{--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"], dependencies: [{ kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IconRendererComponent, isStandalone: true, selector: "yuv-icon-renderer", usesInheritance: true, ngImport: i0, template: "@let icon = value();\n@if (propertyName() !== 'custom') {\n  <yuv-object-type-icon [objectTypeId]=\"icon || ''\"></yuv-object-type-icon>\n} @else if (icon !== null) {\n  @let metaData = meta();\n  @if (metaData && metaData['isFontIcon']) {\n    <mat-icon>{{ icon }}</mat-icon>\n  } @else {\n    <mat-icon [svgIcon]=\"customId\"></mat-icon>\n  }\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host yuv-icon,:host yuv-object-type-icon{--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"], dependencies: [{ kind: "component", type: ObjectTypeIconComponent, selector: "yuv-object-type-icon", inputs: ["objectTypeId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IconRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-icon-renderer', imports: [ObjectTypeIconComponent, MatIcon], template: ` @let icon = value();
-    @if (propertyName() !== 'custom') {
-      <yuv-object-type-icon [objectTypeId]="icon || ''"></yuv-object-type-icon>
-    } @else if (icon !== null) {
-      @let metaData = meta();
-      @if (metaData && metaData['isFontIcon']) {
-        <mat-icon>{{ icon }}</mat-icon>
-      } @else {
-        <mat-icon [svgIcon]="customId"></mat-icon>
-      }
-    }`, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host yuv-icon,:host yuv-object-type-icon{--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"] }]
+            args: [{ selector: 'yuv-icon-renderer', imports: [ObjectTypeIconComponent, MatIcon], template: "@let icon = value();\n@if (propertyName() !== 'custom') {\n  <yuv-object-type-icon [objectTypeId]=\"icon || ''\"></yuv-object-type-icon>\n} @else if (icon !== null) {\n  @let metaData = meta();\n  @if (metaData && metaData['isFontIcon']) {\n    <mat-icon>{{ icon }}</mat-icon>\n  } @else {\n    <mat-icon [svgIcon]=\"customId\"></mat-icon>\n  }\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--tile-slot-padding)}:host yuv-icon,:host yuv-object-type-icon{--icon-size: var(--icon-renderer-icon-size);width:var(--icon-size);height:var(--icon-size)}\n"] }]
         }] });
 
 class IntegerRendererComponent extends AbstractRendererComponent {
@@ -144,55 +275,91 @@ class OrganizationRendererComponent extends AbstractRendererComponent {
         this.#appCache = inject(AppCacheService);
         this.#STORAGE_USER_KEY = 'yuv.core.users.storage';
         this.#STORAGE_ROLES_KEY = 'yuv.core.roles.storage';
+        // Input may be a single id/role-name or an array of them; normalize to string[] so the resolver
+        // pipeline always works on a uniform shape.
         this.resolvedValue = computed(() => {
-            const m = this.value();
-            return m === null ? [] : Array.isArray(m) ? m : [m];
+            const value = this.value();
+            return value === null ? [] : Array.isArray(value) ? value : [value];
         }, ...(ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []));
         this.#userRoleResolver = rxResource({
             params: this.resolvedValue,
-            stream: ({ params }) => 
-            // TODO: Move get Roles to App init or somewhere else to avoid multiple calls
-            this.#appCache.getItem(this.#STORAGE_ROLES_KEY).pipe(switchMap((cachedRoles) => (cachedRoles
-                ? of(cachedRoles)
-                : this.#idmService
-                    .getRoles()
-                    .pipe(switchMap((roles) => roles.length
-                    ? this.#appCache.setItem(this.#STORAGE_ROLES_KEY, roles).pipe(map(() => roles))
-                    : of([])))).pipe(map((roles) => params.reduce((acc, value) => {
-                const matchingRole = roles.find((r) => r.name === value);
-                matchingRole ? acc.roles.push(matchingRole.name) : acc.users.push(value);
-                return acc;
-            }, { roles: [], users: [] })))), switchMap(({ roles, users }) => this.#appCache
-                .getItem(this.#STORAGE_USER_KEY)
-                .pipe(map((cache) => cache ? { roles, users, cache: cache.filter((c) => c !== null) } : { roles, users, cache: null }))), switchMap(({ roles, users, cache }) => {
-                let missingUsers = users;
-                let filteredUsers = [];
-                if (cache) {
-                    filteredUsers = cache.filter((u) => u && users.includes(u.id));
-                    missingUsers = users.filter((uid) => !filteredUsers.some((u) => u.id === uid));
+            stream: ({ params }) => {
+                // Nothing to resolve — short-circuit so we don't show the loading indicator or hit the
+                // backend for an empty input.
+                if (params.length === 0) {
+                    return of([]);
                 }
-                const userRequests = missingUsers
-                    .map((uid) => this.#idmService.getUserById(uid).pipe(map((user) => (user ? user : null))))
-                    .filter((obs) => obs !== null);
-                if (userRequests.length > 0) {
-                    return forkJoin(userRequests).pipe(switchMap((users) => this.#appCache
-                        .setItem(this.#STORAGE_USER_KEY, [...(cache || []), ...users, ...filteredUsers])
-                        .pipe(map(() => users))), map((users) => ({ roles, users: [...users, ...filteredUsers] })));
-                }
-                else {
-                    return of({ roles, users: [...filteredUsers] });
-                }
-            }), map(({ roles, users }) => {
-                const userNodes = users.map((u) => ({
-                    type: 'user',
-                    label: u.title || u.displayName
-                }));
-                const roleNodes = roles.map((r) => ({
-                    type: 'role',
-                    label: r
+                // Step 1 — load the role catalog (cached) and use it to partition the input into role
+                // names vs. user IDs. Roles are a closed set; anything that doesn't match is treated as
+                // a user ID and resolved in step 2.
+                // TODO: Move get Roles to App init or somewhere else to avoid multiple calls
+                return this.#appCache.getItem(this.#STORAGE_ROLES_KEY).pipe(switchMap((cachedRoles) => (cachedRoles
+                    ? of(cachedRoles)
+                    : this.#idmService.getRoles().pipe(
+                    // Only persist the role list when the backend actually returned something —
+                    // caching an empty array would mask later successful fetches.
+                    switchMap((roles) => roles.length ? this.#appCache.setItem(this.#STORAGE_ROLES_KEY, roles).pipe(map(() => roles)) : of([])))).pipe(map((roles) => params.reduce((acc, value) => {
+                    const matchingRole = roles.find((role) => role.name === value);
+                    // Role-name match → roles bucket; everything else is assumed to be a user ID.
+                    if (matchingRole) {
+                        acc.roles.push(matchingRole.name);
+                    }
+                    else {
+                        acc.users.push(value);
+                    }
+                    return acc;
+                }, { roles: [], users: [] })))), 
+                // Step 2a — pull the persisted user cache. Defensive filter against null entries that
+                // may linger from earlier buggy writes (see commit 2f3ff694f).
+                switchMap(({ roles, users }) => this.#appCache
+                    .getItem(this.#STORAGE_USER_KEY)
+                    .pipe(map((cache) => cache ? { roles, users, cache: cache.filter((entry) => entry !== null) } : { roles, users, cache: null }))), 
+                // Step 2b — resolve users: serve from cache where possible, fetch the rest from IDM.
+                switchMap(({ roles, users, cache }) => {
+                    let missingUsers = users;
+                    let filteredUsers = [];
+                    if (cache) {
+                        filteredUsers = cache.filter((entry) => entry && users.includes(entry.id));
+                        missingUsers = users.filter((uid) => !filteredUsers.some((user) => user.id === uid));
+                    }
+                    // Pair every request with its uid so we can tell which IDs came back unresolved.
+                    // catchError keeps a single failing lookup from killing the whole forkJoin.
+                    const userRequests = missingUsers.map((uid) => this.#idmService.getUserById(uid).pipe(catchError(() => of(null)), map((user) => ({ uid, user }))));
+                    if (userRequests.length > 0) {
+                        return forkJoin(userRequests).pipe(switchMap((results) => {
+                            // Resolved users are real YuvUsers — safe to cache and render.
+                            // Unresolved IDs render as a synthetic { id, title: id } so the user still
+                            // sees the raw ID, but they are NOT written to the cache (a 404 today might
+                            // resolve tomorrow, and caching it would block that).
+                            const resolved = results.filter((res) => res.user != null).map((res) => res.user);
+                            const unresolved = results
+                                .filter((res) => res.user == null)
+                                .map((res) => ({ id: res.uid, title: res.uid }));
+                            return this.#appCache
+                                .setItem(this.#STORAGE_USER_KEY, [...(cache || []), ...resolved, ...filteredUsers])
+                                .pipe(map(() => [...resolved, ...unresolved]));
+                        }), map((users) => ({ roles, users: [...users, ...filteredUsers] })));
+                    }
+                    else {
+                        // Every requested user was already in the cache — no network needed.
+                        return of({ roles, users: [...filteredUsers] });
+                    }
+                }), 
+                // Step 3 — project to the flat render-model the template iterates over. data-type
+                // drives the chip styling (user vs role).
+                map(({ roles, users }) => {
+                    const userNodes = users.map((user) => ({
+                        type: 'user',
+                        label: user.title || user.displayName
+                    }));
+                    const roleNodes = roles.map((role) => ({
+                        type: 'role',
+                        label: role
+                    }));
+                    return [...userNodes, ...roleNodes];
                 }));
-                return [...userNodes, ...roleNodes];
-            }))
+            },
+            defaultValue: []
         });
         this.userAndRole = this.#userRoleResolver.value;
         this.userAndRoleLoading = this.#userRoleResolver.isLoading;
@@ -203,27 +370,11 @@ class OrganizationRendererComponent extends AbstractRendererComponent {
     #STORAGE_ROLES_KEY;
     #userRoleResolver;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: OrganizationRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: OrganizationRendererComponent, isStandalone: true, selector: "yuv-organization-renderer", usesInheritance: true, ngImport: i0, template: `
-    @if (userAndRoleLoading()) {
-      <span class="loading"><i>.</i><i>.</i><i>.</i></span>
-    } @else {
-      @for (node of userAndRole(); track $index) {
-        <span class="node" [attr.data-type]="node.type">{{ node.label }}</span>
-      }
-    }
-  `, isInline: true, styles: [":host{padding:var(--tile-slot-padding);display:var(--yuv-renderer-display, flex);gap:var(--ymt-spacing-xs);align-items:center;@keyframes pulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}}:host .node{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-xs);font:var(--ymt-font-body-subtle);white-space:nowrap}:host .loading i{animation:pulse 1.4s ease-in-out infinite both}:host .loading i:nth-child(1){animation-delay:-.32s}:host .loading i:nth-child(2){animation-delay:-.16s}:host .loading i:nth-child(3){animation-delay:0s}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: OrganizationRendererComponent, isStandalone: true, selector: "yuv-organization-renderer", usesInheritance: true, ngImport: i0, template: "@if (userAndRoleLoading()) {\n  <span class=\"loading\"><i>.</i><i>.</i><i>.</i></span>\n} @else {\n  @for (node of userAndRole(); track $index) {\n    <span class=\"node\" [attr.data-type]=\"node.type\">{{ node.label }}</span>\n  }\n}\n", styles: [":host{padding:var(--tile-slot-padding);display:var(--yuv-renderer-display, flex);gap:var(--ymt-spacing-xs);align-items:center}:host .node{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-xs);font:var(--ymt-font-body-subtle);white-space:nowrap}:host .loading i{animation:pulse 1.4s ease-in-out infinite both}:host .loading i:nth-child(1){animation-delay:-.32s}:host .loading i:nth-child(2){animation-delay:-.16s}:host .loading i:nth-child(3){animation-delay:0s}@keyframes pulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: OrganizationRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization-renderer', template: `
-    @if (userAndRoleLoading()) {
-      <span class="loading"><i>.</i><i>.</i><i>.</i></span>
-    } @else {
-      @for (node of userAndRole(); track $index) {
-        <span class="node" [attr.data-type]="node.type">{{ node.label }}</span>
-      }
-    }
-  `, styles: [":host{padding:var(--tile-slot-padding);display:var(--yuv-renderer-display, flex);gap:var(--ymt-spacing-xs);align-items:center;@keyframes pulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}}:host .node{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-xs);font:var(--ymt-font-body-subtle);white-space:nowrap}:host .loading i{animation:pulse 1.4s ease-in-out infinite both}:host .loading i:nth-child(1){animation-delay:-.32s}:host .loading i:nth-child(2){animation-delay:-.16s}:host .loading i:nth-child(3){animation-delay:0s}\n"] }]
+            args: [{ selector: 'yuv-organization-renderer', template: "@if (userAndRoleLoading()) {\n  <span class=\"loading\"><i>.</i><i>.</i><i>.</i></span>\n} @else {\n  @for (node of userAndRole(); track $index) {\n    <span class=\"node\" [attr.data-type]=\"node.type\">{{ node.label }}</span>\n  }\n}\n", styles: [":host{padding:var(--tile-slot-padding);display:var(--yuv-renderer-display, flex);gap:var(--ymt-spacing-xs);align-items:center}:host .node{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid var(--ymt-outline);border-radius:var(--ymt-corner-xs);padding:0 var(--ymt-spacing-xs);font:var(--ymt-font-body-subtle);white-space:nowrap}:host .loading i{animation:pulse 1.4s ease-in-out infinite both}:host .loading i:nth-child(1){animation-delay:-.32s}:host .loading i:nth-child(2){animation-delay:-.16s}:host .loading i:nth-child(3){animation-delay:0s}@keyframes pulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}\n"] }]
         }] });
 
 class StringRendererComponent extends AbstractRendererComponent {
@@ -243,7 +394,7 @@ class TableRendererComponent extends AbstractRendererComponent {
         this.#decimalPipe = inject(DecimalPipe);
         this.#datePipe = inject(DatePipe);
         this.tableHeaders = computed(() => [
-            ...new Set((this.value() || []).flat().map((item, index) => ({
+            ...new Set((this.value() || []).flat().map((item) => ({
                 id: `header-${crypto.randomUUID()}`,
                 key: item.propertyName,
                 label: this.#system.getLocalizedLabel(`${item.propertyName}`) || item.propertyName
@@ -251,7 +402,7 @@ class TableRendererComponent extends AbstractRendererComponent {
         ], ...(ngDevMode ? [{ debugName: "tableHeaders" }] : /* istanbul ignore next */ []));
         this.tableData = computed(() => {
             const data = this.value() || [];
-            return (data.length > 10 ? data.slice(0, 10) : data).map((row, rowIndex) => row.map((item, index) => ({
+            return (data.length > 10 ? data.slice(0, 10) : data).map((row, rowIndex) => row.map((item) => ({
                 id: `row-${rowIndex}-cell-${crypto.randomUUID()}`,
                 ...item,
                 value: this.#cellValue(item)
@@ -265,6 +416,10 @@ class TableRendererComponent extends AbstractRendererComponent {
     #system;
     #decimalPipe;
     #datePipe;
+    getCellValue(row, key) {
+        const item = (row || []).find((i) => i.propertyName === key);
+        return item ? item.value : '';
+    }
     #cellValue(element) {
         switch (element.propertyType) {
             case 'datetime':
@@ -277,64 +432,12 @@ class TableRendererComponent extends AbstractRendererComponent {
                 return element.value;
         }
     }
-    getCellValue(row, key) {
-        const item = (row || []).find((i) => i.propertyName === key);
-        return item ? item.value : '';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TableRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TableRendererComponent, isStandalone: true, selector: "yuv-table-renderer", providers: [DecimalPipe, DatePipe], usesInheritance: true, ngImport: i0, template: `
-    <div class="table-container">
-      <table>
-        <thead>
-          <tr>
-            @for (header of tableHeaders(); track header.id) {
-              <th>{{ header.label }}</th>
-            }
-          </tr>
-        </thead>
-        <tbody>
-          @for (row of tableData(); track $index) {
-            <tr>
-              @for (header of tableHeaders(); track header.id) {
-                <td>{{ getCellValue(row, header.key) }}</td>
-              }
-            </tr>
-          }
-        </tbody>
-      </table>
-      @if (reducedData()) {
-        <p>{{ 'yuv.table.renderer.moreEntries' | translate: { count: value()?.length } }}</p>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:flex;padding:var(--tile-slot-padding);width:100%}.table-container{width:100%;overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;min-width:400px}th,td{padding:8px;text-align:left;border-bottom:1px solid var(--ymt-outline-variant);word-break:normal}th{background-color:var(--object-summary-section-background, var(--ymt-surface));font-weight:700}tr:hover{background-color:var(--ymt-hover-background)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TableRendererComponent, isStandalone: true, selector: "yuv-table-renderer", providers: [DecimalPipe, DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"table-container\">\n  <table>\n    <thead>\n      <tr>\n        @for (header of tableHeaders(); track header.id) {\n          <th>{{ header.label }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of tableData(); track $index) {\n        <tr>\n          @for (header of tableHeaders(); track header.id) {\n            <td>{{ getCellValue(row, header.key) }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n  @if (reducedData()) {\n    <p>{{ 'yuv.table.renderer.moreEntries' | translate: { count: value()?.length } }}</p>\n  }\n</div>\n", styles: [":host{display:flex;padding:var(--tile-slot-padding);width:100%}.table-container{width:100%;overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;min-width:400px}th,td{padding:8px;text-align:left;border-bottom:1px solid var(--ymt-outline-variant);word-break:normal}th{background-color:var(--object-summary-section-background, var(--ymt-surface));font-weight:700}tr:hover{background-color:var(--ymt-hover-background)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TableRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-table-renderer', standalone: true, imports: [TranslatePipe], template: `
-    <div class="table-container">
-      <table>
-        <thead>
-          <tr>
-            @for (header of tableHeaders(); track header.id) {
-              <th>{{ header.label }}</th>
-            }
-          </tr>
-        </thead>
-        <tbody>
-          @for (row of tableData(); track $index) {
-            <tr>
-              @for (header of tableHeaders(); track header.id) {
-                <td>{{ getCellValue(row, header.key) }}</td>
-              }
-            </tr>
-          }
-        </tbody>
-      </table>
-      @if (reducedData()) {
-        <p>{{ 'yuv.table.renderer.moreEntries' | translate: { count: value()?.length } }}</p>
-      }
-    </div>
-  `, providers: [DecimalPipe, DatePipe], styles: [":host{display:flex;padding:var(--tile-slot-padding);width:100%}.table-container{width:100%;overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;min-width:400px}th,td{padding:8px;text-align:left;border-bottom:1px solid var(--ymt-outline-variant);word-break:normal}th{background-color:var(--object-summary-section-background, var(--ymt-surface));font-weight:700}tr:hover{background-color:var(--ymt-hover-background)}\n"] }]
+            args: [{ selector: 'yuv-table-renderer', standalone: true, imports: [TranslatePipe], providers: [DecimalPipe, DatePipe], template: "<div class=\"table-container\">\n  <table>\n    <thead>\n      <tr>\n        @for (header of tableHeaders(); track header.id) {\n          <th>{{ header.label }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of tableData(); track $index) {\n        <tr>\n          @for (header of tableHeaders(); track header.id) {\n            <td>{{ getCellValue(row, header.key) }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n  @if (reducedData()) {\n    <p>{{ 'yuv.table.renderer.moreEntries' | translate: { count: value()?.length } }}</p>\n  }\n</div>\n", styles: [":host{display:flex;padding:var(--tile-slot-padding);width:100%}.table-container{width:100%;overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;min-width:400px}th,td{padding:8px;text-align:left;border-bottom:1px solid var(--ymt-outline-variant);word-break:normal}th{background-color:var(--object-summary-section-background, var(--ymt-surface));font-weight:700}tr:hover{background-color:var(--ymt-hover-background)}\n"] }]
         }] });
 
 class UnknownRendererComponent extends AbstractRendererComponent {
@@ -422,6 +525,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Attribute directive that renders an `AuditEntry` using the component registered with
+ * `AuditRendererService` for the entry's `action` (and optionally `subaction`). Falls
+ * back to `DefaultAuditRendererComponent` when no override is registered.
+ */
+class AuditRendererDirective {
+    constructor() {
+        this.#service = inject(AuditRendererService);
+        this.#containerRef = inject(ViewContainerRef);
+        this.yuvAuditRenderer = input.required(...(ngDevMode ? [{ debugName: "yuvAuditRenderer" }] : /* istanbul ignore next */ []));
+        this.#renderEffect = effect(() => {
+            const entry = this.yuvAuditRenderer();
+            if (this.#alreadyRendered(entry))
+                return;
+            this.#current = entry;
+            this.#containerRef.clear();
+            const cmp = this.#service.getAuditRenderer(entry.action, entry.subaction);
+            this.component = this.#containerRef.createComponent(cmp);
+            this.component.setInput('auditEntry', entry);
+        }, ...(ngDevMode ? [{ debugName: "#renderEffect" }] : /* istanbul ignore next */ []));
+    }
+    #service;
+    #containerRef;
+    #current;
+    #renderEffect;
+    #alreadyRendered(entry) {
+        return !!this.#current && JSON.stringify(this.#current) === JSON.stringify(entry);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AuditRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: AuditRendererDirective, isStandalone: true, selector: "[yuvAuditRenderer]", inputs: { yuvAuditRenderer: { classPropertyName: "yuvAuditRenderer", publicName: "yuvAuditRenderer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AuditRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvAuditRenderer]',
+                    standalone: true
+                }]
+        }], propDecorators: { yuvAuditRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvAuditRenderer", required: true }] }] } });
+
 /**
  * Structural directive for rendering an obect type property
  */
@@ -473,5 +615,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractRendererComponent, DateTimeRendererComponent, DecimalRendererComponent, IconRendererComponent, IntegerRendererComponent, OrganizationRendererComponent, RendererDirective, RendererService, StringRendererComponent, UnknownRendererComponent };
+export { AbstractAuditRendererComponent, AbstractRendererComponent, AuditRendererDirective, AuditRendererService, BooleanRendererComponent, DateTimeRendererComponent, DecimalRendererComponent, DefaultAuditRendererComponent, FileSizeRendererComponent, IconRendererComponent, IntegerRendererComponent, OrganizationRendererComponent, RendererDirective, RendererService, StringRendererComponent, TableRendererComponent, UnknownRendererComponent };
 //# sourceMappingURL=yuuvis-client-framework-renderer.mjs.map