@yuuvis/client-framework 3.0.0-beta.21.0 → 3.0.0-beta.21.2

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

@@ -1,1801 +1,11 @@
-import * as i0 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 i1 from '@angular/material/dialog';
-import { MatDialogActions, MatDialogTitle, MatDialogContent, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import { TranslatePipe, AppCacheService, RetentionService, LocaleDatePipe } from '@yuuvis/client-core';
-import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import * as i1$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslatePipe as TranslatePipe$1, TranslateService } from '@ngx-translate/core';
-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';
-import { debounceTime, tap, filter, switchMap, map, takeUntil } from 'rxjs/operators';
-import { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
-import { marker } from '@colsen1991/ngx-translate-extract-marker';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-
-class DialogComponent {
-    constructor() {
-        this.headertitle = input(null, ...(ngDevMode ? [{ debugName: "headertitle" }] : /* istanbul ignore next */ []));
-        /**
-         * @deprecated use headertitle instead
-         */
-        this.headertitel = input(null, ...(ngDevMode ? [{ debugName: "headertitel" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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>
-    }
-    <mat-dialog-content>
-      <ng-content select="main" />
-    </mat-dialog-content>
-
-    <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: "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: "21.2.9", ngImport: i0, type: DialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-dialog', imports: [MatDialogActions, MatDialogTitle, MatDialogContent], template: `
-    @let title = headertitle() ?? headertitel();
-    @if (title) {
-      <h2 mat-dialog-title>{{ title }}</h2>
-    }
-    <mat-dialog-content>
-      <ng-content select="main" />
-    </mat-dialog-content>
-
-    <mat-dialog-actions align="end" class="footer">
-      <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() {
-        this.dialogData = inject(MAT_DIALOG_DATA);
-        this.buttonType = computed(() => {
-            switch (this.dialogData.level) {
-                case 'warning':
-                    return 'danger';
-                // case 'warning':
-                //   return 'tertiary' as ButtonType;
-                // case 'info':
-                //   return 'primary' as ButtonType;
-                // case 'success':
-                //   return 'primary' as ButtonType;
-                default:
-                    return 'primary';
-            }
-        }, ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-confirm', imports: [MatButtonModule, TranslatePipe, 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;
-/**
- * Wrapper component that adds left/right scroll buttons when its content overflows horizontally.
- * Buttons appear only when there is overflow in the respective direction.
- *
- * @example
- * <yuv-scroll-buttons>
- *   <mat-chip-grid>...</mat-chip-grid>
- * </yuv-scroll-buttons>
- */
-class ScrollButtonsComponent {
-    #destroyRef;
-    #resizeObserver;
-    constructor() {
-        this.#destroyRef = inject(DestroyRef);
-        this.scrollContainer = viewChild.required('scrollContainer');
-        /** How many pixels to scroll per button click. */
-        this.scrollAmount = input(DEFAULT_SCROLL_AMOUNT$1, ...(ngDevMode ? [{ debugName: "scrollAmount" }] : /* istanbul ignore next */ []));
-        this.showLeftButton = signal(false, ...(ngDevMode ? [{ debugName: "showLeftButton" }] : /* istanbul ignore next */ []));
-        this.showRightButton = signal(false, ...(ngDevMode ? [{ debugName: "showRightButton" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => {
-            const element = this.scrollContainer().nativeElement;
-            this.#resizeObserver = new ResizeObserver(() => this.#checkOverflow());
-            this.#resizeObserver.observe(element);
-            // Also observe mutations to detect when children (chips) are added/removed
-            const mutationObserver = new MutationObserver(() => this.#checkOverflow());
-            mutationObserver.observe(element, { childList: true, subtree: true });
-            this.#destroyRef.onDestroy(() => {
-                this.#resizeObserver?.disconnect();
-                mutationObserver.disconnect();
-            });
-            this.#checkOverflow();
-        });
-    }
-    onScroll() {
-        this.#checkOverflow();
-    }
-    scrollLeft() {
-        this.scrollContainer().nativeElement.scrollBy({ left: -this.scrollAmount(), behavior: 'smooth' });
-    }
-    scrollRight() {
-        this.scrollContainer().nativeElement.scrollBy({ left: this.scrollAmount(), behavior: 'smooth' });
-    }
-    #checkOverflow() {
-        const element = this.scrollContainer().nativeElement;
-        const threshold = 1; // account for sub-pixel rounding
-        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: "21.2.9", ngImport: i0, type: ScrollButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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$1, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollButtonsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-scroll-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, TranslatePipe$1], 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.
- * By default the first focusable child will receive focus.
- */
-class AutofocusChildDirective {
-    #elRef = inject(ElementRef);
-    #targetIndex = 0;
-    set yuvAutofocusChild(s) {
-        const i = parseInt(s);
-        this.#targetIndex = !isNaN(i) ? i : 0;
-    }
-    #getFirstFocusableChild() {
-        const focusableElements = [
-            ...this.#elRef.nativeElement.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')
-        ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-        return focusableElements[this.#targetIndex];
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            const focusEl = this.#getFirstFocusableChild();
-            if (focusEl)
-                focusEl.focus();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusChildDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AutofocusChildDirective, isStandalone: true, selector: "[yuvAutofocusChild]", inputs: { yuvAutofocusChild: "yuvAutofocusChild" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusChildDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvAutofocusChild]',
-                    standalone: true
-                }]
-        }], propDecorators: { yuvAutofocusChild: [{
-                type: Input
-            }] } });
-
-/**
- * Directive putting delayed focus on an element. If no
- * delay is set, the focus will be set immediately.
- *
- * You have to ensure that the element is focusable when adding this directive to it.
- */
-class AutofocusDelayedDirective {
-    constructor() {
-        this.#elRef = inject(ElementRef);
-        /**
-         * Sets the delay in milliseconds. If no delay is set, the focus will be set immediately.
-         */
-        this.yuvAutofocusDelayed = input(0, ...(ngDevMode ? [{ debugName: "yuvAutofocusDelayed" }] : /* istanbul ignore next */ []));
-        this.#delay = computed(() => {
-            const d = this.yuvAutofocusDelayed();
-            return typeof d === 'string' ? parseInt(d) : d;
-        }, ...(ngDevMode ? [{ debugName: "#delay" }] : /* istanbul ignore next */ []));
-    }
-    #elRef;
-    #delay;
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.#elRef.nativeElement.focus();
-        }, this.#delay());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusDelayedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", 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(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
-        this.error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-        this.errorDismiss = output();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:host{--mat-progress-spinner-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: "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: "21.2.9", ngImport: i0, type: BusyOverlayComponent, decorators: [{
-            type: Component,
-            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{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:host{--mat-progress-spinner-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"] }]
-        }], 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"] }] } });
+export * from '@yuuvis/client-components/common';
 
 /**
- * A directive that will overlay its host component with a translucent background
- * and a loading spinner once the condition resolves with true. This is useful for example to
- * prevent user interaction while component data is loading or some processing is done.
- *
- * It'll also prevent the overlaid element from being interacted with.
- *
- * ```html
- * <div class="data-panel" [yuvBusyOverlay]="isLoadingData">...</div>
- * ```
- * Setting a `yuvBusyError` will replace the loading spinner by the provided error message.
- * You need to keep the `yuvBusyOverlay` condition true to show the error.
- * The error element rendered has a dismiss/close action that trigger the `yuvBusyErrorDismiss`
- * output event, that you then can use to set the busy condition to false.
- *
- * ```html
- * <div class="result-list"
- * [yuvBusyOverlay]="waitingForServerResponse"
- * (yuvBusyErrorDismiss)="waitingForServerResponse = false"
- * [yuvBusyError]="errorMessage">
- *  ...
- * </div>
- * ```
- *
- * ```ts
- * // in your component code
- * this.waitingForServerResponse = true;
- * fetchData().subscribe({
- *   next: (data) => {
- *    ...
- *   this.waitingForServerResponse = false;
- *  }
- *  error: (err) => {
- *    this.errorMessage = 'Failed to load data from server: ' + err.message;
- *  }
- * });
- * ```
- *
+ * @deprecated Import from `@yuuvis/client-components/common` instead.
+ * This entry point is a backward-compatibility shim and will be removed in a future release.
  */
-class BusyOverlayDirective {
-    constructor() {
-        this.#initialStylePosition = signal('initial', ...(ngDevMode ? [{ debugName: "#initialStylePosition" }] : /* istanbul ignore next */ []));
-        this.stylePosition = signal(this.#initialStylePosition(), ...(ngDevMode ? [{ debugName: "stylePosition" }] : /* istanbul ignore next */ []));
-        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, ...(ngDevMode ? [{ debugName: "yuvBusyOverlay" }] : /* istanbul ignore next */ []));
-        this.#yuvBusyOverlayEffect = effect(() => {
-            const busy = this.yuvBusyOverlay();
-            if (busy === true) {
-                this.#addBusyOverlay();
-            }
-            else {
-                this.#removeBusyOverlay();
-            }
-        }, ...(ngDevMode ? [{ debugName: "#yuvBusyOverlayEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Configuration options for the busy overlay. These include
-         * e.g. backdrops background color and whether to blur the
-         * overlaid content.
-         */
-        this.yuvBusyOverlayConfig = input(...(ngDevMode ? [undefined, { debugName: "yuvBusyOverlayConfig" }] : /* istanbul ignore next */ []));
-        /**
-         * Error message to display in the overlay. If set, the loading spinner is replaced by the error message.
-         */
-        this.yuvBusyError = input(...(ngDevMode ? [undefined, { debugName: "yuvBusyError" }] : /* istanbul ignore next */ []));
-        this.#yuvBusyErrorEffect = effect(() => this.#busyOverlayComponentRef?.setInput('error', this.yuvBusyError()), ...(ngDevMode ? [{ debugName: "#yuvBusyErrorEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Event emitted when the error message's dismiss action is triggered.
-         */
-        this.yuvBusyErrorDismiss = output();
-        this.#outputSubscriptions = [];
-    }
-    #initialStylePosition;
-    #elRef;
-    #environmentInjector;
-    #vcRef;
-    #yuvBusyOverlayEffect;
-    #yuvBusyErrorEffect;
-    #busyOverlayComponentRef;
-    #outputSubscriptions;
-    #attachOverlay() {
-        if (this.#busyOverlayComponentRef) {
-            // Already attached; just refresh inputs/outputs
-            this.#applyInputs();
-            return;
-        }
-        // Create the component inside the directive’s host
-        this.#busyOverlayComponentRef = this.#vcRef.createComponent(BusyOverlayComponent, {
-            environmentInjector: this.#environmentInjector
-        });
-        const node = this.#busyOverlayComponentRef.location.nativeElement;
-        this.#elRef.nativeElement.appendChild(node);
-        this.#applyInputs();
-        this.#bindOutputs();
-        this.#busyOverlayComponentRef.changeDetectorRef?.detectChanges?.();
-    }
-    #detachOverlay() {
-        // Unsubscribe outputs first
-        this.#outputSubscriptions.forEach((sub) => sub.unsubscribe());
-        this.#outputSubscriptions = [];
-        // Destroy componentRef and clear container
-        if (this.#busyOverlayComponentRef) {
-            this.#busyOverlayComponentRef.destroy();
-            this.#busyOverlayComponentRef = undefined;
-        }
-        this.#vcRef.clear();
-    }
-    #applyInputs() {
-        if (!this.#busyOverlayComponentRef)
-            return;
-        this.#busyOverlayComponentRef.setInput('config', this.yuvBusyOverlayConfig());
-        this.#busyOverlayComponentRef.setInput('error', this.yuvBusyError());
-    }
-    #bindOutputs() {
-        if (!this.#busyOverlayComponentRef)
-            return;
-        // Clean up old subscriptions if re-binding
-        this.#outputSubscriptions.forEach((sub) => sub.unsubscribe());
-        this.#outputSubscriptions = [];
-        const errorDismissOutput = this.#busyOverlayComponentRef.instance.errorDismiss;
-        this.#outputSubscriptions.push(errorDismissOutput.subscribe(() => this.yuvBusyErrorDismiss.emit()));
-    }
-    #addBusyOverlay() {
-        this.stylePosition.set('relative');
-        this.#attachOverlay();
-    }
-    #removeBusyOverlay() {
-        if (!this.#busyOverlayComponentRef)
-            return;
-        const el = this.#busyOverlayComponentRef.location.nativeElement;
-        if (el) {
-            el.style.opacity = '0';
-            setTimeout(() => {
-                this.#detachOverlay();
-                this.stylePosition.set(this.#initialStylePosition());
-            }, 200);
-        }
-    }
-    ngOnInit() {
-        const initialPosition = getComputedStyle(this.#elRef.nativeElement).position;
-        this.#initialStylePosition.set(initialPosition === 'static' || !initialPosition ? 'relative' : initialPosition);
-    }
-    ngOnDestroy() {
-        this.#detachOverlay();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: BusyOverlayDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvBusyOverlay]',
-                    standalone: true,
-                    host: {
-                        '[attr.aria-busy]': 'yuvBusyOverlay() ? "true" : "false"',
-                        '[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
- * distinguish between single and double click.
- */
-class ClickDoubleDirective {
-    constructor() {
-        this.debounceTime = input(200, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
-        this.doubleClick = output({ alias: 'click.double' });
-        this.singleClick = output({ alias: 'click.single' });
-        this.clicksSubject = new Subject();
-        this.clicksSubject.pipe(takeUntilDestroyed(), debounceTime(this.debounceTime())).subscribe({
-            next: (event) => {
-                event.type === 'click' ? this.singleClick.emit(event) : this.doubleClick.emit(event);
-            }
-        });
-    }
-    clickEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clicksSubject.next(event);
-    }
-    doubleClickEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clicksSubject.next(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClickDoubleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: ClickDoubleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[click.single],[click.double]',
-                    host: {
-                        '(click)': 'clickEvent($event)',
-                        '(dblclick)': 'doubleClickEvent($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
- * a different layout (different components) depending on the available screen estate. You
- * should first try to use CSS container queries but somtimes you need a different set of
- * components to be loaded for a certain component size.
- *
- * Let's say you have components designed for bigger screens. You do not want to load them
- * if there is not enough space for them. So you rather load components that are designed to
- * take less space by providing the best user experience on smaller devices.
- *
- * ```html
- * <div yuvContainerSize (containerHeight)="onContainerResize($event)" (containerWidth)="onContainerResize($event)"></div>
- * ```
- *
- */
-class ContainerSizeDirective {
-    constructor() {
-        this.elRef = inject(ElementRef);
-        this.ngZone = inject(NgZone);
-        this.containerHeight = output();
-        this.containerWidth = output();
-        this._resizeObserver = new ResizeObserver((entries) => {
-            const size = entries[0].borderBoxSize[0];
-            if (!this._size || size.blockSize !== this._size.blockSize) {
-                this._emit(size.blockSize, true);
-            }
-            if (!this._size || size.inlineSize !== this._size.inlineSize) {
-                this._emit(size.inlineSize);
-            }
-            this._size = size;
-        });
-        this._resizeObserver.observe(this.elRef.nativeElement);
-    }
-    _emit(value, isHeight = false) {
-        // ResizeObserver callback is not covered by change detection
-        // so it has to be executed withing ngZone
-        this.ngZone.run(() => {
-            (isHeight ? this.containerHeight : this.containerWidth).emit(value);
-        });
-    }
-    ngOnDestroy() {
-        this._resizeObserver.unobserve(this.elRef.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ContainerSizeDirective, isStandalone: true, selector: "[yuvContainerSize]", outputs: { containerHeight: "containerHeight", containerWidth: "containerWidth" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContainerSizeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvContainerSize]',
-                    standalone: true
-                }]
-        }], 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
- * be 'scrollable' by dragging the list of children.
- *
- * @example
- * <div yuvDragScroll>
- *   <div class="tile">#1</div>
- *   <div class="tile">#2</div>
- *   <div class="tile">#3</div>
- *   ...
- * </div>
- */
-class DragScrollDirective {
-    #document = inject(DOCUMENT);
-    #element = inject(ElementRef);
-    #dragging = false;
-    #applyDraggingStyles(el, remove) {
-        const draggingStyles = {
-            cursor: 'grabbing'
-        };
-        Object.keys(draggingStyles).forEach((property) => {
-            if (remove) {
-                el.style.removeProperty(property);
-            }
-            else {
-                el.style.setProperty(property, draggingStyles[property]);
-            }
-        });
-    }
-    ngAfterViewInit() {
-        const nativeElement = this.#element.nativeElement;
-        const mouseDown$ = fromEvent(nativeElement, 'mousedown');
-        const mouseMove$ = fromEvent(this.#document, 'mousemove');
-        const mouseUp$ = fromEvent(this.#document, 'mouseup').pipe(tap((e) => {
-            if (this.#dragging) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.#dragging = false;
-                this.#applyDraggingStyles(nativeElement, true);
-            }
-        }));
-        const dragMove$ = mouseDown$.pipe(filter(() => 
-        // only calculate new scroll position if the container is actually overflowing
-        nativeElement.scrollHeight > nativeElement.clientHeight || nativeElement.scrollWidth > nativeElement.clientWidth), tap((startEvent) => {
-            this.#applyDraggingStyles(nativeElement);
-            startEvent.preventDefault();
-            startEvent.stopPropagation();
-        }), switchMap((startEvent) => {
-            this.#dragging = true;
-            const scrollPos = {
-                left: nativeElement.scrollLeft,
-                top: nativeElement.scrollTop
-            };
-            return mouseMove$.pipe(map((moveEvent) => {
-                moveEvent.preventDefault();
-                moveEvent.stopPropagation();
-                return {
-                    startEvent,
-                    moveEvent,
-                    scrollPos
-                };
-            }), takeUntil(mouseUp$));
-        }), tap(({ startEvent, moveEvent, scrollPos }) => {
-            const diffX = moveEvent.clientX - startEvent.clientX;
-            const diffY = moveEvent.clientY - startEvent.clientY;
-            nativeElement.scrollLeft = scrollPos.left - diffX;
-            nativeElement.scrollTop = scrollPos.top - diffY;
-        }));
-        dragMove$.subscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DragScrollDirective, isStandalone: true, selector: "[yuvDragScroll]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragScrollDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvDragScroll]'
-                }]
-        }] });
-
-class DragSelectDirective {
-    constructor() {
-        this.#selectStartX = 0;
-        this.#selectStartY = 0;
-        this.#selection = [];
-        this.items = contentChildren(DragSelectItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.#selectables = computed(() => this.items().map((item) => item.el), ...(ngDevMode ? [{ debugName: "#selectables" }] : /* istanbul ignore next */ []));
-        this.yuvDragSelect = input(...(ngDevMode ? [undefined, { debugName: "yuvDragSelect" }] : /* istanbul ignore next */ []));
-        this.dragSelectChange = output();
-        this.dragSelect = output();
-        this.#onPointerUp = () => {
-            removeEventListener('pointermove', this.#resize);
-            removeEventListener('pointerup', this.#onPointerUp);
-            if (this.#selection.length)
-                this.dragSelect.emit(this.#selection);
-            if (this.#selector)
-                this.#selector.remove();
-        };
-        this.#resize = (event) => {
-            if (!this.#selector)
-                return;
-            const diffX = event.pageX - this.#selectStartX;
-            const diffY = event.pageY - this.#selectStartY;
-            this.#selector.style.left = diffX < 0 ? this.#selectStartX + diffX + 'px' : this.#selectStartX + 'px';
-            this.#selector.style.top = diffY < 0 ? this.#selectStartY + diffY + 'px' : this.#selectStartY + 'px';
-            this.#selector.style.height = Math.abs(diffY) + 'px';
-            this.#selector.style.width = Math.abs(diffX) + 'px';
-            this.#selector.style.border = `1px solid ${this.yuvDragSelect()?.selectorColor || 'var(--ymt-primary'}`;
-            this.#checkSelected();
-        };
-        this.#checkSelected = () => {
-            if (!this.#selector)
-                return;
-            const select = this.#selector.getBoundingClientRect();
-            const { x, y, height, width } = select;
-            if (!height || !width)
-                return;
-            const currSelectionLength = this.#selection.length;
-            this.#selectables().forEach((selectable, idx) => {
-                const r1 = { x: x + window.scrollX, y: y + window.scrollY, height, width };
-                const r2 = selectable.getBoundingClientRect();
-                this.#selection = this.#selection.filter((s) => s !== idx);
-                if (this.#checkRectIntersection(r1, r2)) {
-                    this.#selection.push(idx);
-                }
-            });
-            if (currSelectionLength !== this.#selection.length) {
-                this.dragSelectChange.emit(this.#selection);
-            }
-        };
-        this.#checkRectIntersection = (r1, r2) => {
-            return !(r1.x + r1.width < r2.x || r2.x + r2.width < r1.x || r1.y + r1.height < r2.y || r2.y + r2.height < r1.y);
-        };
-    }
-    #selector;
-    #selectStartX;
-    #selectStartY;
-    #selection;
-    onPointerDown(event) {
-        if (this.yuvDragSelect()?.disabled || event.target.tagName === 'BUTTON')
-            return;
-        event.preventDefault();
-        this.#selectStartX = event.pageX;
-        this.#selectStartY = event.pageY;
-        const div = document.createElement('div');
-        div.style.position = 'absolute';
-        div.style.width = '0';
-        div.style.height = '0';
-        div.style.left = this.#selectStartX + 'px';
-        div.style.top = this.#selectStartY + 'px';
-        div.classList.add('drag-select');
-        this.#selector = div;
-        document.body.append(this.#selector);
-        this.#selection = [];
-        addEventListener('pointermove', this.#resize);
-        addEventListener('pointerup', this.#onPointerUp);
-    }
-    #selectables;
-    #onPointerUp;
-    #resize;
-    #checkSelected;
-    #checkRectIntersection;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: DragSelectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvDragSelect]',
-                    host: {
-                        '(pointerdown)': 'onPointerDown($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: "21.2.9", ngImport: i0, type: DragSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DragSelectItemDirective, isStandalone: true, selector: "[yuvDragSelectItem]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragSelectItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvDragSelectItem]',
-                    standalone: true
-                }]
-        }] });
-
-class FileDropService {
-    constructor() {
-        this.activeDropZone = signal(null, ...(ngDevMode ? [{ debugName: "activeDropZone" }] : /* istanbul ignore next */ []));
-    }
-    fileOver(id, active) {
-        this.activeDropZone.set(active ? id : null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class FileDropZoneDirective {
-    constructor() {
-        this.#elRef = inject(ElementRef);
-        this.#fileDropService = inject(FileDropService);
-        // ID to track the element
-        this.#id = crypto.randomUUID();
-        this.active = computed(() => {
-            const fileOver = this.#fileDropService.activeDropZone() === this.#id;
-            this.fileDropOver.emit(fileOver);
-            return fileOver;
-        }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-        this.#activeEffect = effect(() => {
-            this.#toggleCover(this.active());
-        }, ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
-        this.#defaultDragOverCoverStyles = {
-            // outline: '2px dashed var(--ymt-primary)',
-            display: 'flex',
-            transition: 'background-color .3s ease-in-out',
-            'z-index': '500',
-            'align-items': 'center',
-            'justify-content': 'center',
-            'outline-offset': '-2px',
-            'background-color': 'rgb(from var(--ymt-primary) r g b / .5)'
-        };
-        this.#defaultDragOverCoverLabelStyles = {
-            outline: '1px solid var(--ymt-primary)',
-            padding: 'var(--ymt-spacing-m, 16px)',
-            'background-color': 'rgb(from var(--ymt-primary) r g b / 0.9)',
-            color: 'var(--ymt-on-primary)'
-        };
-        this.yuvFileDropZone = input(...(ngDevMode ? [undefined, { debugName: "yuvFileDropZone" }] : /* istanbul ignore next */ []));
-        this.fileDropDisabled = input(false, ...(ngDevMode ? [{ debugName: "fileDropDisabled" }] : /* istanbul ignore next */ []));
-        this.fileDrop = output();
-        this.fileDropOver = output();
-    }
-    #elRef;
-    #fileDropService;
-    #coverElement;
-    // ID to track the element
-    #id;
-    #activeEffect;
-    #defaultDragOverCoverStyles;
-    #defaultDragOverCoverLabelStyles;
-    onDrop(event) {
-        if (this.fileDropDisabled())
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.#fileDropService.fileOver(this.#id, false);
-        const dataTransfer = event.dataTransfer;
-        if (dataTransfer) {
-            if (dataTransfer?.items) {
-                const files = [];
-                for (let i = 0; i < dataTransfer.items.length; i++) {
-                    // If dropped items aren't files, reject them
-                    if (dataTransfer.items[i].kind === 'file') {
-                        const file = dataTransfer.items[i].getAsFile();
-                        if (file)
-                            files.push(file);
-                    }
-                }
-                dataTransfer.items.clear();
-                this.fileDrop.emit(files);
-            }
-            else {
-                const files = dataTransfer.files;
-                dataTransfer.clearData();
-                this.fileDrop.emit(Array.from(files));
-            }
-        }
-    }
-    onDragOver(event) {
-        if (this.fileDropDisabled())
-            return;
-        event.stopPropagation();
-        event.preventDefault();
-        this.#fileDropService.fileOver(this.#id, true);
-    }
-    onDragLeave(event) {
-        if (this.fileDropDisabled())
-            return;
-        if (event.target.getAttribute('id') === this.#coverElement?.getAttribute('id')) {
-            this.#fileDropService.fileOver(this.#id, false);
-        }
-    }
-    onBodyDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    onBodyDrop(event) {
-        event.preventDefault();
-    }
-    #toggleCover(active) {
-        const el = this.#elRef.nativeElement;
-        if (this.#coverElement) {
-            el.style.position = 'initial';
-            this.#coverElement.remove();
-            this.#coverElement = undefined;
-        }
-        if (active) {
-            el.style.position = 'relative';
-            this.#coverElement = this.#createCoverElement();
-            el.append(this.#coverElement);
-        }
-    }
-    #createCoverElement() {
-        const coverElement = document.createElement('div');
-        coverElement.classList.add('yuv-file-drop-zone-cover');
-        coverElement.setAttribute('id', this.#id);
-        coverElement.style.position = 'absolute';
-        coverElement.style.inset = '0';
-        const styles = this.yuvFileDropZone()?.coverStyles || this.#defaultDragOverCoverStyles;
-        Object.keys(styles).forEach((k) => {
-            coverElement.style[k] = styles[k];
-        });
-        const label = this.yuvFileDropZone()?.label;
-        if (label) {
-            const coverLabelElement = document.createElement('div');
-            coverElement.classList.add('yuv-file-drop-zone-label');
-            coverLabelElement.innerText = label;
-            const labelStyles = this.yuvFileDropZone()?.coverLabelStyles || this.#defaultDragOverCoverLabelStyles;
-            Object.keys(labelStyles).forEach((k) => {
-                coverLabelElement.style[k] = labelStyles[k];
-            });
-            coverLabelElement.style.pointerEvents = 'none';
-            coverElement.append(coverLabelElement);
-        }
-        return coverElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: FileDropZoneDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvFileDropZone]',
-                    host: {
-                        '(drop)': 'onDrop($event)',
-                        '(dragover)': 'onDragOver($event)',
-                        '(dragleave)': 'onDragLeave($event)',
-                        '(body:dragover)': 'onBodyDragOver($event)',
-                        '(body:drop)': 'onBodyDrop($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
- * any of its child components gain focus, a class of `focusWithin` will be set on the
- * host component in order to allow styling it while beeing focused. Furthermore you can
- * register callbacks once the component gets or looses focus.
- *
- * @example
- * // just set the css class
- * <some-component yuvFocusWithin></some-component>
- * // set the css class and listen to focus changes
- * <some-component (yuvFocusWithin)="onFocusEnter()" (yuvFocusWithinBlur)="onFocusLeave()"></some-component>
- */
-class FocusWithinDirective {
-    onFocusIn(evt) {
-        const hadFocusWithin = this.hasFocusWithin;
-        this.hasFocusWithin = this.matchesFocusWithin();
-        if (!hadFocusWithin && this.hasFocusWithin) {
-            this.yuvFocusWithin.emit();
-        }
-    }
-    onFocusOut(evt) {
-        const hadFocusWithin = this.hasFocusWithin;
-        this.hasFocusWithin = this.matchesFocusWithin();
-        if (hadFocusWithin && !this.hasFocusWithin) {
-            this.yuvFocusWithinBlur.emit();
-        }
-    }
-    /**
-     * @ignore
-     */
-    constructor(elRef) {
-        this.elRef = elRef;
-        this.eventCount = 0;
-        this.hasFocusWithin = false;
-        /**
-         * Emitted once the component or any of its child components gains focus.
-         */
-        this.yuvFocusWithin = output();
-        /**
-         * Emitted once the component (incl. any of its child components) looses focus.
-         */
-        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
-    matchesFocusWithin() {
-        const node = this.elRef.nativeElement;
-        const nativeMatches = node.matches || node.msMatchesSelector;
-        try {
-            return nativeMatches.call(node, ':focus-within');
-        }
-        catch (error) {
-            return false;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FocusWithinDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: FocusWithinDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvFocusWithin]',
-                    host: {
-                        '[class.focusWithin]': 'hasFocusWithin',
-                        '(focusin)': 'onFocusIn($event)',
-                        '(focusout)': 'onFocusOut($event)'
-                    }
-                }]
-        }], 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
- * the given function when the user clicks outside the component or hits escape.
- *
- * ```ts
- * <div class="notifications" (yuvLightDismiss)="close()">
- *   ...
- * </div>
- * ```
- */
-class LightDismissDirective {
-    constructor() {
-        this.elRef = inject(ElementRef);
-        this.yuvLightDismiss = output();
-    }
-    onKeydownHandler(event) {
-        if (!event.defaultPrevented) {
-            this.yuvLightDismiss.emit();
-        }
-    }
-    onMousedown(event) {
-        if (!this.elRef.nativeElement.contains(event.target)) {
-            this.yuvLightDismiss.emit();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LightDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: LightDismissDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvLightDismiss]',
-                    host: {
-                        '(document:keydown.escape)': 'onKeydownHandler($event)',
-                        '(document:mousedown)': 'onMousedown($event)'
-                    }
-                }]
-        }], propDecorators: { yuvLightDismiss: [{ type: i0.Output, args: ["yuvLightDismiss"] }] } });
-
-class LongPressDirective {
-    constructor() {
-        this.elRef = inject(ElementRef);
-        this.threshold = 500;
-        this.yuvLongPress = input({
-            enabled: false
-        }, ...(ngDevMode ? [{ debugName: "yuvLongPress" }] : /* istanbul ignore next */ []));
-        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
-        );
-        const touchstart = fromEvent(this.elRef.nativeElement, 'touchstart').pipe(takeUntilDestroyed(), map(() => true));
-        const touchEnd = fromEvent(this.elRef.nativeElement, 'touchend').pipe(takeUntilDestroyed(), map(() => false));
-        const mouseup = fromEvent(window, 'mouseup').pipe(takeUntilDestroyed(), filter((event) => event.button == 0), // Only allow left button (Primary button)
-        map(() => false) // reset threshold counter
-        );
-        merge(mousedown, mouseup, touchstart, touchEnd)
-            .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: "21.2.9", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: LongPressDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvLongPress]',
-                    standalone: true
-                }]
-        }], 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 */
-// @see: https://netbasal.com/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
-class NoopValueAccessorDirective {
-    writeValue(obj) { }
-    registerOnChange(fn) { }
-    registerOnTouched(fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NoopValueAccessorDirective, isStandalone: true, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useExisting: forwardRef(() => NoopValueAccessorDirective)
-            }
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: forwardRef(() => NoopValueAccessorDirective)
-                        }
-                    ]
-                }]
-        }] });
-function injectNgControl(cva) {
-    const ngControl = inject(NgControl, { self: true, optional: true });
-    if (!ngControl)
-        return null;
-    if (ngControl instanceof FormControlDirective || ngControl instanceof FormControlName || ngControl instanceof NgModel) {
-        if (cva)
-            ngControl.valueAccessor = cva;
-        return ngControl;
-    }
-    throw new Error('...');
-}
-
-const DEFAULT_SCROLL_AMOUNT = 150;
-const THRESHOLD = 1;
-/**
- * Directive that adds left/right scroll buttons around the host element when its content overflows horizontally.
- * The directive restructures the DOM by wrapping the host inside a scroll container with navigation buttons.
- *
- * @example
- * <mat-chip-grid yuvScrollButtons>...</mat-chip-grid>
- *
- * @example
- * <div yuvScrollButtons [yuvScrollButtonsAmount]="200">...</div>
- */
-class ScrollButtonsDirective {
-    #renderer;
-    #elRef;
-    #destroyRef;
-    #leftBtn;
-    #rightBtn;
-    #scrollContent;
-    constructor() {
-        this.#renderer = inject(Renderer2);
-        this.#elRef = inject(ElementRef);
-        this.translate = inject(TranslateService);
-        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, ...(ngDevMode ? [{ debugName: "yuvScrollButtonsAmount" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => this.#init());
-    }
-    #init() {
-        const host = this.#elRef.nativeElement;
-        const parent = host.parentNode;
-        const renderer = this.#renderer;
-        // Create wrapper
-        const wrapper = renderer.createElement('div');
-        this.#applyStyles(wrapper, {
-            display: 'flex',
-            'align-items': 'center',
-            flex: '1',
-            'min-width': '0'
-        });
-        // Create scroll content container
-        this.#scrollContent = renderer.createElement('div');
-        this.#applyStyles(this.#scrollContent, {
-            flex: '1',
-            'overflow-x': 'auto',
-            'scrollbar-width': 'none',
-            'min-width': '0'
-        });
-        // Create buttons
-        this.#leftBtn = this.#createButton('chevron_left');
-        this.#rightBtn = this.#createButton('chevron_right');
-        // Restructure DOM: replace host with wrapper, move host into scroll content
-        renderer.insertBefore(parent, wrapper, host);
-        renderer.appendChild(this.#scrollContent, host);
-        renderer.appendChild(wrapper, this.#leftBtn);
-        renderer.appendChild(wrapper, this.#scrollContent);
-        renderer.appendChild(wrapper, this.#rightBtn);
-        // Apply chip-specific overrides
-        this.#applyChipOverrides(host);
-        // Hide buttons initially
-        this.#setButtonVisible(this.#leftBtn, false);
-        this.#setButtonVisible(this.#rightBtn, false);
-        // Set up listeners
-        this.#scrollContent.addEventListener('scroll', () => this.#checkOverflow(), { passive: true });
-        const resizeObserver = new ResizeObserver(() => this.#checkOverflow());
-        resizeObserver.observe(this.#scrollContent);
-        const mutationObserver = new MutationObserver(() => this.#checkOverflow());
-        mutationObserver.observe(this.#scrollContent, { childList: true, subtree: true });
-        this.#leftBtn.addEventListener('click', () => {
-            this.#scrollContent.scrollBy({ left: -this.yuvScrollButtonsAmount(), behavior: 'smooth' });
-        });
-        this.#rightBtn.addEventListener('click', () => {
-            this.#scrollContent.scrollBy({ left: this.yuvScrollButtonsAmount(), behavior: 'smooth' });
-        });
-        this.#destroyRef.onDestroy(() => {
-            resizeObserver.disconnect();
-            mutationObserver.disconnect();
-        });
-        this.#checkOverflow();
-    }
-    #createButton(icon) {
-        const btn = this.#renderer.createElement('button');
-        btn.setAttribute('aria-label', icon === 'chevron_left'
-            ? this.translate.instant('yuv.object-form-element.scroll.button.left')
-            : this.translate.instant('yuv.object-form-element.scroll.button.right'));
-        this.#applyStyles(btn, {
-            'flex-shrink': '0',
-            display: 'inline-flex',
-            'align-items': 'center',
-            'justify-content': 'center',
-            background: 'none',
-            border: 'none',
-            cursor: 'pointer',
-            padding: '0',
-            color: 'var(--ymt-text-color-subtle)',
-            width: 'var(--ymt-sizing-m)',
-            height: 'var(--ymt-sizing-m)',
-            backgroundColor: 'var(--ymt-surface-hover)'
-        });
-        const iconEl = this.#renderer.createElement('span');
-        iconEl.classList.add('material-symbols-sharp');
-        this.#applyStyles(iconEl, {
-            'font-size': '1.25rem', //calc(var(--ymt-sizing-s) * 0.8)
-            width: 'var(--ymt-sizing-s)',
-            height: 'var(--ymt-sizing-s)'
-        });
-        iconEl.textContent = icon;
-        this.#renderer.appendChild(btn, iconEl);
-        const highlight = () => {
-            btn.style.color = 'var(--ymt-text-color)';
-        };
-        const reset = () => {
-            btn.style.color = 'var(--ymt-text-color-subtle)';
-        };
-        btn.addEventListener('mouseenter', highlight);
-        btn.addEventListener('mouseleave', reset);
-        btn.addEventListener('focusin', highlight);
-        btn.addEventListener('focusout', reset);
-        // Focus-visible outline via CSS class
-        btn.addEventListener('focus', () => {
-            if (btn.matches(':focus-visible')) {
-                btn.style.outline = '2px solid var(--ymt-primary-color)';
-                btn.style.outlineOffset = '-2px';
-            }
-        });
-        btn.addEventListener('blur', () => {
-            btn.style.outline = '';
-            btn.style.outlineOffset = '';
-        });
-        return btn;
-    }
-    #applyChipOverrides(host) {
-        const chipSet = host.querySelector('.mdc-evolution-chip-set__chips');
-        if (chipSet) {
-            chipSet.style.flexWrap = 'nowrap';
-        }
-        // Use MutationObserver to apply overrides to chip rows as they appear
-        const applyRowOverrides = () => {
-            host.querySelectorAll('mat-chip-row, .mat-mdc-chip-row').forEach((row) => {
-                const rowElement = row;
-                rowElement.style.flexShrink = '0';
-                rowElement.style.maxWidth = 'none';
-                const primaryCell = rowElement.querySelector('.mdc-evolution-chip__cell--primary');
-                if (primaryCell) {
-                    primaryCell.style.maxWidth = 'none';
-                }
-                rowElement
-                    .querySelectorAll('.mdc-evolution-chip__text-label, .mat-mdc-chip-action-label')
-                    .forEach((label) => {
-                    label.style.whiteSpace = 'nowrap';
-                });
-            });
-        };
-        applyRowOverrides();
-        const observer = new MutationObserver(() => applyRowOverrides());
-        observer.observe(host, { childList: true, subtree: true });
-        this.#destroyRef.onDestroy(() => observer.disconnect());
-    }
-    #setButtonVisible(btn, visible) {
-        btn.style.display = visible ? 'inline-flex' : 'none';
-    }
-    #checkOverflow() {
-        const scrollElement = this.#scrollContent;
-        this.#setButtonVisible(this.#leftBtn, scrollElement.scrollLeft > THRESHOLD);
-        this.#setButtonVisible(this.#rightBtn, scrollElement.scrollLeft + scrollElement.clientWidth < scrollElement.scrollWidth - THRESHOLD);
-    }
-    #applyStyles(element, styles) {
-        Object.entries(styles).forEach(([prop, value]) => {
-            this.#renderer.setStyle(element, prop, value);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: ScrollButtonsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvScrollButtons]'
-                }]
-        }], ctorParameters: () => [], propDecorators: { yuvScrollButtonsAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvScrollButtonsAmount", required: false }] }] } });
-
-const directives = [
-    BusyOverlayDirective,
-    FocusWithinDirective,
-    FileDropZoneDirective,
-    ClickDoubleDirective,
-    LightDismissDirective,
-    ContainerSizeDirective,
-    LongPressDirective,
-    DragSelectDirective,
-    DragScrollDirective,
-    NoopValueAccessorDirective,
-    AutofocusChildDirective,
-    AutofocusDelayedDirective,
-    ScrollButtonsDirective
-];
-const components = [ConfirmComponent, ScrollButtonsComponent];
-class YuvCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: YuvCommonModule, imports: [BusyOverlayDirective,
-            FocusWithinDirective,
-            FileDropZoneDirective,
-            ClickDoubleDirective,
-            LightDismissDirective,
-            ContainerSizeDirective,
-            LongPressDirective,
-            DragSelectDirective,
-            DragScrollDirective,
-            NoopValueAccessorDirective,
-            AutofocusChildDirective,
-            AutofocusDelayedDirective,
-            ScrollButtonsDirective, ConfirmComponent, ScrollButtonsComponent], exports: [BusyOverlayDirective,
-            FocusWithinDirective,
-            FileDropZoneDirective,
-            ClickDoubleDirective,
-            LightDismissDirective,
-            ContainerSizeDirective,
-            LongPressDirective,
-            DragSelectDirective,
-            DragScrollDirective,
-            NoopValueAccessorDirective,
-            AutofocusChildDirective,
-            AutofocusDelayedDirective,
-            ScrollButtonsDirective, ConfirmComponent, ScrollButtonsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvCommonModule, imports: [components] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvCommonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...directives, ...components],
-                    exports: [...directives, ...components]
-                }]
-        }] });
-
-function getFocusableChildren(element) {
-    return [...Array.from(element.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'))].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-}
-function getFirstFocusableChild(element) {
-    return getFocusableChildren(element)[0];
-}
-
-/**
- * Service to store and retrieve layout settings. Those
- * settings are stored on the users device because in
- * general layout settings like panel widths are highly
- * dependent on the current device.
- */
-class LayoutSettingsService {
-    constructor() {
-        this.#STORAGE_PREFIX = 'yuv.layout:';
-        /**
-         * @deprecated Theme storage is now handled by `ThemeService`.
-         */
-        this.#MODE_STORAGE_KEY = 'app.layout.mode';
-        this.DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;
-        /**
-         * @deprecated Use `ThemeService.mode` instead.
-         */
-        this.themeMode = signal('system', ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
-        /**
-         * @deprecated Use `ThemeService.mode` instead.
-         */
-        this.mode = this.themeMode.asReadonly();
-    }
-    #STORAGE_PREFIX;
-    /**
-     * @deprecated Theme storage is now handled by `ThemeService`.
-     */
-    #MODE_STORAGE_KEY;
-    /**
-     * @deprecated Theme initialization is now handled by `ThemeService` internally.
-     */
-    init() {
-        // set configured mode
-        const modeSettings = this.getSettings(this.#MODE_STORAGE_KEY);
-        this.applyLayoutMode(modeSettings?.mode || undefined);
-    }
-    /**
-     * @deprecated Use `ThemeService.toggleTheme()` instead.
-     */
-    setMode(mode) {
-        this.saveSettings(this.#MODE_STORAGE_KEY, { mode });
-    }
-    saveSettings(key, settings) {
-        if (typeof settings === 'object') {
-            localStorage.setItem(this.#getKey(key), JSON.stringify(settings));
-            return true;
-        }
-        else
-            return false;
-    }
-    getSettings(key) {
-        try {
-            const v = localStorage.getItem(this.#getKey(key));
-            return v ? JSON.parse(v) : undefined;
-        }
-        catch (e) {
-            console.error('Error while parsing layout settings', e);
-            return undefined;
-        }
-    }
-    #getKey(key) {
-        return `${this.#STORAGE_PREFIX}${key}`;
-    }
-    /**
-     * Clears all layout settings.
-     */
-    clearSettings() {
-        Object.keys(localStorage).forEach((key) => {
-            if (key.startsWith(this.#STORAGE_PREFIX)) {
-                localStorage.removeItem(key);
-            }
-        });
-    }
-    /**
-     * @deprecated Use `ThemeService.toggleTheme()` instead.
-     */
-    applyLayoutMode(mode) {
-        const body = document.getElementsByTagName('body')[0];
-        body.style.colorScheme = mode === 'dark' || mode === 'light' ? mode : 'inherit';
-        this.themeMode.set(mode || 'system');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutSettingsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutSettingsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * Providing an error message when a translation string for an object wasn't found
- */
-class FormTranslateService {
-    constructor() {
-        this.translate = inject(TranslateService);
-    }
-    /**
-     * Set the error label if a translation for this string wasn't provided
-     * @param error - error message about a missed translation key
-     * @param params
-     */
-    getErrorLabel(error, params) {
-        switch (error) {
-            case 'daterange':
-                return this.translate.instant('yuv.object-form-element.error.daterange.invalid', params);
-            case 'daterangeorder':
-                return this.translate.instant('yuv.object-form-element.error.daterangeorder.invalid', params);
-            case 'numberrange':
-                return this.translate.instant('yuv.object-form-element.error.numberrange.invalid', params);
-            case 'numberrangeorder':
-                return this.translate.instant('yuv.object-form-element.error.numberrangeorder.invalid', params);
-            case 'number':
-                return this.translate.instant('yuv.object-form-element.error.number', params);
-            case 'precision':
-                return this.translate.instant('yuv.object-form-element.error.number.precision', params);
-            case 'scale':
-                return this.translate.instant('yuv.object-form-element.error.number.scale', params);
-            case 'regex':
-                return this.translate.instant('yuv.object-form-element.error.string.regex.nomatch', params);
-            case 'pattern':
-                return this.translate.instant('yuv.object-form-element.error.string.regex.nomatch', params);
-            case 'classificationemail':
-                return this.translate.instant('yuv.object-form-element.error.string.classification.email', params);
-            case 'classificationphone':
-                return this.translate.instant('yuv.object-form-element.error.string.classification.phone', params);
-            case 'classificationurl':
-                return this.translate.instant('yuv.object-form-element.error.string.classification.url', params);
-            case 'onlyWhitespaces':
-                return this.translate.instant('yuv.object-form-element.error.string.whitespaces', params);
-            case 'datecontrol':
-                return this.translate.instant('yuv.object-form-element.error.date.invalid', params);
-            case 'required':
-                return this.translate.instant('yuv.object-form-element.error.required', params);
-            case 'maxlength':
-                return this.translate.instant('yuv.object-form-element.error.maxlength', params);
-            case 'minlength':
-                return this.translate.instant('yuv.object-form-element.error.minlength', params);
-            case 'minmax':
-                return this.translate.instant('yuv.object-form-element.error.minmax', params);
-            case 'minvalue':
-                return this.translate.instant('yuv.object-form-element.error.minvalue', params);
-            case 'maxvalue':
-                return this.translate.instant('yuv.object-form-element.error.maxvalue', params);
-            default:
-                return this.translate.instant(error, params);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormTranslateService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormTranslateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-var ThemeStorageKeys;
-(function (ThemeStorageKeys) {
-    ThemeStorageKeys["THEME_MODE"] = "yuv.theme:app.theme.mode";
-    ThemeStorageKeys["CUSTOM_THEME"] = "yuv.theme:app.theme.custom";
-})(ThemeStorageKeys || (ThemeStorageKeys = {}));
-const DEFAULT_THEME_KEY = 'yuv-default';
-const DEFAULT_THEME = {
-    key: DEFAULT_THEME_KEY,
-    label: 'yuv.theme.default.label',
-    description: 'yuv.theme.default.description',
-    hasLightTheme: true,
-    hasDarkTheme: true
-};
-const HIGH_CONTRAST_THEME_KEY = 'yuv-high-contrast';
-const HIGH_CONTRAST_THEME = {
-    key: HIGH_CONTRAST_THEME_KEY,
-    label: 'yuv.theme.highContrast.label',
-    description: 'yuv.theme.highContrast.description',
-    hasLightTheme: true,
-    hasDarkTheme: true
-};
-
-const YUV_CUSTOM_THEME = new InjectionToken('CUSTOM_THEME', { factory: () => [HIGH_CONTRAST_THEME] });
-const provideYuvCustomTheme = (customTheme) => makeEnvironmentProviders([{ provide: YUV_CUSTOM_THEME, useValue: [HIGH_CONTRAST_THEME, ...customTheme] }]);
-
-class ThemeService {
-    #rendererFactory;
-    #customThemesToken;
-    #document;
-    #storage;
-    #MODE_STORAGE_KEY;
-    #CUSTOM_THEME_STORAGE_KEY;
-    #renderer;
-    #mode;
-    #currentTheme;
-    #disableMode;
-    // Effect to apply classes and save to localStorage
-    #setThemeModeEffect;
-    constructor() {
-        this.#rendererFactory = inject(RendererFactory2);
-        this.#customThemesToken = inject(YUV_CUSTOM_THEME, { optional: true });
-        this.#document = inject(DOCUMENT);
-        this.#storage = inject(AppCacheService);
-        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', ...(ngDevMode ? [{ debugName: "#mode" }] : /* istanbul ignore next */ []));
-        this.mode = this.#mode.asReadonly();
-        this.customTheme = signal(DEFAULT_THEME, ...(ngDevMode ? [{ debugName: "customTheme" }] : /* istanbul ignore next */ []));
-        this.customThemes = computed(() => {
-            const customThemesToken = this.#customThemesToken || [];
-            return customThemesToken.map((theme) => {
-                const { key, label, description, hasLightTheme, hasDarkTheme } = theme;
-                return {
-                    key,
-                    label,
-                    description,
-                    hasLightTheme: hasLightTheme ?? true,
-                    hasDarkTheme: hasDarkTheme ?? false
-                };
-            });
-        }, ...(ngDevMode ? [{ debugName: "customThemes" }] : /* istanbul ignore next */ []));
-        this.#currentTheme = signal(DEFAULT_THEME_KEY, ...(ngDevMode ? [{ debugName: "#currentTheme" }] : /* istanbul ignore next */ []));
-        this.currentTheme = this.#currentTheme.asReadonly();
-        this.#disableMode = signal(false, ...(ngDevMode ? [{ debugName: "#disableMode" }] : /* istanbul ignore next */ []));
-        this.disableMode = this.#disableMode.asReadonly();
-        // Effect to apply classes and save to localStorage
-        this.#setThemeModeEffect = effect(() => {
-            const currentTheme = this.#mode();
-            const body = this.#document.getElementsByTagName('body')[0];
-            this.setMode(currentTheme);
-            // Theme class
-            if (currentTheme === 'dark') {
-                this.#renderer.setAttribute(body, 'style', 'color-scheme: dark');
-            }
-            else if (currentTheme === 'light') {
-                this.#renderer.setAttribute(body, 'style', 'color-scheme: light');
-            }
-            else {
-                this.#renderer.removeAttribute(body, 'style');
-            }
-        }, ...(ngDevMode ? [{ debugName: "#setThemeModeEffect" }] : /* istanbul ignore next */ []));
-        this.#initializeModes();
-    }
-    #saveSettings(key, settings) {
-        if (typeof settings === 'object') {
-            this.#storage.setItem(key, JSON.stringify(settings)).subscribe();
-            return true;
-        }
-        else
-            return false;
-    }
-    #deleteSettings(key) {
-        this.#storage.removeItem(key).subscribe();
-        return true;
-    }
-    #checkPrefersContrast() {
-        const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
-    }
-    #initializeModes() {
-        // Theme initialization
-        forkJoin([this.#storage.getItem(this.#MODE_STORAGE_KEY), this.#storage.getItem(this.#CUSTOM_THEME_STORAGE_KEY)])
-            .pipe(map$1(([savedTheme, savedCustomTheme]) => {
-            if (savedTheme) {
-                try {
-                    this.#mode.set(JSON.parse(savedTheme).mode);
-                }
-                catch (error) {
-                    this.#mode.set(this.#mode());
-                }
-            }
-            else {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                this.#mode.set(prefersDark ? 'dark' : 'light');
-            }
-            // Contrast initialization
-            this.#checkPrefersContrast();
-            // Custom Theme initialization
-            if (savedCustomTheme) {
-                try {
-                    const customThemeKey = JSON.parse(savedCustomTheme).customTheme;
-                    this.setCustomTheme(customThemeKey);
-                }
-                catch (error) {
-                    // ignore
-                }
-            }
-        }))
-            .subscribe();
-    }
-    setMode(mode) {
-        this.#saveSettings(this.#MODE_STORAGE_KEY, { mode });
-    }
-    setCustomTheme(key) {
-        // Reset contrast to system on custom theme change
-        const previousTheme = this.customTheme();
-        const body = this.#document.getElementsByTagName('body')[0];
-        previousTheme && previousTheme.key && this.#renderer.removeClass(body, previousTheme.key);
-        const selectedTheme = this.customThemes().find((theme) => theme.key === key);
-        if (selectedTheme) {
-            this.customTheme.set(selectedTheme);
-            this.#currentTheme.set(selectedTheme.key);
-            selectedTheme.key && this.#renderer.addClass(body, selectedTheme.key);
-            // Check if custom theme has light or dark mode
-            if ((selectedTheme.hasDarkTheme && selectedTheme.hasLightTheme) || (!selectedTheme.hasDarkTheme && !selectedTheme.hasLightTheme)) {
-                // If both, do nothing further with this (enable group)
-                this.#disableMode.set(false);
-            }
-            else {
-                // Else disable mode button group and set the corresponding mode active
-                if (selectedTheme.hasDarkTheme) {
-                    this.#mode.set('dark');
-                }
-                else if (selectedTheme.hasLightTheme) {
-                    this.#mode.set('light');
-                }
-                this.#disableMode.set(true);
-            }
-            this.#saveSettings(this.#CUSTOM_THEME_STORAGE_KEY, { customTheme: key });
-        }
-        else {
-            if (key === DEFAULT_THEME_KEY) {
-                this.#disableMode.set(false);
-                this.#renderer.removeClass(body, HIGH_CONTRAST_THEME_KEY);
-                this.#deleteSettings(this.#CUSTOM_THEME_STORAGE_KEY);
-            }
-            // Default theme or no theme found
-        }
-    }
-    toggleTheme(theme) {
-        this.#mode.set(theme);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-marker('yuv.theme.default.label');
-marker('yuv.theme.default.description');
-marker('yuv.theme.highContrast.label');
-marker('yuv.theme.highContrast.description');
-
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-class AbstractMatFormField {
-    constructor() {
-        this.stateChanges = new Subject();
-        this.elRef = inject(ElementRef);
-        this.#value = signal(null, ...(ngDevMode ? [{ debugName: "#value" }] : /* istanbul ignore next */ []));
-        this.#id = signal('', ...(ngDevMode ? [{ debugName: "#id" }] : /* istanbul ignore next */ []));
-        this.#placeholder = signal('', ...(ngDevMode ? [{ debugName: "#placeholder" }] : /* istanbul ignore next */ []));
-        this.ngControl = null;
-        this.#focused = signal(false, ...(ngDevMode ? [{ debugName: "#focused" }] : /* istanbul ignore next */ []));
-        this.#empty = signal(false, ...(ngDevMode ? [{ debugName: "#empty" }] : /* istanbul ignore next */ []));
-        this.#required = signal(false, ...(ngDevMode ? [{ debugName: "#required" }] : /* istanbul ignore next */ []));
-        this.#disabled = signal(false, ...(ngDevMode ? [{ debugName: "#disabled" }] : /* istanbul ignore next */ []));
-        this.focusHandled = signal(false, ...(ngDevMode ? [{ debugName: "focusHandled" }] : /* istanbul ignore next */ []));
-        this.#errorState = signal(false, ...(ngDevMode ? [{ debugName: "#errorState" }] : /* istanbul ignore next */ []));
-    }
-    onFocusIn() {
-        this.focused = true;
-    }
-    onFocusout() {
-        this.focused = false;
-    }
-    #value;
-    set value(v) {
-        this.#value.set(v);
-        this.empty = !v;
-        this.stateChanges.next();
-    }
-    get value() {
-        return this.#value();
-    }
-    #id;
-    set id(v) {
-        this.#id.set(v);
-        this.stateChanges.next();
-    }
-    get id() {
-        return this.#id();
-    }
-    #placeholder;
-    set placeholder(v) {
-        this.#placeholder.set(v);
-        this.stateChanges.next();
-    }
-    get placeholder() {
-        return this.#placeholder();
-    }
-    #focused;
-    set focused(f) {
-        this.#focused.set(f);
-        this.stateChanges.next();
-    }
-    get focused() {
-        return this.#focused();
-    }
-    // #shouldLabelFloat = signal<boolean>(false);
-    // set shouldLabelFloat(f: boolean) {
-    //   this.#shouldLabelFloat.set(f);
-    //   this.stateChanges.next();
-    // }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty || !!this.ngControl?.invalid;
-    }
-    #empty;
-    set empty(f) {
-        this.#empty.set(f);
-        this.stateChanges.next();
-    }
-    get empty() {
-        return this.#empty();
-    }
-    #required;
-    set required(f) {
-        this.#required.set(coerceBooleanProperty(f));
-        this.stateChanges.next();
-    }
-    get required() {
-        return this.#required();
-    }
-    #disabled;
-    set disabled(f) {
-        this.#disabled.set(coerceBooleanProperty(f));
-        this.stateChanges.next();
-    }
-    get disabled() {
-        return this.#disabled();
-    }
-    #errorState;
-    set errorState(f) {
-        this.#errorState.set(coerceBooleanProperty(f));
-        this.stateChanges.next();
-    }
-    get errorState() {
-        return this.#errorState();
-    }
-    setDescribedByIds(ids) {
-        // this.describedBy = ids.join(' ');
-    }
-    onContainerClick(event) {
-        if (this.focusHandled())
-            return;
-        const fe = getFocusableChildren(this.elRef.nativeElement);
-        if (fe[0] && !fe.includes(event.target)) {
-            fe[0].focus();
-        }
-    }
-    onNgOnDestroy() {
-        this.stateChanges.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMatFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: AbstractMatFormField, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                    host: {
-                        '(focusin)': 'onFocusIn()',
-                        '(focusout)': 'onFocusout()'
-                    }
-                }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-var DialogSize;
-(function (DialogSize) {
-    DialogSize["SMALL"] = "small";
-    DialogSize["MEDIUM"] = "medium";
-    DialogSize["LARGE"] = "large";
-    DialogSize["EXTRA_LARGE"] = "extra-large";
-    DialogSize["FULL_SCREEN"] = "full-screen";
-})(DialogSize || (DialogSize = {}));
-
-class RetentionBadgeComponent {
-    constructor() {
-        this.#retention = inject(RetentionService);
-        this.dmsObject = input.required(...(ngDevMode ? [{ debugName: "dmsObject" }] : /* istanbul ignore next */ []));
-        this.retentionData = computed(() => {
-            return this.#retention.getRetentionState(this.dmsObject());
-        }, ...(ngDevMode ? [{ debugName: "retentionData" }] : /* istanbul ignore next */ []));
-    }
-    #retention;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RetentionBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-retention-badge', standalone: true, imports: [TranslatePipe, 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);
-    confirm(data) {
-        return this.#dialog
-            .open(ConfirmComponent, { data })
-            .afterClosed()
-            .pipe(map((result) => !!result));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class HaloFocusComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HaloFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: HaloFocusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-halo-focus', imports: [], template: "<p>halo-focus works!</p>\n" }]
-        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
-
-export { AbstractMatFormField, AutofocusChildDirective, AutofocusDelayedDirective, BusyOverlayComponent, BusyOverlayDirective, ClickDoubleDirective, ConfirmComponent, ConfirmService, ContainerSizeDirective, DEFAULT_THEME, DEFAULT_THEME_KEY, DialogComponent, DialogSize, DragScrollDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusWithinDirective, FormTranslateService, HIGH_CONTRAST_THEME, HIGH_CONTRAST_THEME_KEY, HaloFocusComponent, LayoutSettingsService, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, RetentionBadgeComponent, ScrollButtonsComponent, ScrollButtonsDirective, ThemeService, ThemeStorageKeys, YUV_CUSTOM_THEME, YuvCommonModule, getFirstFocusableChild, getFocusableChildren, injectNgControl, provideYuvCustomTheme };
 //# sourceMappingURL=yuuvis-client-framework-common.mjs.map