@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.1

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

@@ -1,15 +1,13 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, computed, DestroyRef, viewChild, signal, afterNextRender, ElementRef, Input, Directive, output, EnvironmentInjector, ViewContainerRef, effect, EventEmitter, HostListener, Output, NgZone, contentChildren, Injectable, HostBinding, forwardRef, Renderer2, NgModule, InjectionToken, makeEnvironmentProviders, RendererFactory2 } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, computed, DestroyRef, viewChild, signal, afterNextRender, ElementRef, Input, Directive, output, EnvironmentInjector, ViewContainerRef, effect, NgZone, DOCUMENT, contentChildren, Injectable, forwardRef, Renderer2, NgModule, InjectionToken, makeEnvironmentProviders, RendererFactory2 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/dialog';
+import * as i1 from '@angular/material/dialog';
 import { MatDialogActions, MatDialogTitle, MatDialogContent, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import { TranslateModule as TranslateModule$1, AppCacheService, RetentionService, LocaleDatePipe } from '@yuuvis/client-core';
+import { TranslatePipe as TranslatePipe$1, AppCacheService, RetentionService, LocaleDatePipe } from '@yuuvis/client-core';
 import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import * as i1 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { CommonModule, DOCUMENT } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, fromEvent, merge, timer, of, forkJoin, map as map$1 } from 'rxjs';
