@yuuvis/client-components 3.0.0-beta.21.1

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

@@ -0,0 +1,1724 @@
+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 {
+    headertitle = input(null, ...(ngDevMode ? [{ debugName: "headertitle" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated use headertitle instead
+     */
+    headertitel = input(null, ...(ngDevMode ? [{ debugName: "headertitel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 {
+    dialogData = inject(MAT_DIALOG_DATA);
+    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 = inject(DestroyRef);
+    scrollContainer = viewChild.required('scrollContainer');
+    /** How many pixels to scroll per button click. */
+    scrollAmount = input(DEFAULT_SCROLL_AMOUNT$1, ...(ngDevMode ? [{ debugName: "scrollAmount" }] : /* istanbul ignore next */ []));
+    showLeftButton = signal(false, ...(ngDevMode ? [{ debugName: "showLeftButton" }] : /* istanbul ignore next */ []));
+    showRightButton = signal(false, ...(ngDevMode ? [{ debugName: "showRightButton" }] : /* istanbul ignore next */ []));
+    #resizeObserver;
+    constructor() {
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusChildDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    #elRef = inject(ElementRef);
+    /**
+     * Sets the delay in milliseconds. If no delay is set, the focus will be set immediately.
+     */
+    yuvAutofocusDelayed = input(0, ...(ngDevMode ? [{ debugName: "yuvAutofocusDelayed" }] : /* istanbul ignore next */ []));
+    #delay = computed(() => {
+        const d = this.yuvAutofocusDelayed();
+        return typeof d === 'string' ? parseInt(d) : d;
+    }, ...(ngDevMode ? [{ debugName: "#delay" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.#elRef.nativeElement.focus();
+        }, this.#delay());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusDelayedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    errorDismiss = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] } });
+
+/**
+ * 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;
+ *  }
+ * });
+ * ```
+ *
+ */
+class BusyOverlayDirective {
+    #initialStylePosition = signal('initial', ...(ngDevMode ? [{ debugName: "#initialStylePosition" }] : /* istanbul ignore next */ []));
+    stylePosition = signal(this.#initialStylePosition(), ...(ngDevMode ? [{ debugName: "stylePosition" }] : /* istanbul ignore next */ []));
+    #elRef = inject(ElementRef);
+    #environmentInjector = inject(EnvironmentInjector);
+    #vcRef = inject(ViewContainerRef);
+    /**
+     * The Boolean expression to evaluate as the condition for showing the busy overlay
+     */
+    yuvBusyOverlay = input(false, ...(ngDevMode ? [{ debugName: "yuvBusyOverlay" }] : /* istanbul ignore next */ []));
+    #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.
+     */
+    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.
+     */
+    yuvBusyError = input(...(ngDevMode ? [undefined, { debugName: "yuvBusyError" }] : /* istanbul ignore next */ []));
+    #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.
+     */
+    yuvBusyErrorDismiss = output();
+    #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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    debounceTime = input(200, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+    doubleClick = output({ alias: 'click.double' });
+    singleClick = output({ alias: 'click.single' });
+    clicksSubject = new Subject();
+    constructor() {
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClickDoubleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    elRef = inject(ElementRef);
+    ngZone = inject(NgZone);
+    containerHeight = output();
+    containerWidth = output();
+    _size;
+    _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;
+    });
+    constructor() {
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    #selector;
+    #selectStartX = 0;
+    #selectStartY = 0;
+    #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);
+    }
+    items = contentChildren(DragSelectItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    #selectables = computed(() => this.items().map((item) => item.el), ...(ngDevMode ? [{ debugName: "#selectables" }] : /* istanbul ignore next */ []));
+    yuvDragSelect = input(...(ngDevMode ? [undefined, { debugName: "yuvDragSelect" }] : /* istanbul ignore next */ []));
+    dragSelectChange = output();
+    dragSelect = output();
+    #onPointerUp = () => {
+        removeEventListener('pointermove', this.#resize);
+        removeEventListener('pointerup', this.#onPointerUp);
+        if (this.#selection.length)
+            this.dragSelect.emit(this.#selection);
+        if (this.#selector)
+            this.#selector.remove();
+    };
+    #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();
+    };
+    #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);
+        }
+    };
+    #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);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    #elRef = inject(ElementRef);
+    el = this.#elRef.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DragSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    activeDropZone = signal(null, ...(ngDevMode ? [{ debugName: "activeDropZone" }] : /* istanbul ignore next */ []));
+    fileOver(id, active) {
+        this.activeDropZone.set(active ? id : null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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 {
+    #elRef = inject(ElementRef);
+    #fileDropService = inject(FileDropService);
+    #coverElement;
+    // ID to track the element
+    #id = crypto.randomUUID();
+    active = computed(() => {
+        const fileOver = this.#fileDropService.activeDropZone() === this.#id;
+        this.fileDropOver.emit(fileOver);
+        return fileOver;
+    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    #activeEffect = effect(() => {
+        this.#toggleCover(this.active());
+    }, ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
+    #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)'
+    };
+    #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)'
+    };
+    yuvFileDropZone = input(...(ngDevMode ? [undefined, { debugName: "yuvFileDropZone" }] : /* istanbul ignore next */ []));
+    fileDropDisabled = input(false, ...(ngDevMode ? [{ debugName: "fileDropDisabled" }] : /* istanbul ignore next */ []));
+    fileDrop = output();
+    fileDropOver = output();
+    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    elRef;
+    eventCount = 0;
+    hasFocusWithin = false;
+    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();
+        }
+    }
+    /**
+     * Emitted once the component or any of its child components gains focus.
+     */
+    yuvFocusWithin = output();
+    /**
+     * Emitted once the component (incl. any of its child components) looses focus.
+     */
+    yuvFocusWithinBlur = output();
+    /**
+     * @ignore
+     */
+    constructor(elRef) {
+        this.elRef = elRef;
+    }
+    // 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FocusWithinDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    elRef = inject(ElementRef);
+    onKeydownHandler(event) {
+        if (!event.defaultPrevented) {
+            this.yuvLightDismiss.emit();
+        }
+    }
+    onMousedown(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.yuvLightDismiss.emit();
+        }
+    }
+    yuvLightDismiss = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LightDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 {
+    elRef = inject(ElementRef);
+    threshold = 500;
+    yuvLongPress = input({
+        enabled: false
+    }, ...(ngDevMode ? [{ debugName: "yuvLongPress" }] : /* istanbul ignore next */ []));
+    longpress = output();
+    constructor() {
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 = inject(Renderer2);
+    #elRef = inject(ElementRef);
+    translate = inject(TranslateService);
+    #destroyRef = inject(DestroyRef);
+    /** How many pixels to scroll per button click. */
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    yuvScrollButtonsAmount = input(DEFAULT_SCROLL_AMOUNT, ...(ngDevMode ? [{ debugName: "yuvScrollButtonsAmount" }] : /* istanbul ignore next */ []));
+    #leftBtn;
+    #rightBtn;
+    #scrollContent;
+    constructor() {
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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 ɵ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 {
+    #STORAGE_PREFIX = 'yuv.layout:';
+    /**
+     * @deprecated Theme storage is now handled by `ThemeService`.
+     */
+    #MODE_STORAGE_KEY = 'app.layout.mode';
+    DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;
+    /**
+     * @deprecated Use `ThemeService.mode` instead.
+     */
+    themeMode = signal('system', ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `ThemeService.mode` instead.
+     */
+    mode = this.themeMode.asReadonly();
+    /**
+     * @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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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 {
+    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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 = inject(RendererFactory2);
+    #customThemesToken = inject(YUV_CUSTOM_THEME, { optional: true });
+    #document = inject(DOCUMENT);
+    #storage = inject(AppCacheService);
+    #MODE_STORAGE_KEY = ThemeStorageKeys.THEME_MODE;
+    #CUSTOM_THEME_STORAGE_KEY = ThemeStorageKeys.CUSTOM_THEME;
+    #renderer = this.#rendererFactory.createRenderer(null, null);
+    #mode = signal('light', ...(ngDevMode ? [{ debugName: "#mode" }] : /* istanbul ignore next */ []));
+    mode = this.#mode.asReadonly();
+    customTheme = signal(DEFAULT_THEME, ...(ngDevMode ? [{ debugName: "customTheme" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    #currentTheme = signal(DEFAULT_THEME_KEY, ...(ngDevMode ? [{ debugName: "#currentTheme" }] : /* istanbul ignore next */ []));
+    currentTheme = this.#currentTheme.asReadonly();
+    #disableMode = signal(false, ...(ngDevMode ? [{ debugName: "#disableMode" }] : /* istanbul ignore next */ []));
+    disableMode = this.#disableMode.asReadonly();
+    // Effect to apply classes and save to localStorage
+    #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 */ []));
+    constructor() {
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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 {
+    stateChanges = new Subject();
+    elRef = inject(ElementRef);
+    onFocusIn() {
+        this.focused = true;
+    }
+    onFocusout() {
+        this.focused = false;
+    }
+    #value = signal(null, ...(ngDevMode ? [{ debugName: "#value" }] : /* istanbul ignore next */ []));
+    set value(v) {
+        this.#value.set(v);
+        this.empty = !v;
+        this.stateChanges.next();
+    }
+    get value() {
+        return this.#value();
+    }
+    #id = signal('', ...(ngDevMode ? [{ debugName: "#id" }] : /* istanbul ignore next */ []));
+    set id(v) {
+        this.#id.set(v);
+        this.stateChanges.next();
+    }
+    get id() {
+        return this.#id();
+    }
+    #placeholder = signal('', ...(ngDevMode ? [{ debugName: "#placeholder" }] : /* istanbul ignore next */ []));
+    set placeholder(v) {
+        this.#placeholder.set(v);
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this.#placeholder();
+    }
+    ngControl = null;
+    #focused = signal(false, ...(ngDevMode ? [{ debugName: "#focused" }] : /* istanbul ignore next */ []));
+    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 = signal(false, ...(ngDevMode ? [{ debugName: "#empty" }] : /* istanbul ignore next */ []));
+    set empty(f) {
+        this.#empty.set(f);
+        this.stateChanges.next();
+    }
+    get empty() {
+        return this.#empty();
+    }
+    #required = signal(false, ...(ngDevMode ? [{ debugName: "#required" }] : /* istanbul ignore next */ []));
+    set required(f) {
+        this.#required.set(coerceBooleanProperty(f));
+        this.stateChanges.next();
+    }
+    get required() {
+        return this.#required();
+    }
+    #disabled = signal(false, ...(ngDevMode ? [{ debugName: "#disabled" }] : /* istanbul ignore next */ []));
+    set disabled(f) {
+        this.#disabled.set(coerceBooleanProperty(f));
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this.#disabled();
+    }
+    focusHandled = signal(false, ...(ngDevMode ? [{ debugName: "focusHandled" }] : /* istanbul ignore next */ []));
+    #errorState = signal(false, ...(ngDevMode ? [{ debugName: "#errorState" }] : /* istanbul ignore next */ []));
+    set errorState(f) {
+        this.#errorState.set(coerceBooleanProperty(f));
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.#errorState();
+    }
+    controlType;
+    autofilled;
+    userAriaDescribedBy;
+    disableAutomaticLabeling;
+    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMatFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 {
+    #retention = inject(RetentionService);
+    dmsObject = input.required(...(ngDevMode ? [{ debugName: "dmsObject" }] : /* istanbul ignore next */ []));
+    retentionData = computed(() => {
+        return this.#retention.getRetentionState(this.dmsObject());
+    }, ...(ngDevMode ? [{ debugName: "retentionData" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RetentionBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HaloFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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-components-common.mjs.map