@yuuvis/client-framework 2.4.4 → 2.5.0

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

@@ -1,29 +1,33 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Input, Directive, computed, EnvironmentInjector, ApplicationRef, createComponent, HostBinding, EventEmitter, HostListener, Output, NgZone, output, contentChildren, forwardRef, NgModule, signal, Injectable } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Input, Directive, computed, effect, output, signal, EnvironmentInjector, ViewContainerRef, EventEmitter, HostListener, Output, NgZone, contentChildren, HostBinding, forwardRef, NgModule, Injectable } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/dialog';
 import { MatDialogActions, MatDialogTitle, MatDialogContent, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { YmtButtonDirective } from '@yuuvis/material';
+import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
 import { TranslateModule as TranslateModule$1, Utils, RetentionService, LocaleDatePipe } from '@yuuvis/client-core';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, fromEvent, merge, timer, of } from 'rxjs';
 import { debounceTime, tap, filter, switchMap, map, takeUntil } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i2$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 
 class DialogComponent {
     constructor() {
+        this.headertitle = input(null);
+        /**
+         * @deprecated use headertitle instead
+         */
         this.headertitel = input(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DialogComponent, isStandalone: true, selector: "yuv-dialog", inputs: { headertitel: { classPropertyName: "headertitel", publicName: "headertitel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @let title = headertitel();
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DialogComponent, isStandalone: true, selector: "yuv-dialog", inputs: { headertitle: { classPropertyName: "headertitle", publicName: "headertitle", isSignal: true, isRequired: false, transformFunction: null }, headertitel: { classPropertyName: "headertitel", publicName: "headertitel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @let title = headertitle() ?? headertitel();
     @if (title) {
       <h2 mat-dialog-title>{{ title }}</h2>
     }
@@ -39,7 +43,7 @@ class DialogComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-dialog', imports: [TranslateModule, MatDialogActions, MatDialogTitle, MatDialogContent], template: `
-    @let title = headertitel();
+    @let title = headertitle() ?? headertitel();
     @if (title) {
       <h2 mat-dialog-title>{{ title }}</h2>
     }
@@ -58,7 +62,7 @@ class ConfirmComponent {
         this.dialogData = inject(MAT_DIALOG_DATA);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmComponent, isStandalone: true, selector: "yuv-confirm", ngImport: i0, template: "<yuv-dialog [headertitel]=\"dialogData.title || ''\">\n  <main>{{ dialogData.message }}</main>\n  <footer>\n    @if (!dialogData.hideCancelButton) {\n      <button ymtButton=\"secondary\" mat-dialog-close type=\"button\">\n        {{ dialogData.cancelLabel || ('yuv.confirm.cancel' | translate) }}\n      </button>\n    }\n    <button ymtButton=\"primary\" type=\"button\" [mat-dialog-close]=\"true\">{{ dialogData.confirmLabel || ('yuv.confirm.confirm' | translate) }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { 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.15", type: ConfirmComponent, isStandalone: true, selector: "yuv-confirm", ngImport: i0, template: "<yuv-dialog [headertitel]=\"dialogData.title || ''\">\n  <main>{{ dialogData.message }}</main>\n  <footer>\n    @if (!dialogData.hideCancelButton) {\n      <button ymtButton=\"secondary\" mat-dialog-close type=\"button\">\n        {{ dialogData.cancelLabel || ('yuv.confirm.cancel' | translate) }}\n      </button>\n    }\n    <button ymtButton=\"primary\" type=\"button\" [mat-dialog-close]=\"true\">{{ dialogData.confirmLabel || ('yuv.confirm.confirm' | translate) }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
@@ -138,108 +142,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class BusyOverlayComponent {
+    constructor() {
+        this.config = input();
+        this.error = input(undefined);
+        this.x = effect(() => {
+            console.log('BusyOverlayComponent error changed:', this.error());
+        });
+        this.errorDismiss = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: BusyOverlayComponent, isStandalone: true, selector: "yuv-busy-overlay", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { errorDismiss: "errorDismiss" }, host: { properties: { "class.error": "!!error()", "class.blured": "!!config()?.blur", "style.--backdrop-background": "config()?.backdropColor || \"var(--ymt-surface-app)\"" } }, ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n@let e = error();\n@if (e) {\n  <div class=\"error\">\n    <button ymtIconButton icon-button-size=\"small\" (click)=\"errorDismiss.emit()\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <p>{{ e }}</p>\n  </div>\n} @else {\n  <mat-progress-spinner class=\"ymt-progress-spinner--giant\" [mode]=\"'indeterminate'\"></mat-progress-spinner>\n}\n", styles: [":host{position:absolute;transition:opacity .2s;inset:0;display:grid;place-items:center;z-index:5}:host.blured{backdrop-filter:blur(2px)}:host{--mdc-circular-progress-active-indicator-color: currentColor}:host .error,:host mat-progress-spinner{opacity:0;animation:fadeIn .2s ease-in forwards;animation-delay:.2s}:host .error{display:flex;flex-direction:column;background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border:var(--ymt-danger);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-xs);max-width:60ch;margin:var(--ymt-spacing-m);overflow-y:auto;align-items:end}:host .error p{margin:var(--ymt-spacing-m)}:host .backdrop{position:absolute;inset:0;background-color:rgb(from var(--backdrop-background) r g b/.5);animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BusyOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-busy-overlay', imports: [CommonModule,
+                        YmtIconButtonDirective,
+                        MatIconModule,
+                        MatProgressSpinner], host: {
+                        '[class.error]': '!!error()',
+                        '[class.blured]': '!!config()?.blur',
+                        '[style.--backdrop-background]': 'config()?.backdropColor || "var(--ymt-surface-app)"'
+                    }, template: "<div class=\"backdrop\"></div>\n\n@let e = error();\n@if (e) {\n  <div class=\"error\">\n    <button ymtIconButton icon-button-size=\"small\" (click)=\"errorDismiss.emit()\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <p>{{ e }}</p>\n  </div>\n} @else {\n  <mat-progress-spinner class=\"ymt-progress-spinner--giant\" [mode]=\"'indeterminate'\"></mat-progress-spinner>\n}\n", styles: [":host{position:absolute;transition:opacity .2s;inset:0;display:grid;place-items:center;z-index:5}:host.blured{backdrop-filter:blur(2px)}:host{--mdc-circular-progress-active-indicator-color: currentColor}:host .error,:host mat-progress-spinner{opacity:0;animation:fadeIn .2s ease-in forwards;animation-delay:.2s}:host .error{display:flex;flex-direction:column;background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border:var(--ymt-danger);padding:var(--ymt-spacing-xs);border-radius:var(--ymt-corner-xs);max-width:60ch;margin:var(--ymt-spacing-m);overflow-y:auto;align-items:end}:host .error p{margin:var(--ymt-spacing-m)}:host .backdrop{position:absolute;inset:0;background-color:rgb(from var(--backdrop-background) r g b/.5);animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }] });
+
 /**
  * A directive that will overlay its host component with a translucent background
  * and a loading spinner once the condition resolves with true. This is useful for example to
  * prevent user intercation while component data is loading or some processing is done.
  *
- * It'll also set the `inert` attribute on the host element. This will disable the host and
- * all elements inside (like buttons, inputs etc.)
+ * It'll also prevent the overlayed element from beiong interacted with.
  *
- * @example
- * <div class="result-list" [yuvBusyOverlay]="waitingForServerResponse">...</div>
+ * ```html
+ * <div class="data-panel" [yuvBusyOverlay]="isLoadingData">...</div>
+ * ```
+ * Setting a `yuvBusyError` will replace the loading spinner by the provided error message.
+ * You need to keep the `yuvBusyOverlay` condition true to show the error.
+ * The error element rendered has a dismiss/close action that trigger the `yuvBusyErrorDismiss`
+ * output event, that you then can use to set the busy condition to false.
+ *
+ * ```html
+ * <div class="result-list"
+ * [yuvBusyOverlay]="waitingForServerResponse"
+ * (yuvBusyErrorDismiss)="waitingForServerResponse = false"
+ * [yuvBusyError]="errorMessage">
+ *  ...
+ * </div>
+ * ```
+ *
+ * ```ts
+ * // in your component code
+ * this.waitingForServerResponse = true;
+ * fetchData().subscribe({
+ *   next: (data) => {
+ *    ...
+ *   this.waitingForServerResponse = false;
+ *  }
+ *  error: (err) => {
+ *    this.errorMessage = 'Failed to load data from server: ' + err.message;
+ *  }
+ * });
+ * ```
  *
  */
 class BusyOverlayDirective {
     constructor() {
-        this.stylePosition = 'initial';
+        this.#initialStylePosition = signal('initial');
+        this.stylePosition = signal(this.#initialStylePosition());
         this.#elRef = inject(ElementRef);
         this.#environmentInjector = inject(EnvironmentInjector);
-        this.#applicationRef = inject(ApplicationRef);
-        this.#overlayId = null;
+        this.#vcRef = inject(ViewContainerRef);
+        /**
+         * The Boolean expression to evaluate as the condition for showing the busy overlay
+         */
+        this.yuvBusyOverlay = input(false);
+        this.#yuvBusyOverlayEffect = effect(() => {
+            const busy = this.yuvBusyOverlay();
+            if (busy === true) {
+                this.#addBusyOverlay();
+            }
+            else {
+                this.#removeBusyOverlay();
+            }
+        });
+        /**
+         * Configuration options for the busy overlay. These include
+         * e.g. backdrops bacckground color and whether to blur the
+         * overlayed content.
+         */
         this.yuvBusyOverlayConfig = input();
+        /**
+         * Error message to display in the overlay. If set, the loading spinner is replaced by the error message.
+         */
+        this.yuvBusyError = input();
+        this.#yuvBusyErrorEffect = effect(() => {
+            this.#busyOverlayComponentRef?.setInput('error', this.yuvBusyError());
+        });
+        /**
+         * Event emitted when the error message's dismiss action is triggered.
+         */
+        this.yuvBusyErrorDismiss = output();
+        this.#outputSubscriptions = [];
     }
+    #initialStylePosition;
     #elRef;
     #environmentInjector;
-    #applicationRef;
-    #overlayId;
-    /**
-     * The Boolean expression to evaluate as the condition for showing the busy overlay
-     */
-    set yuvBusyOverlay(b) {
-        if (b === true) {
-            this.#addBusyOverlay();
-        }
-        else if (this.#overlayId) {
-            this.#removeBusyOverlay();
+    #vcRef;
+    #yuvBusyOverlayEffect;
+    #yuvBusyErrorEffect;
+    #busyOverlayComponentRef;
+    #outputSubscriptions;
+    #attachOverlay() {
+        if (this.#busyOverlayComponentRef) {
+            // Already attached; just refresh inputs/outputs
+            this.#applyInputs();
+            return;
         }
-    }
-    #createSpinner(mode = 'indeterminate', value = 0) {
-        const componentRef = createComponent(MatProgressSpinner, {
+        // Create the component inside the directive’s host
+        this.#busyOverlayComponentRef = this.#vcRef.createComponent(BusyOverlayComponent, {
             environmentInjector: this.#environmentInjector
         });
-        this.#applicationRef.attachView(componentRef.hostView);
-        componentRef.changeDetectorRef.detectChanges();
-        componentRef.setInput('mode', mode);
-        componentRef.setInput('value', value);
-        componentRef.location.nativeElement.classList.add('ymt-progress-spinner--giant');
-        return componentRef;
+        const node = this.#busyOverlayComponentRef.location.nativeElement;
+        this.#elRef.nativeElement.appendChild(node);
+        this.#applyInputs();
+        this.#bindOutputs();
+        this.#busyOverlayComponentRef.changeDetectorRef?.detectChanges?.();
+    }
+    #detachOverlay() {
+        // Unsubscribe outputs first
+        this.#outputSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.#outputSubscriptions = [];
+        // Destroy componentRef and clear container
+        if (this.#busyOverlayComponentRef) {
+            this.#busyOverlayComponentRef.destroy();
+            this.#busyOverlayComponentRef = undefined;
+        }
+        this.#vcRef.clear();
+    }
+    #applyInputs() {
+        if (!this.#busyOverlayComponentRef)
+            return;
+        this.#busyOverlayComponentRef.setInput('config', this.yuvBusyOverlayConfig());
+        this.#busyOverlayComponentRef.setInput('error', this.yuvBusyError());
+    }
+    #bindOutputs() {
+        if (!this.#busyOverlayComponentRef)
+            return;
+        // Clean up old subscriptions if re-binding
+        this.#outputSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.#outputSubscriptions = [];
+        const errorDismissOutput = this.#busyOverlayComponentRef.instance.errorDismiss;
+        this.#outputSubscriptions.push(errorDismissOutput.subscribe(() => {
+            this.yuvBusyErrorDismiss.emit();
+        }));
     }
     #addBusyOverlay() {
-        this.stylePosition = 'relative';
-        const overlay = document.createElement('div');
-        overlay.style.position = 'absolute';
-        overlay.style.transition = 'opacity 200ms';
-        overlay.style.opacity = '0';
-        overlay.style.inset = '0';
-        overlay.style.display = 'grid';
-        overlay.style.alignItems = 'center';
-        overlay.style.justifyContent = 'center';
-        overlay.style.zIndex = '5';
-        const backdropBackground = this.yuvBusyOverlayConfig()?.backdropColor || 'var(--ymt-surface-app)';
-        overlay.style.backgroundColor = `rgb(from ${backdropBackground} r g b / .5)`;
-        if (this.yuvBusyOverlayConfig()?.blur) {
-            overlay.style.backdropFilter = 'blur(2px)';
-        }
-        this.#overlayId = `p${Utils.uuid()}`;
-        overlay.setAttribute('id', this.#overlayId);
-        overlay.append(this.#createSpinner('indeterminate').location.nativeElement);
-        const el = this.#elRef.nativeElement;
-        el.setAttribute('inert', '');
-        el.append(overlay);
-        setTimeout(() => {
-            overlay.style.opacity = '1';
-        });
+        this.stylePosition.set('relative');
+        this.#attachOverlay();
     }
     #removeBusyOverlay() {
-        const el = this.#elRef.nativeElement.querySelector(`#${this.#overlayId}`);
+        if (!this.#busyOverlayComponentRef)
+            return;
+        const el = this.#busyOverlayComponentRef.location.nativeElement;
         if (el) {
             el.style.opacity = '0';
             setTimeout(() => {
-                el.remove();
+                this.#detachOverlay();
+                this.stylePosition.set(this.#initialStylePosition());
             }, 200);
         }
-        this.#elRef.nativeElement.removeAttribute('inert');
-        this.#overlayId = null;
     }
     ngOnInit() {
-        this.stylePosition = getComputedStyle(this.#elRef.nativeElement).position;
+        this.#initialStylePosition.set(getComputedStyle(this.#elRef.nativeElement).position);
+    }
+    ngOnDestroy() {
+        this.#detachOverlay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: BusyOverlayDirective, isStandalone: true, selector: "[yuvBusyOverlay]", inputs: { yuvBusyOverlay: { classPropertyName: "yuvBusyOverlay", publicName: "yuvBusyOverlay", isSignal: false, isRequired: false, transformFunction: null }, yuvBusyOverlayConfig: { classPropertyName: "yuvBusyOverlayConfig", publicName: "yuvBusyOverlayConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "this.stylePosition" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: BusyOverlayDirective, isStandalone: true, selector: "[yuvBusyOverlay]", inputs: { yuvBusyOverlay: { classPropertyName: "yuvBusyOverlay", publicName: "yuvBusyOverlay", isSignal: true, isRequired: false, transformFunction: null }, yuvBusyOverlayConfig: { classPropertyName: "yuvBusyOverlayConfig", publicName: "yuvBusyOverlayConfig", isSignal: true, isRequired: false, transformFunction: null }, yuvBusyError: { classPropertyName: "yuvBusyError", publicName: "yuvBusyError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yuvBusyErrorDismiss: "yuvBusyErrorDismiss" }, host: { properties: { "attr.aria-busy": "yuvBusyOverlay() ? \"true\" : \"false\"", "style.position": "stylePosition()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BusyOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvBusyOverlay]',
-                    standalone: true
+                    standalone: true,
+                    host: {
+                        '[attr.aria-busy]': 'yuvBusyOverlay() ? "true" : "false"',
+                        '[style.position]': 'stylePosition()'
+                    }
                 }]
-        }], propDecorators: { stylePosition: [{
-                type: HostBinding,
-                args: ['style.position']
-            }], yuvBusyOverlay: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Fixes the issue of 'click' event beeing triggered on 'doubleclick' by defining new outputs that
@@ -1231,7 +1323,7 @@ class RetentionBadgeComponent {
     }
     #retention;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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$1 }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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$1 }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RetentionBadgeComponent, decorators: [{
             type: Component,
@@ -1260,5 +1352,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AutofocusChildDirective, AutofocusDelayedDirective, BusyOverlayDirective, ClickDoubleDirective, ConfirmComponent, ConfirmService, ContainerSizeDirective, DialogComponent, DialogSize, DragScrollDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusWithinDirective, FormTranslateService, LayoutSettingsService, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, RetentionBadgeComponent, YuvCommonModule, getFirstFocusableChild, getFocusableChildren, injectNgControl };
+export { AbstractMatFormField, AutofocusChildDirective, AutofocusDelayedDirective, BusyOverlayComponent, BusyOverlayDirective, ClickDoubleDirective, ConfirmComponent, ConfirmService, ContainerSizeDirective, DialogComponent, DialogSize, DragScrollDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusWithinDirective, FormTranslateService, LayoutSettingsService, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, RetentionBadgeComponent, YuvCommonModule, getFirstFocusableChild, getFocusableChildren, injectNgControl };
 //# sourceMappingURL=yuuvis-client-framework-common.mjs.map