@@ -20,14 +18,14 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class DialogComponent {
     constructor() {
-        this.headertitle = input(null);
+        this.headertitle = input(null, ...(ngDevMode ? [{ debugName: "headertitle" }] : []));
         /**
          * @deprecated use headertitle instead
          */
-        this.headertitel = input(null);
+        this.headertitel = input(null, ...(ngDevMode ? [{ debugName: "headertitel" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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,11 +37,11 @@ class DialogComponent {
     <mat-dialog-actions align="end" class="footer">
       <ng-content select="footer" />
     </mat-dialog-actions>
-  `, isInline: true, styles: [":host{--_dialog-area-background: var(--dialog-area-background, light-dark(var(--ymt-surface), var(--ymt-surface-container-low)));--_dialog-area-divider-color: var(--dialog-area-divider-color, var(--ymt-outline-variant));height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"header\" \"content\" \"footer\"}:host h2{grid-area:header;background-color:var(--_dialog-area-background);border-block-end:1px solid var(--_dialog-area-divider-color)}:host .footer{background-color:var(--_dialog-area-background);border-block-start:1px solid var(--_dialog-area-divider-color);gap:calc(var(--ymt-font-body) / 2)}:host.not-separated{background-color:var(--ymt-surface-app)}:host.not-separated h2,:host.not-separated .footer{background-color:transparent;border:0}.mat-mdc-dialog-container{height:100%}mat-dialog-content:empty{display:contents}mat-dialog-content main{display:var(--ymt-dialog-content-display);grid-area:content;overflow:hidden}mat-dialog-actions{grid-area:footer}mat-dialog-actions:empty{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--_dialog-area-background: var(--dialog-area-background, light-dark(var(--ymt-surface), var(--ymt-surface-container-low)));--_dialog-area-divider-color: var(--dialog-area-divider-color, var(--ymt-outline-variant));height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"header\" \"content\" \"footer\"}:host h2{grid-area:header;background-color:var(--_dialog-area-background);border-block-end:1px solid var(--_dialog-area-divider-color)}:host .footer{background-color:var(--_dialog-area-background);border-block-start:1px solid var(--_dialog-area-divider-color);gap:calc(var(--ymt-font-body) / 2)}:host.not-separated{background-color:var(--ymt-surface-app)}:host.not-separated h2,:host.not-separated .footer{background-color:transparent;border:0}.mat-mdc-dialog-container{height:100%}mat-dialog-content:empty{display:contents}mat-dialog-content main{display:var(--ymt-dialog-content-display);grid-area:content;overflow:hidden}mat-dialog-actions{grid-area:footer}mat-dialog-actions:empty{display:contents}\n"], dependencies: [{ kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-dialog', imports: [TranslateModule, MatDialogActions, MatDialogTitle, MatDialogContent], template: `
+            args: [{ selector: 'yuv-dialog', imports: [TranslatePipe, MatDialogActions, MatDialogTitle, MatDialogContent], template: `
     @let title = headertitle() ?? headertitel();
     @if (title) {
       <h2 mat-dialog-title>{{ title }}</h2>
@@ -56,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       <ng-content select="footer" />
     </mat-dialog-actions>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--_dialog-area-background: var(--dialog-area-background, light-dark(var(--ymt-surface), var(--ymt-surface-container-low)));--_dialog-area-divider-color: var(--dialog-area-divider-color, var(--ymt-outline-variant));height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"header\" \"content\" \"footer\"}:host h2{grid-area:header;background-color:var(--_dialog-area-background);border-block-end:1px solid var(--_dialog-area-divider-color)}:host .footer{background-color:var(--_dialog-area-background);border-block-start:1px solid var(--_dialog-area-divider-color);gap:calc(var(--ymt-font-body) / 2)}:host.not-separated{background-color:var(--ymt-surface-app)}:host.not-separated h2,:host.not-separated .footer{background-color:transparent;border:0}.mat-mdc-dialog-container{height:100%}mat-dialog-content:empty{display:contents}mat-dialog-content main{display:var(--ymt-dialog-content-display);grid-area:content;overflow:hidden}mat-dialog-actions{grid-area:footer}mat-dialog-actions:empty{display:contents}\n"] }]
-        }] });
+        }], propDecorators: { headertitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headertitle", required: false }] }], headertitel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headertitel", required: false }] }] } });
 
 class ConfirmComponent {
     constructor() {
@@ -74,14 +72,14 @@ class ConfirmComponent {
                 default:
                     return 'primary';
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ConfirmComponent, isStandalone: true, selector: "yuv-confirm", ngImport: i0, template: "<yuv-dialog [headertitle]=\"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]=\"buttonType()\" type=\"button\" [mat-dialog-close]=\"true\">\n      {{ dialogData.confirmLabel || ('yuv.confirm.confirm' | translate) }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ConfirmComponent, isStandalone: true, selector: "yuv-confirm", ngImport: i0, template: "<yuv-dialog [headertitle]=\"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]=\"buttonType()\" type=\"button\" [mat-dialog-close]=\"true\">\n      {{ dialogData.confirmLabel || ('yuv.confirm.confirm' | translate) }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.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"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConfirmComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-confirm', imports: [MatButtonModule, TranslateModule$1, MatDialogModule, DialogComponent, YmtButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-dialog [headertitle]=\"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]=\"buttonType()\" type=\"button\" [mat-dialog-close]=\"true\">\n      {{ dialogData.confirmLabel || ('yuv.confirm.confirm' | translate) }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"] }]
+            args: [{ selector: 'yuv-confirm', imports: [MatButtonModule, TranslatePipe$1, MatDialogModule, DialogComponent, YmtButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-dialog [headertitle]=\"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]=\"buttonType()\" type=\"button\" [mat-dialog-close]=\"true\">\n      {{ dialogData.confirmLabel || ('yuv.confirm.confirm' | translate) }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"] }]
         }] });
 
 const DEFAULT_SCROLL_AMOUNT$1 = 150;
@@ -101,9 +99,9 @@ class ScrollButtonsComponent {
         this.#destroyRef = inject(DestroyRef);
         this.scrollContainer = viewChild.required('scrollContainer');
         /** How many pixels to scroll per button click. */
-        this.scrollAmount = input(DEFAULT_SCROLL_AMOUNT$1);
-        this.showLeftButton = signal(false);
-        this.showRightButton = signal(false);
+        this.scrollAmount = input(DEFAULT_SCROLL_AMOUNT$1, ...(ngDevMode ? [{ debugName: "scrollAmount" }] : []));
+        this.showLeftButton = signal(false, ...(ngDevMode ? [{ debugName: "showLeftButton" }] : []));
+        this.showRightButton = signal(false, ...(ngDevMode ? [{ debugName: "showRightButton" }] : []));
         afterNextRender(() => {
             const element = this.scrollContainer().nativeElement;
             this.#resizeObserver = new ResizeObserver(() => this.#checkOverflow());
@@ -133,13 +131,13 @@ class ScrollButtonsComponent {
         this.showLeftButton.set(element.scrollLeft > threshold);
         this.showRightButton.set(element.scrollLeft + element.clientWidth < element.scrollWidth - threshold);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ScrollButtonsComponent, isStandalone: true, selector: "yuv-scroll-buttons", inputs: { scrollAmount: { classPropertyName: "scrollAmount", publicName: "scrollAmount", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showLeftButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--left\"\n    (click)=\"scrollLeft()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.left' | translate\"\n  >\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n}\n<div class=\"scroll-content\" #scrollContainer (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n@if (showRightButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--right\"\n    (click)=\"scrollRight()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.right' | translate\"\n  >\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;flex:1;min-width:0}.scroll-content{flex:1;overflow-x:auto;scrollbar-width:none;min-width:0}.scroll-content ::ng-deep mat-chip-grid .mdc-evolution-chip-set__chips{flex-wrap:nowrap}.scroll-content ::ng-deep mat-chip-grid mat-chip-row{flex-shrink:0;max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__cell--primary{max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__text-label,.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mat-mdc-chip-action-label{white-space:nowrap}.scroll-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:var(--ymv-text-color-subtle);width:var(--ymv-sizing-m);height:var(--ymv-sizing-m);background-color:var(--ymv-surface-hover)}.scroll-btn:hover,.scroll-btn:focus-visible{color:var(--ymv-text-color)}.scroll-btn:focus-visible{outline:2px solid var(--ymv-primary-color);outline-offset:-2px}.scroll-btn mat-icon{font-size:20px;width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ScrollButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ScrollButtonsComponent, isStandalone: true, selector: "yuv-scroll-buttons", inputs: { scrollAmount: { classPropertyName: "scrollAmount", publicName: "scrollAmount", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showLeftButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--left\"\n    (click)=\"scrollLeft()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.left' | translate\"\n  >\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n}\n<div class=\"scroll-content\" #scrollContainer (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n@if (showRightButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--right\"\n    (click)=\"scrollRight()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.right' | translate\"\n  >\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;flex:1;min-width:0}.scroll-content{flex:1;overflow-x:auto;scrollbar-width:none;min-width:0}.scroll-content ::ng-deep mat-chip-grid .mdc-evolution-chip-set__chips{flex-wrap:nowrap}.scroll-content ::ng-deep mat-chip-grid mat-chip-row{flex-shrink:0;max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__cell--primary{max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__text-label,.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mat-mdc-chip-action-label{white-space:nowrap}.scroll-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:var(--ymv-text-color-subtle);width:var(--ymv-sizing-m);height:var(--ymv-sizing-m);background-color:var(--ymv-surface-hover)}.scroll-btn:hover,.scroll-btn:focus-visible{color:var(--ymv-text-color)}.scroll-btn:focus-visible{outline:2px solid var(--ymv-primary-color);outline-offset:-2px}.scroll-btn mat-icon{font-size:20px;width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ScrollButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-scroll-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, TranslateModule], template: "@if (showLeftButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--left\"\n    (click)=\"scrollLeft()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.left' | translate\"\n  >\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n}\n<div class=\"scroll-content\" #scrollContainer (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n@if (showRightButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--right\"\n    (click)=\"scrollRight()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.right' | translate\"\n  >\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;flex:1;min-width:0}.scroll-content{flex:1;overflow-x:auto;scrollbar-width:none;min-width:0}.scroll-content ::ng-deep mat-chip-grid .mdc-evolution-chip-set__chips{flex-wrap:nowrap}.scroll-content ::ng-deep mat-chip-grid mat-chip-row{flex-shrink:0;max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__cell--primary{max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__text-label,.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mat-mdc-chip-action-label{white-space:nowrap}.scroll-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:var(--ymv-text-color-subtle);width:var(--ymv-sizing-m);height:var(--ymv-sizing-m);background-color:var(--ymv-surface-hover)}.scroll-btn:hover,.scroll-btn:focus-visible{color:var(--ymv-text-color)}.scroll-btn:focus-visible{outline:2px solid var(--ymv-primary-color);outline-offset:-2px}.scroll-btn mat-icon{font-size:20px;width:20px;height:20px}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'yuv-scroll-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, TranslatePipe], template: "@if (showLeftButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--left\"\n    (click)=\"scrollLeft()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.left' | translate\"\n  >\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n}\n<div class=\"scroll-content\" #scrollContainer (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n@if (showRightButton()) {\n  <button\n    class=\"scroll-btn scroll-btn--right\"\n    (click)=\"scrollRight()\"\n    [attr.aria-label]=\"'yuv.object-form-element.scroll.button.right' | translate\"\n  >\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;flex:1;min-width:0}.scroll-content{flex:1;overflow-x:auto;scrollbar-width:none;min-width:0}.scroll-content ::ng-deep mat-chip-grid .mdc-evolution-chip-set__chips{flex-wrap:nowrap}.scroll-content ::ng-deep mat-chip-grid mat-chip-row{flex-shrink:0;max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__cell--primary{max-width:none}.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mdc-evolution-chip__text-label,.scroll-content ::ng-deep mat-chip-grid mat-chip-row .mat-mdc-chip-action-label{white-space:nowrap}.scroll-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:var(--ymv-text-color-subtle);width:var(--ymv-sizing-m);height:var(--ymv-sizing-m);background-color:var(--ymv-surface-hover)}.scroll-btn:hover,.scroll-btn:focus-visible{color:var(--ymv-text-color)}.scroll-btn:focus-visible{outline:2px solid var(--ymv-primary-color);outline-offset:-2px}.scroll-btn mat-icon{font-size:20px;width:20px;height:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], scrollAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollAmount", required: false }] }] } });
 
 /**
  * Directive putting focus on a 'focusable' child element.
@@ -165,10 +163,10 @@ class AutofocusChildDirective {
                 focusEl.focus();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutofocusChildDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: AutofocusChildDirective, isStandalone: true, selector: "[yuvAutofocusChild]", inputs: { yuvAutofocusChild: "yuvAutofocusChild" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutofocusChildDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: AutofocusChildDirective, isStandalone: true, selector: "[yuvAutofocusChild]", inputs: { yuvAutofocusChild: "yuvAutofocusChild" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutofocusChildDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutofocusChildDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvAutofocusChild]',
@@ -190,11 +188,11 @@ class AutofocusDelayedDirective {
         /**
          * Sets the delay in milliseconds. If no delay is set, the focus will be set immediately.
          */
-        this.yuvAutofocusDelayed = input(0);
+        this.yuvAutofocusDelayed = input(0, ...(ngDevMode ? [{ debugName: "yuvAutofocusDelayed" }] : []));
         this.#delay = computed(() => {
             const d = this.yuvAutofocusDelayed();
             return typeof d === 'string' ? parseInt(d) : d;
-        });
+        }, ...(ngDevMode ? [{ debugName: "#delay" }] : []));
     }
     #elRef;
     #delay;
@@ -203,37 +201,34 @@ class AutofocusDelayedDirective {
             this.#elRef.nativeElement.focus();
         }, this.#delay());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutofocusDelayedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: AutofocusDelayedDirective, isStandalone: true, selector: "[yuvAutofocusDelayed]", inputs: { yuvAutofocusDelayed: { classPropertyName: "yuvAutofocusDelayed", publicName: "yuvAutofocusDelayed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutofocusDelayedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: AutofocusDelayedDirective, isStandalone: true, selector: "[yuvAutofocusDelayed]", inputs: { yuvAutofocusDelayed: { classPropertyName: "yuvAutofocusDelayed", publicName: "yuvAutofocusDelayed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutofocusDelayedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutofocusDelayedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvAutofocusDelayed]',
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { yuvAutofocusDelayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvAutofocusDelayed", required: false }] }] } });
 
 class BusyOverlayComponent {
     constructor() {
-        this.config = input();
-        this.error = input(undefined);
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
         this.errorDismiss = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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;--mat-progress-spinner-active-indicator-color: currentColor}:host.blured{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}: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: "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.20", ngImport: i0, type: BusyOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BusyOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-busy-overlay', imports: [CommonModule,
-                        YmtIconButtonDirective,
-                        MatIconModule,
-                        MatProgressSpinner], host: {
+            args: [{ selector: 'yuv-busy-overlay', imports: [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"] }]
-        }] });
+                    }, 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;--mat-progress-spinner-active-indicator-color: currentColor}:host.blured{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}: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"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDismiss: [{ type: i0.Output, args: ["errorDismiss"] }] } });
 
 /**
  * A directive that will overlay its host component with a translucent background
@@ -276,15 +271,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 class BusyOverlayDirective {
     constructor() {
-        this.#initialStylePosition = signal('initial');
-        this.stylePosition = signal(this.#initialStylePosition());
+        this.#initialStylePosition = signal('initial', ...(ngDevMode ? [{ debugName: "#initialStylePosition" }] : []));
+        this.stylePosition = signal(this.#initialStylePosition(), ...(ngDevMode ? [{ debugName: "stylePosition" }] : []));
         this.#elRef = inject(ElementRef);
         this.#environmentInjector = inject(EnvironmentInjector);
         this.#vcRef = inject(ViewContainerRef);
         /**
          * The Boolean expression to evaluate as the condition for showing the busy overlay
          */
-        this.yuvBusyOverlay = input(false);
+        this.yuvBusyOverlay = input(false, ...(ngDevMode ? [{ debugName: "yuvBusyOverlay" }] : []));
         this.#yuvBusyOverlayEffect = effect(() => {
             const busy = this.yuvBusyOverlay();
             if (busy === true) {
@@ -293,18 +288,18 @@ class BusyOverlayDirective {
             else {
                 this.#removeBusyOverlay();
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#yuvBusyOverlayEffect" }] : []));
         /**
          * Configuration options for the busy overlay. These include
          * e.g. backdrops background color and whether to blur the
          * overlaid content.
          */
-        this.yuvBusyOverlayConfig = input();
+        this.yuvBusyOverlayConfig = input(...(ngDevMode ? [undefined, { debugName: "yuvBusyOverlayConfig" }] : []));
         /**
          * 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()));
+        this.yuvBusyError = input(...(ngDevMode ? [undefined, { debugName: "yuvBusyError" }] : []));
+        this.#yuvBusyErrorEffect = effect(() => this.#busyOverlayComponentRef?.setInput('error', this.yuvBusyError()), ...(ngDevMode ? [{ debugName: "#yuvBusyErrorEffect" }] : []));
         /**
          * Event emitted when the error message's dismiss action is triggered.
          */
@@ -384,10 +379,10 @@ class BusyOverlayDirective {
     ngOnDestroy() {
         this.#detachOverlay();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", 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.20", ngImport: i0, type: BusyOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BusyOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvBusyOverlay]',
@@ -397,7 +392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         '[style.position]': 'stylePosition()'
                     }
                 }]
-        }] });
+        }], propDecorators: { yuvBusyOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvBusyOverlay", required: false }] }], yuvBusyOverlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvBusyOverlayConfig", required: false }] }], yuvBusyError: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvBusyError", required: false }] }], yuvBusyErrorDismiss: [{ type: i0.Output, args: ["yuvBusyErrorDismiss"] }] } });
 
 /**
  * Fixes the issue of 'click' event beeing triggered on 'doubleclick' by defining new outputs that
@@ -405,18 +400,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 class ClickDoubleDirective {
     constructor() {
-        this.debounceTime = 200;
-        this.doubleClick = new EventEmitter();
-        this.singleClick = new EventEmitter();
+        this.debounceTime = input(200, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
+        this.doubleClick = output({ alias: 'click.double' });
+        this.singleClick = output({ alias: 'click.single' });
         this.clicksSubject = new Subject();
-        this.clicksSubject.pipe(takeUntilDestroyed(), debounceTime(this.debounceTime)).subscribe({
+        this.clicksSubject.pipe(takeUntilDestroyed(), debounceTime(this.debounceTime())).subscribe({
             next: (event) => {
-                if (event.type === 'click') {
-                    this.singleClick.emit(event);
-                }
-                else {
-                    this.doubleClick.emit(event);
-                }
+                event.type === 'click' ? this.singleClick.emit(event) : this.doubleClick.emit(event);
             }
         });
     }
@@ -430,30 +420,19 @@ class ClickDoubleDirective {
         event.stopPropagation();
         this.clicksSubject.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ClickDoubleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: ClickDoubleDirective, isStandalone: true, selector: "[click.single],[click.double]", inputs: { debounceTime: "debounceTime" }, outputs: { doubleClick: "click.double", singleClick: "click.single" }, host: { listeners: { "click": "clickEvent($event)", "dblclick": "doubleClickEvent($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClickDoubleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: ClickDoubleDirective, isStandalone: true, selector: "[click.single],[click.double]", inputs: { debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doubleClick: "click.double", singleClick: "click.single" }, host: { listeners: { "click": "clickEvent($event)", "dblclick": "doubleClickEvent($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ClickDoubleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClickDoubleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[click.single],[click.double]',
-                    standalone: true
+                    host: {
+                        '(click)': 'clickEvent($event)',
+                        '(dblclick)': 'doubleClickEvent($event)'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { debounceTime: [{
-                type: Input
-            }], doubleClick: [{
-                type: Output,
-                args: ['click.double']
-            }], singleClick: [{
-                type: Output,
-                args: ['click.single']
-            }], clickEvent: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], doubleClickEvent: [{
-                type: HostListener,
-                args: ['dblclick', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], doubleClick: [{ type: i0.Output, args: ["click.double"] }], singleClick: [{ type: i0.Output, args: ["click.single"] }] } });
 
 /**
  * Directive to watch the size of an element inside the DOM. Usefull for example to provide
@@ -498,16 +477,16 @@ class ContainerSizeDirective {
     ngOnDestroy() {
         this._resizeObserver.unobserve(this.elRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: ContainerSizeDirective, isStandalone: true, selector: "[yuvContainerSize]", outputs: { containerHeight: "containerHeight", containerWidth: "containerWidth" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ContainerSizeDirective, isStandalone: true, selector: "[yuvContainerSize]", outputs: { containerHeight: "containerHeight", containerWidth: "containerWidth" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ContainerSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContainerSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvContainerSize]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { containerHeight: [{ type: i0.Output, args: ["containerHeight"] }], containerWidth: [{ type: i0.Output, args: ["containerWidth"] }] } });
 
 /**
  * Directive for adding drag scroll behaviour to a container element. Elements that overlow will then
@@ -579,10 +558,10 @@ class DragScrollDirective {
         }));
         dragMove$.subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DragScrollDirective, isStandalone: true, selector: "[yuvDragScroll]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: DragScrollDirective, isStandalone: true, selector: "[yuvDragScroll]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvDragScroll]'
@@ -594,9 +573,9 @@ class DragSelectDirective {
         this.#selectStartX = 0;
         this.#selectStartY = 0;
         this.#selection = [];
-        this.items = contentChildren(DragSelectItemDirective);
-        this.#selectables = computed(() => this.items().map((item) => item.el));
-        this.yuvDragSelect = input();
+        this.items = contentChildren(DragSelectItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.#selectables = computed(() => this.items().map((item) => item.el), ...(ngDevMode ? [{ debugName: "#selectables" }] : []));
+        this.yuvDragSelect = input(...(ngDevMode ? [undefined, { debugName: "yuvDragSelect" }] : []));
         this.dragSelectChange = output();
         this.dragSelect = output();
         this.#onPointerUp = () => {
@@ -671,29 +650,28 @@ class DragSelectDirective {
     #resize;
     #checkSelected;
     #checkRectIntersection;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.20", type: DragSelectDirective, isStandalone: true, selector: "[yuvDragSelect]", inputs: { yuvDragSelect: { classPropertyName: "yuvDragSelect", publicName: "yuvDragSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragSelectChange: "dragSelectChange", dragSelect: "dragSelect" }, host: { listeners: { "pointerdown": "onPointerDown($event)" } }, queries: [{ propertyName: "items", predicate: DragSelectItemDirective, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.19", type: DragSelectDirective, isStandalone: true, selector: "[yuvDragSelect]", inputs: { yuvDragSelect: { classPropertyName: "yuvDragSelect", publicName: "yuvDragSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragSelectChange: "dragSelectChange", dragSelect: "dragSelect" }, host: { listeners: { "pointerdown": "onPointerDown($event)" } }, queries: [{ propertyName: "items", predicate: DragSelectItemDirective, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvDragSelect]',
-                    standalone: true
+                    host: {
+                        '(pointerdown)': 'onPointerDown($event)'
+                    }
                 }]
-        }], propDecorators: { onPointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }] } });
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DragSelectItemDirective), { isSignal: true }] }], yuvDragSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvDragSelect", required: false }] }], dragSelectChange: [{ type: i0.Output, args: ["dragSelectChange"] }], dragSelect: [{ type: i0.Output, args: ["dragSelect"] }] } });
 class DragSelectItemDirective {
     constructor() {
         this.#elRef = inject(ElementRef);
         this.el = this.#elRef.nativeElement;
     }
     #elRef;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DragSelectItemDirective, isStandalone: true, selector: "[yuvDragSelectItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: DragSelectItemDirective, isStandalone: true, selector: "[yuvDragSelectItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DragSelectItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragSelectItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvDragSelectItem]',
@@ -703,15 +681,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
 class FileDropService {
     constructor() {
-        this.activeDropZone = signal(null);
+        this.activeDropZone = signal(null, ...(ngDevMode ? [{ debugName: "activeDropZone" }] : []));
     }
     fileOver(id, active) {
         this.activeDropZone.set(active ? id : null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FileDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FileDropService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileDropService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FileDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileDropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -728,10 +706,10 @@ class FileDropZoneDirective {
             const fileOver = this.#fileDropService.activeDropZone() === this.#id;
             this.fileDropOver.emit(fileOver);
             return fileOver;
-        });
+        }, ...(ngDevMode ? [{ debugName: "active" }] : []));
         this.#activeEffect = effect(() => {
             this.#toggleCover(this.active());
-        });
+        }, ...(ngDevMode ? [{ debugName: "#activeEffect" }] : []));
         this.#defaultDragOverCoverStyles = {
             // outline: '2px dashed var(--ymt-primary)',
             display: 'flex',
@@ -748,8 +726,8 @@ class FileDropZoneDirective {
             'background-color': 'rgb(from var(--ymt-primary) r g b / 0.9)',
             color: 'var(--ymt-on-primary)'
         };
-        this.yuvFileDropZone = input();
-        this.fileDropDisabled = input(false);
+        this.yuvFileDropZone = input(...(ngDevMode ? [undefined, { debugName: "yuvFileDropZone" }] : []));
+        this.fileDropDisabled = input(false, ...(ngDevMode ? [{ debugName: "fileDropDisabled" }] : []));
         this.fileDrop = output();
         this.fileDropOver = output();
     }
@@ -847,31 +825,22 @@ class FileDropZoneDirective {
         }
         return coverElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FileDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: FileDropZoneDirective, isStandalone: true, selector: "[yuvFileDropZone]", inputs: { yuvFileDropZone: { classPropertyName: "yuvFileDropZone", publicName: "yuvFileDropZone", isSignal: true, isRequired: false, transformFunction: null }, fileDropDisabled: { classPropertyName: "fileDropDisabled", publicName: "fileDropDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDrop: "fileDrop", fileDropOver: "fileDropOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "body:dragover": "onBodyDragOver($event)", "body:drop": "onBodyDrop($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: FileDropZoneDirective, isStandalone: true, selector: "[yuvFileDropZone]", inputs: { yuvFileDropZone: { classPropertyName: "yuvFileDropZone", publicName: "yuvFileDropZone", isSignal: true, isRequired: false, transformFunction: null }, fileDropDisabled: { classPropertyName: "fileDropDisabled", publicName: "fileDropDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDrop: "fileDrop", fileDropOver: "fileDropOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "body:dragover": "onBodyDragOver($event)", "body:drop": "onBodyDrop($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FileDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvFileDropZone]',
-                    standalone: true
+                    host: {
+                        '(drop)': 'onDrop($event)',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(body:dragover)': 'onBodyDragOver($event)',
+                        '(body:drop)': 'onBodyDrop($event)'
+                    }
                 }]
-        }], propDecorators: { onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }], onBodyDragOver: [{
-                type: HostListener,
-                args: ['body:dragover', ['$event']]
-            }], onBodyDrop: [{
-                type: HostListener,
-                args: ['body:drop', ['$event']]
-            }] } });
+        }], propDecorators: { yuvFileDropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvFileDropZone", required: false }] }], fileDropDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileDropDisabled", required: false }] }], fileDrop: [{ type: i0.Output, args: ["fileDrop"] }], fileDropOver: [{ type: i0.Output, args: ["fileDropOver"] }] } });
 
 /**
  * Directive keeping track of the focus beeing within a component. Once the component or
@@ -910,11 +879,11 @@ class FocusWithinDirective {
         /**
          * Emitted once the component or any of its child components gains focus.
          */
-        this.yuvFocusWithin = new EventEmitter();
+        this.yuvFocusWithin = output();
         /**
          * Emitted once the component (incl. any of its child components) looses focus.
          */
-        this.yuvFocusWithinBlur = new EventEmitter();
+        this.yuvFocusWithinBlur = output();
     }
     // Determine if the given node matches the given selector.
     // @see: https://www.bennadel.com/blog/3476-checking-to-see-if-an-element-has-a-css-pseudo-class-in-javascript.htm
@@ -928,29 +897,20 @@ class FocusWithinDirective {
             return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FocusWithinDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: FocusWithinDirective, isStandalone: true, selector: "[yuvFocusWithin]", outputs: { yuvFocusWithin: "yuvFocusWithin", yuvFocusWithinBlur: "yuvFocusWithinBlur" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)" }, properties: { "class.focusWithin": "this.hasFocusWithin" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FocusWithinDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FocusWithinDirective, isStandalone: true, selector: "[yuvFocusWithin]", outputs: { yuvFocusWithin: "yuvFocusWithin", yuvFocusWithinBlur: "yuvFocusWithinBlur" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)" }, properties: { "class.focusWithin": "hasFocusWithin" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FocusWithinDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FocusWithinDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvFocusWithin]',
-                    standalone: true
+                    host: {
+                        '[class.focusWithin]': 'hasFocusWithin',
+                        '(focusin)': 'onFocusIn($event)',
+                        '(focusout)': 'onFocusOut($event)'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasFocusWithin: [{
-                type: HostBinding,
-                args: ['class.focusWithin']
-            }], onFocusIn: [{
-                type: HostListener,
-                args: ['focusin', ['$event']]
-            }], onFocusOut: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
-            }], yuvFocusWithin: [{
-                type: Output
-            }], yuvFocusWithinBlur: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { yuvFocusWithin: [{ type: i0.Output, args: ["yuvFocusWithin"] }], yuvFocusWithinBlur: [{ type: i0.Output, args: ["yuvFocusWithinBlur"] }] } });
 
 /**
  * Directive for applying light dismiss actions. Adding this directive will trigger
@@ -977,22 +937,19 @@ class LightDismissDirective {
             this.yuvLightDismiss.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LightDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: LightDismissDirective, isStandalone: true, selector: "[yuvLightDismiss]", outputs: { yuvLightDismiss: "yuvLightDismiss" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LightDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LightDismissDirective, isStandalone: true, selector: "[yuvLightDismiss]", outputs: { yuvLightDismiss: "yuvLightDismiss" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LightDismissDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LightDismissDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvLightDismiss]',
-                    standalone: true
+                    host: {
+                        '(document:keydown.escape)': 'onKeydownHandler($event)',
+                        '(document:mousedown)': 'onMousedown($event)'
+                    }
                 }]
-        }], propDecorators: { onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }], onMousedown: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
-            }] } });
+        }], propDecorators: { yuvLightDismiss: [{ type: i0.Output, args: ["yuvLightDismiss"] }] } });
 
 class LongPressDirective {
     constructor() {
@@ -1000,7 +957,7 @@ class LongPressDirective {
         this.threshold = 500;
         this.yuvLongPress = input({
             enabled: false
-        });
+        }, ...(ngDevMode ? [{ debugName: "yuvLongPress" }] : []));
         this.longpress = output();
         const mousedown = fromEvent(this.elRef.nativeElement, 'mousedown').pipe(takeUntilDestroyed(), filter((event) => event.button == 0), // Only allow left button (Primary button)
         map(() => true) // turn on threshold counter
@@ -1014,16 +971,16 @@ class LongPressDirective {
             .pipe(takeUntilDestroyed(), switchMap((state) => (state ? timer(this.threshold, 100) : of(null))), filter((value) => !!value))
             .subscribe(() => this.longpress.emit());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: LongPressDirective, isStandalone: true, selector: "[yuvLongPress]", inputs: { yuvLongPress: { classPropertyName: "yuvLongPress", publicName: "yuvLongPress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { longpress: "longpress" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: LongPressDirective, isStandalone: true, selector: "[yuvLongPress]", inputs: { yuvLongPress: { classPropertyName: "yuvLongPress", publicName: "yuvLongPress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { longpress: "longpress" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LongPressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LongPressDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvLongPress]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { yuvLongPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvLongPress", required: false }] }], longpress: [{ type: i0.Output, args: ["longpress"] }] } });
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -1032,8 +989,8 @@ class NoopValueAccessorDirective {
     writeValue(obj) { }
     registerOnChange(fn) { }
     registerOnTouched(fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: NoopValueAccessorDirective, isStandalone: true, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NoopValueAccessorDirective, isStandalone: true, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1041,7 +998,7 @@ class NoopValueAccessorDirective {
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1092,7 +1049,7 @@ class ScrollButtonsDirective {
         this.#destroyRef = inject(DestroyRef);
         /** How many pixels to scroll per button click. */
         // eslint-disable-next-line @typescript-eslint/member-ordering
-        this.yuvScrollButtonsAmount = input(DEFAULT_SCROLL_AMOUNT);
+        this.yuvScrollButtonsAmount = input(DEFAULT_SCROLL_AMOUNT, ...(ngDevMode ? [{ debugName: "yuvScrollButtonsAmount" }] : []));
         afterNextRender(() => this.#init());
     }
     #init() {
@@ -1238,15 +1195,15 @@ class ScrollButtonsDirective {
             this.#renderer.setStyle(element, prop, value);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: ScrollButtonsDirective, isStandalone: true, selector: "[yuvScrollButtons]", inputs: { yuvScrollButtonsAmount: { classPropertyName: "yuvScrollButtonsAmount", publicName: "yuvScrollButtonsAmount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ScrollButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: ScrollButtonsDirective, isStandalone: true, selector: "[yuvScrollButtons]", inputs: { yuvScrollButtonsAmount: { classPropertyName: "yuvScrollButtonsAmount", publicName: "yuvScrollButtonsAmount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollButtonsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ScrollButtonsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvScrollButtons]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { yuvScrollButtonsAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvScrollButtonsAmount", required: false }] }] } });
 
 const directives = [
     BusyOverlayDirective,
@@ -1265,8 +1222,8 @@ const directives = [
 ];
 const components = [ConfirmComponent, ScrollButtonsComponent];
 class YuvCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuvCommonModule, imports: [BusyOverlayDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvCommonModule, imports: [BusyOverlayDirective,
             FocusWithinDirective,
             FileDropZoneDirective,
             ClickDoubleDirective,
@@ -1291,9 +1248,9 @@ class YuvCommonModule {
             AutofocusChildDirective,
             AutofocusDelayedDirective,
             ScrollButtonsDirective, ConfirmComponent, ScrollButtonsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvCommonModule, imports: [components] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvCommonModule, imports: [components] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...directives, ...components],
@@ -1325,7 +1282,7 @@ class LayoutSettingsService {
         /**
          * @deprecated Use `ThemeService.mode` instead.
          */
-        this.themeMode = signal('system');
+        this.themeMode = signal('system', ...(ngDevMode ? [{ debugName: "themeMode" }] : []));
         /**
          * @deprecated Use `ThemeService.mode` instead.
          */
@@ -1389,10 +1346,10 @@ class LayoutSettingsService {
         body.style.colorScheme = mode === 'dark' || mode === 'light' ? mode : 'inherit';
         this.themeMode.set(mode || 'system');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LayoutSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LayoutSettingsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LayoutSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LayoutSettingsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LayoutSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LayoutSettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1457,10 +1414,10 @@ class FormTranslateService {
                 return this.translate.instant(error, params);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormTranslateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormTranslateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FormTranslateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormTranslateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1513,9 +1470,9 @@ class ThemeService {
         this.#MODE_STORAGE_KEY = ThemeStorageKeys.THEME_MODE;
         this.#CUSTOM_THEME_STORAGE_KEY = ThemeStorageKeys.CUSTOM_THEME;
         this.#renderer = this.#rendererFactory.createRenderer(null, null);
-        this.#mode = signal('light');
+        this.#mode = signal('light', ...(ngDevMode ? [{ debugName: "#mode" }] : []));
         this.mode = this.#mode.asReadonly();
-        this.customTheme = signal(DEFAULT_THEME);
+        this.customTheme = signal(DEFAULT_THEME, ...(ngDevMode ? [{ debugName: "customTheme" }] : []));
         this.customThemes = computed(() => {
             const customThemesToken = this.#customThemesToken || [];
             return customThemesToken.map((theme) => {
@@ -1528,10 +1485,10 @@ class ThemeService {
                     hasDarkTheme: hasDarkTheme ?? false
                 };
             });
-        });
-        this.#currentTheme = signal(DEFAULT_THEME_KEY);
+        }, ...(ngDevMode ? [{ debugName: "customThemes" }] : []));
+        this.#currentTheme = signal(DEFAULT_THEME_KEY, ...(ngDevMode ? [{ debugName: "#currentTheme" }] : []));
         this.currentTheme = this.#currentTheme.asReadonly();
-        this.#disableMode = signal(false);
+        this.#disableMode = signal(false, ...(ngDevMode ? [{ debugName: "#disableMode" }] : []));
         this.disableMode = this.#disableMode.asReadonly();
         // Effect to apply classes and save to localStorage
         this.#setThemeModeEffect = effect(() => {
@@ -1548,7 +1505,7 @@ class ThemeService {
             else {
                 this.#renderer.removeAttribute(body, 'style');
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#setThemeModeEffect" }] : []));
         this.#initializeModes();
     }
     #saveSettings(key, settings) {
@@ -1639,10 +1596,10 @@ class ThemeService {
     toggleTheme(theme) {
         this.#mode.set(theme);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1659,16 +1616,16 @@ class AbstractMatFormField {
     constructor() {
         this.stateChanges = new Subject();
         this.elRef = inject(ElementRef);
-        this.#value = signal(null);
-        this.#id = signal('');
-        this.#placeholder = signal('');
+        this.#value = signal(null, ...(ngDevMode ? [{ debugName: "#value" }] : []));
+        this.#id = signal('', ...(ngDevMode ? [{ debugName: "#id" }] : []));
+        this.#placeholder = signal('', ...(ngDevMode ? [{ debugName: "#placeholder" }] : []));
         this.ngControl = null;
-        this.#focused = signal(false);
-        this.#empty = signal(false);
-        this.#required = signal(false);
-        this.#disabled = signal(false);
-        this.focusHandled = signal(false);
-        this.#errorState = signal(false);
+        this.#focused = signal(false, ...(ngDevMode ? [{ debugName: "#focused" }] : []));
+        this.#empty = signal(false, ...(ngDevMode ? [{ debugName: "#empty" }] : []));
+        this.#required = signal(false, ...(ngDevMode ? [{ debugName: "#required" }] : []));
+        this.#disabled = signal(false, ...(ngDevMode ? [{ debugName: "#disabled" }] : []));
+        this.focusHandled = signal(false, ...(ngDevMode ? [{ debugName: "focusHandled" }] : []));
+        this.#errorState = signal(false, ...(ngDevMode ? [{ debugName: "#errorState" }] : []));
     }
     onFocusIn() {
         this.focused = true;
@@ -1763,19 +1720,19 @@ class AbstractMatFormField {
     onNgOnDestroy() {
         this.stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AbstractMatFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AbstractMatFormField, isStandalone: true, selector: "ng-component", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusout()" } }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AbstractMatFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: AbstractMatFormField, isStandalone: true, selector: "ng-component", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusout()" } }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AbstractMatFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AbstractMatFormField, decorators: [{
             type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { onFocusIn: [{
-                type: HostListener,
-                args: ['focusin']
-            }], onFocusout: [{
-                type: HostListener,
-                args: ['focusout']
-            }], placeholder: [{
+            args: [{
+                    template: '',
+                    host: {
+                        '(focusin)': 'onFocusIn()',
+                        '(focusout)': 'onFocusout()'
+                    }
+                }]
+        }], propDecorators: { placeholder: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -1795,19 +1752,19 @@ var DialogSize;
 class RetentionBadgeComponent {
     constructor() {
         this.#retention = inject(RetentionService);
-        this.dmsObject = input.required();
+        this.dmsObject = input.required(...(ngDevMode ? [{ debugName: "dmsObject" }] : []));
         this.retentionData = computed(() => {
             return this.#retention.getRetentionState(this.dmsObject());
-        });
+        }, ...(ngDevMode ? [{ debugName: "retentionData" }] : []));
     }
     #retention;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RetentionBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RetentionBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-retention-badge', standalone: true, imports: [CommonModule, TranslateModule$1, LocaleDatePipe, MatIconModule], template: "@let rd = retentionData();\n@if (rd.underRetention) {\n  <div class=\"badge\">\n    <span class=\"badge__icon\">\n      <mat-icon class=\"ymt-icon--size-s\">lock_clock</mat-icon>\n    </span>\n    <span class=\"badge__label\">\n      <span class=\"badge__label-truncated\">\n        {{\n          'yuv.retention-badge.retain'\n            | translate\n              : {\n                  from: rd.start | localeDate: 'shortDate',\n                  until: rd.end | localeDate: 'shortDate'\n                }\n        }}\n      </span>\n    </span>\n  </div>\n}\n", styles: [":host{display:contents}:host .badge{font:var(--ymt-font-body-subtle);color:var(--badge-retention-color, var(--ymt-on-surface));display:inline-flex;overflow:hidden;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);background-color:var(--badge-retention-background, var(--ymt-primary-container));border-radius:var(--ymt-corner-full);gap:var(--ymt-spacing-s)}:host .badge__icon{flex-shrink:0;color:var(--badge-retention-icon-color, var(--ymt-on-primary-container));display:flex;align-items:center;justify-content:center}:host .badge__label{color:var(--badge-retention-color, var(--ymt-on-surface));align-self:stretch;display:flex;align-items:center;justify-content:center;border-top-right-radius:var(--ymt-corner-full);border-bottom-right-radius:var(--ymt-corner-full);overflow:hidden}:host .badge__label-truncated{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"] }]
-        }] });
+            args: [{ selector: 'yuv-retention-badge', standalone: true, imports: [TranslatePipe$1, LocaleDatePipe, MatIconModule], template: "@let rd = retentionData();\n@if (rd.underRetention) {\n  <div class=\"badge\">\n    <span class=\"badge__icon\">\n      <mat-icon class=\"ymt-icon--size-s\">lock_clock</mat-icon>\n    </span>\n    <span class=\"badge__label\">\n      <span class=\"badge__label-truncated\">\n        {{\n          'yuv.retention-badge.retain'\n            | translate\n              : {\n                  from: rd.start | localeDate: 'shortDate',\n                  until: rd.end | localeDate: 'shortDate'\n                }\n        }}\n      </span>\n    </span>\n  </div>\n}\n", styles: [":host{display:contents}:host .badge{font:var(--ymt-font-body-subtle);color:var(--badge-retention-color, var(--ymt-on-surface));display:inline-flex;overflow:hidden;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-s) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);background-color:var(--badge-retention-background, var(--ymt-primary-container));border-radius:var(--ymt-corner-full);gap:var(--ymt-spacing-s)}:host .badge__icon{flex-shrink:0;color:var(--badge-retention-icon-color, var(--ymt-on-primary-container));display:flex;align-items:center;justify-content:center}:host .badge__label{color:var(--badge-retention-color, var(--ymt-on-surface));align-self:stretch;display:flex;align-items:center;justify-content:center;border-top-right-radius:var(--ymt-corner-full);border-bottom-right-radius:var(--ymt-corner-full);overflow:hidden}:host .badge__label-truncated{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"] }]
+        }], propDecorators: { dmsObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "dmsObject", required: true }] }] } });
 
 class ConfirmService {
     #dialog = inject(MatDialog);
@@ -1817,10 +1774,10 @@ class ConfirmService {
             .afterClosed()
             .pipe(map((result) => !!result));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConfirmService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1828,12 +1785,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }] });
 
 class HaloFocusComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: HaloFocusComponent, isStandalone: true, selector: "yuv-halo-focus", ngImport: i0, template: "<p>halo-focus works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: HaloFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: HaloFocusComponent, isStandalone: true, selector: "yuv-halo-focus", ngImport: i0, template: "<p>halo-focus works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HaloFocusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: HaloFocusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-halo-focus', imports: [CommonModule], template: "<p>halo-focus works!</p>\n" }]
+            args: [{ selector: 'yuv-halo-focus', imports: [], template: "<p>halo-focus works!</p>\n" }]
         }] });
 
 /**