@yuuvis/client-framework 2.0.0-beta.0 → 2.0.0-beta.3

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

@@ -1,15 +1,143 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, HostBinding, Input, EventEmitter, HostListener, Output, input, output, NgZone, contentChildren, computed, viewChild, contentChild, Component, forwardRef, Injectable } from '@angular/core';
-import { Utils, TranslateService } from '@yuuvis/client-core';
+import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Input, Directive, computed, EnvironmentInjector, ApplicationRef, createComponent, HostBinding, EventEmitter, HostListener, Output, NgZone, output, contentChildren, forwardRef, NgModule, Injectable, signal } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/dialog';
+import { MatDialogActions, MatDialogTitle, MatDialogContent, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { Utils } from '@yuuvis/client-core';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, fromEvent, merge, timer, of, filter as filter$1 } from 'rxjs';
-import { debounceTime, filter, map, switchMap } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { YvcOverlayService } from '@yuuvis/components/overlay';
-import * as i2 from '@yuuvis/components/autocomplete';
-import { YvcAutocompleteModule } from '@yuuvis/components/autocomplete';
+import { Subject, fromEvent, merge, timer, of } from 'rxjs';
+import { debounceTime, tap, filter, switchMap, map, takeUntil } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+class DialogComponent {
+    constructor() {
+        this.headertitel = input(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DialogComponent, isStandalone: true, selector: "yuv-dialog", inputs: { headertitel: { classPropertyName: "headertitel", publicName: "headertitel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @let title = headertitel();
+    @if (title) {
+      <h2 mat-dialog-title>
+        {{ title }}
+      </h2>
+    }
+    <mat-dialog-content>
+      <ng-content select="main"></ng-content>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end" class="footer">
+      <ng-content select="footer"></ng-content>
+    </mat-dialog-actions>
+  `, isInline: true, styles: [":host{display:contents}h2{border-bottom:1px solid var(--ymt-outline-variant);font-size:var(--yuv-font-size-headline);font-weight:500}.mat-mdc-dialog-container{height:100%}mat-dialog-content{display:var(--ymt-dialog-content-display)}.footer{border-top:1px solid var(--ymt-outline-variant);gap:calc(var(--ymt-font-body) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-dialog', imports: [TranslateModule, MatDialogActions, MatDialogTitle, MatDialogContent], template: `
+    @let title = headertitel();
+    @if (title) {
+      <h2 mat-dialog-title>
+        {{ title }}
+      </h2>
+    }
+    <mat-dialog-content>
+      <ng-content select="main"></ng-content>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end" class="footer">
+      <ng-content select="footer"></ng-content>
+    </mat-dialog-actions>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}h2{border-bottom:1px solid var(--ymt-outline-variant);font-size:var(--yuv-font-size-headline);font-weight:500}.mat-mdc-dialog-container{height:100%}mat-dialog-content{display:var(--ymt-dialog-content-display)}.footer{border-top:1px solid var(--ymt-outline-variant);gap:calc(var(--ymt-font-body) / 2)}\n"] }]
+        }] });
+
+class ConfirmComponent {
+    constructor() {
+        this.dialogData = inject(MAT_DIALOG_DATA);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ConfirmComponent, isStandalone: true, selector: "yuv-confirm", ngImport: i0, template: "<yuv-dialog [headertitel]=\"dialogData.title || ''\">\n  <main>{{ dialogData.message }}</main>\n  <footer>\n    @if (!dialogData.hideCancelButton) {\n      <button mat-stroked-button mat-dialog-close class=\"secondary\" type=\"button\">\n        {{ dialogData.cancelLabel || 'Cancel' }}\n      </button>\n    }\n    <button mat-flat-button class=\"primary\" type=\"button\" [mat-dialog-close]=\"true\">{{ dialogData.confirmLabel || 'Confirm' }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-confirm', imports: [CommonModule, MatButtonModule, MatDialogModule, DialogComponent], template: "<yuv-dialog [headertitel]=\"dialogData.title || ''\">\n  <main>{{ dialogData.message }}</main>\n  <footer>\n    @if (!dialogData.hideCancelButton) {\n      <button mat-stroked-button mat-dialog-close class=\"secondary\" type=\"button\">\n        {{ dialogData.cancelLabel || 'Cancel' }}\n      </button>\n    }\n    <button mat-flat-button class=\"primary\" type=\"button\" [mat-dialog-close]=\"true\">{{ dialogData.confirmLabel || 'Confirm' }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:contents}:host main{padding:var(--ymt-spacing-m)}\n"] }]
+        }] });
+
+/**
+ * Directive putting focus on a 'focusable' child element.
+ * By default the first focusable child will receive focus.
+ */
+class AutofocusChildDirective {
+    #elRef = inject(ElementRef);
+    #targetIndex = 0;
+    set yuvAutofocusChild(s) {
+        const i = parseInt(s);
+        this.#targetIndex = !isNaN(i) ? i : 0;
+    }
+    #getFirstFocusableChild() {
+        const focusableElements = [
+            ...this.#elRef.nativeElement.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')
+        ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+        return focusableElements[this.#targetIndex];
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const focusEl = this.#getFirstFocusableChild();
+            if (focusEl)
+                focusEl.focus();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutofocusChildDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: AutofocusChildDirective, isStandalone: true, selector: "[yuvAutofocusChild]", inputs: { yuvAutofocusChild: "yuvAutofocusChild" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutofocusChildDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvAutofocusChild]',
+                    standalone: true
+                }]
+        }], propDecorators: { yuvAutofocusChild: [{
+                type: Input
+            }] } });
+
+/**
+ * Directive putting delayed focus on an element. If no
+ * delay is set, the focus will be set immediately.
+ *
+ * You have to ensure that the element is focusable when adding this directive to it.
+ */
+class AutofocusDelayedDirective {
+    constructor() {
+        this.#elRef = inject(ElementRef);
+        /**
+         * Sets the delay in milliseconds. If no delay is set, the focus will be set immediately.
+         */
+        this.yuvAutofocusDelayed = input(0);
+        this.#delay = computed(() => {
+            const d = this.yuvAutofocusDelayed();
+            return typeof d === 'string' ? parseInt(d) : d;
+        });
+    }
+    #elRef;
+    #delay;
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.#elRef.nativeElement.focus();
+        }, this.#delay());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutofocusDelayedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: AutofocusDelayedDirective, isStandalone: true, selector: "[yuvAutofocusDelayed]", inputs: { yuvAutofocusDelayed: { classPropertyName: "yuvAutofocusDelayed", publicName: "yuvAutofocusDelayed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AutofocusDelayedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvAutofocusDelayed]',
+                    standalone: true
+                }]
+        }] });
 
 /**
  * A directive that will overlay its host component with a translucent background
@@ -27,9 +155,13 @@ class BusyOverlayDirective {
     constructor() {
         this.stylePosition = 'initial';
         this.#elRef = inject(ElementRef);
+        this.#environmentInjector = inject(EnvironmentInjector);
+        this.#applicationRef = inject(ApplicationRef);
         this.#overlayId = null;
     }
     #elRef;
+    #environmentInjector;
+    #applicationRef;
     #overlayId;
     /**
      * The Boolean expression to evaluate as the condition for showing the busy overlay
@@ -42,6 +174,18 @@ class BusyOverlayDirective {
             this.#removeBusyOverlay();
         }
     }
+    #createSpinner(mode = 'indeterminate', value = 0, color) {
+        const componentRef = createComponent(MatProgressSpinner, {
+            environmentInjector: this.#environmentInjector,
+        });
+        this.#applicationRef.attachView(componentRef.hostView);
+        componentRef.changeDetectorRef.detectChanges();
+        componentRef.setInput('mode', mode);
+        componentRef.setInput('value', value);
+        componentRef.setInput('color', color);
+        componentRef.location.nativeElement.classList.add('ymt-progress-spinner--giant');
+        return componentRef;
+    }
     #addBusyOverlay() {
         this.stylePosition = 'relative';
         const overlay = document.createElement('div');
@@ -53,12 +197,13 @@ class BusyOverlayDirective {
         overlay.style.alignItems = 'center';
         overlay.style.justifyContent = 'center';
         overlay.style.zIndex = '5';
-        overlay.style.backgroundColor = 'var(--busy-overlay-background)';
+        overlay.style.backgroundColor = 'var(--busy-overlay-background, rgba(0, 0, 0, 0.32))';
         this.#overlayId = `p${Utils.uuid()}`;
         overlay.setAttribute('id', this.#overlayId);
-        const spinner = document.createElement('div');
-        spinner.setAttribute('class', 'yuv-loader');
-        overlay.append(spinner);
+        // const spinner = document.createElement('div');
+        // spinner.setAttribute('class', 'yuv-loader');
+        // overlay.append(spinner);
+        overlay.append(this.#createSpinner('indeterminate').location.nativeElement);
         const el = this.#elRef.nativeElement;
         el.setAttribute('inert', '');
         el.append(overlay);
@@ -80,10 +225,10 @@ class BusyOverlayDirective {
     ngOnInit() {
         this.stylePosition = getComputedStyle(this.#elRef.nativeElement).position;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BusyOverlayDirective, isStandalone: true, selector: "[yuvBusyOverlay]", inputs: { yuvBusyOverlay: "yuvBusyOverlay" }, host: { properties: { "style.position": "this.stylePosition" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BusyOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BusyOverlayDirective, isStandalone: true, selector: "[yuvBusyOverlay]", inputs: { yuvBusyOverlay: "yuvBusyOverlay" }, host: { properties: { "style.position": "this.stylePosition" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BusyOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BusyOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvBusyOverlay]',
@@ -97,416 +242,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 /**
- * 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>
+ * Fixes the issue of 'click' event beeing triggered on 'doubleclick' by defining new outputs that
+ * distinguish between single and double click.
  */
-class FocusWithinDirective {
-    onFocusIn(evt) {
-        const hadFocusWithin = this.hasFocusWithin;
-        this.hasFocusWithin = this.matchesFocusWithin();
-        if (!hadFocusWithin && this.hasFocusWithin) {
-            this.yuvFocusWithin.emit();
-        }
-    }
-    onFocusOut(evt) {
-        const hadFocusWithin = this.hasFocusWithin;
-        this.hasFocusWithin = this.matchesFocusWithin();
-        if (hadFocusWithin && !this.hasFocusWithin) {
-            this.yuvFocusWithinBlur.emit();
-        }
+class ClickDoubleDirective {
+    constructor() {
+        this.debounceTime = 200;
+        this.doubleClick = new EventEmitter();
+        this.singleClick = new EventEmitter();
+        this.clicksSubject = new Subject();
+        this.clicksSubject.pipe(takeUntilDestroyed(), debounceTime(this.debounceTime)).subscribe({
+            next: (event) => {
+                if (event.type === 'click') {
+                    this.singleClick.emit(event);
+                }
+                else {
+                    this.doubleClick.emit(event);
+                }
+            }
+        });
     }
-    /**
-     * @ignore
-     */
-    constructor(elRef) {
-        this.elRef = elRef;
-        this.eventCount = 0;
-        this.hasFocusWithin = false;
-        /**
-         * Emitted once the component or any of its child components gains focus.
-         */
-        this.yuvFocusWithin = new EventEmitter();
-        /**
-         * Emitted once the component (incl. any of its child components) looses focus.
-         */
-        this.yuvFocusWithinBlur = new EventEmitter();
+    clickEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clicksSubject.next(event);
     }
-    // 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;
-        var nativeMatches = node.matches || node.msMatchesSelector;
-        try {
-            return nativeMatches.call(node, ':focus-within');
-        }
-        catch (error) {
-            return false;
-        }
+    doubleClickEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clicksSubject.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusWithinDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FocusWithinDirective, isStandalone: true, selector: "[yuvFocusWithin]", outputs: { yuvFocusWithin: "yuvFocusWithin", yuvFocusWithinBlur: "yuvFocusWithinBlur" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)" }, properties: { "class.focusWithin": "this.hasFocusWithin" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ClickDoubleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ClickDoubleDirective, isStandalone: true, selector: "[click.single],[click.double]", inputs: { debounceTime: "debounceTime" }, outputs: { doubleClick: "click.double", singleClick: "click.single" }, host: { listeners: { "click": "clickEvent($event)", "dblclick": "doubleClickEvent($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusWithinDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ClickDoubleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[yuvFocusWithin]',
+                    selector: '[click.single],[click.double]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasFocusWithin: [{
-                type: HostBinding,
-                args: ['class.focusWithin']
-            }], onFocusIn: [{
+        }], ctorParameters: () => [], propDecorators: { debounceTime: [{
+                type: Input
+            }], doubleClick: [{
+                type: Output,
+                args: ['click.double']
+            }], singleClick: [{
+                type: Output,
+                args: ['click.single']
+            }], clickEvent: [{
                 type: HostListener,
-                args: ['focusin', ['$event']]
-            }], onFocusOut: [{
+                args: ['click', ['$event']]
+            }], doubleClickEvent: [{
                 type: HostListener,
-                args: ['focusout', ['$event']]
-            }], yuvFocusWithin: [{
-                type: Output
-            }], yuvFocusWithinBlur: [{
-                type: Output
+                args: ['dblclick', ['$event']]
             }] } });
 
-class FileDropZoneDirective {
+/**
+ * Directive to watch the size of an element inside the DOM. Usefull for example to provide
+ * a different layout (different components) depending on the available screen estate. You
+ * should first try to use CSS container queries but somtimes you need a different set of
+ * components to be loaded for a certain component size.
+ *
+ * Let's say you have components designed for bigger screens. You do not want to load them
+ * if there is not enough space for them. So you rather load components that are designed to
+ * take less space by providing the best user experience on smaller devices.
+ *
+ * ```html
+ * <div yuvContainerSize (containerHeight)="onContainerResize($event)" (containerWidth)="onContainerResize($event)"></div>
+ * ```
+ *
+ */
+class ContainerSizeDirective {
     constructor() {
-        this.#elRef = inject(ElementRef);
-        this.#fileOver = false;
-        this.#defaultDragOverCoverStyles = {
-            outline: '2px dashed var(--color-accent)',
-            display: 'flex',
-            transition: 'background-color .3s ease-in-out',
-            'z-index': '500',
-            'align-items': 'center',
-            'justify-content': 'center',
-            'outline-offset': '-2px',
-            'background-color': 'rgba(var(--color-accent-rgb), .5)'
-        };
-        this.#defaultDragOverCoverLabelStyles = {
-            outline: '1px solid var(--color-accent)',
-            padding: 'var(--app-pane-padding, 16px)',
-            'background-color': 'rgba(var(--color-accent-rgb), .9)',
-            color: 'var(--color-accent-tone)'
-        };
-        this.yuvFileDropZone = input();
-        this.fileDropDisabled = input(false);
-        this.fileDrop = output();
-        this.fileDropOver = output();
-    }
-    #elRef;
-    #coverElement;
-    #fileOver;
-    set fileOver(fo) {
-        if (fo !== this.#fileOver) {
-            this.#fileOver = fo;
-            this.fileDropOver.emit(fo);
-            this.#toggleCover();
-        }
-    }
-    get fileOver() {
-        return this.#fileOver;
-    }
-    #defaultDragOverCoverStyles;
-    #defaultDragOverCoverLabelStyles;
-    onDrop(event) {
-        if (this.fileDropDisabled())
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.fileOver = 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);
+        this.elRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.containerHeight = output();
+        this.containerWidth = output();
+        this._resizeObserver = new ResizeObserver((entries) => {
+            const size = entries[0].borderBoxSize[0];
+            if (!this._size || size.blockSize !== this._size.blockSize) {
+                this._emit(size.blockSize, true);
             }
-            else {
-                const files = dataTransfer.files;
-                dataTransfer.clearData();
-                this.fileDrop.emit(Array.from(files));
+            if (!this._size || size.inlineSize !== this._size.inlineSize) {
+                this._emit(size.inlineSize);
             }
-        }
+            this._size = size;
+        });
+        this._resizeObserver.observe(this.elRef.nativeElement);
     }
-    onDragOver(event) {
-        if (this.fileDropDisabled())
-            return;
-        event.stopPropagation();
-        event.preventDefault();
-        this.fileOver = true;
+    _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);
+        });
     }
-    onDragLeave(event) {
-        if (this.fileDropDisabled())
-            return;
-        if (event.target.getAttribute('id') === this.#coverElement?.getAttribute('id')) {
-            this.fileOver = false;
-        }
-    }
-    onBodyDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    onBodyDrop(event) {
-        event.preventDefault();
-    }
-    #toggleCover() {
-        const el = this.#elRef.nativeElement;
-        if (this.#coverElement) {
-            el.style.position = 'initial';
-            this.#coverElement.remove();
-            this.#coverElement = undefined;
-        }
-        if (this.#fileOver) {
-            el.style.position = 'relative';
-            this.#coverElement = this.#createCoverElement();
-            el.append(this.#coverElement);
-        }
-    }
-    #createCoverElement() {
-        const coverElement = document.createElement('div');
-        coverElement.setAttribute('id', Utils.uuid());
-        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');
-            coverLabelElement.innerText = label;
-            const labelStyles = this.yuvFileDropZone()?.coverLabelStyles || this.#defaultDragOverCoverLabelStyles;
-            Object.keys(labelStyles).forEach((k) => {
-                coverLabelElement.style[k] = labelStyles[k];
-            });
-            coverLabelElement.style.pointerEvents = 'none';
-            coverElement.append(coverLabelElement);
-        }
-        return coverElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: FileDropZoneDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvFileDropZone]',
-                    standalone: true
-                }]
-        }], propDecorators: { onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }], onBodyDragOver: [{
-                type: HostListener,
-                args: ['body:dragover', ['$event']]
-            }], onBodyDrop: [{
-                type: HostListener,
-                args: ['body:drop', ['$event']]
-            }] } });
-
-/**
- * Fixes the issue of 'click' event beeing triggered on 'doubleclick' by defining new outputs that
- * distinguish between single and double click.
- */
-class ClickDoubleDirective {
-    constructor() {
-        this.debounceTime = 200;
-        this.doubleClick = new EventEmitter();
-        this.singleClick = new EventEmitter();
-        this.clicksSubject = new Subject();
-        this.clicksSubject.pipe(takeUntilDestroyed(), debounceTime(this.debounceTime)).subscribe({
-            next: (event) => {
-                if (event.type === 'click') {
-                    this.singleClick.emit(event);
-                }
-                else {
-                    this.doubleClick.emit(event);
-                }
-            }
-        });
-    }
-    clickEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clicksSubject.next(event);
-    }
-    doubleClickEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clicksSubject.next(event);
+    ngOnDestroy() {
+        this._resizeObserver.unobserve(this.elRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickDoubleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClickDoubleDirective, isStandalone: true, selector: "[click.single],[click.double]", inputs: { debounceTime: "debounceTime" }, outputs: { doubleClick: "click.double", singleClick: "click.single" }, host: { listeners: { "click": "clickEvent($event)", "dblclick": "doubleClickEvent($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ContainerSizeDirective, isStandalone: true, selector: "[yuvContainerSize]", outputs: { containerHeight: "containerHeight", containerWidth: "containerWidth" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickDoubleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ContainerSizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[click.single],[click.double]',
+                    selector: '[yuvContainerSize]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { debounceTime: [{
-                type: Input
-            }], doubleClick: [{
-                type: Output,
-                args: ['click.double']
-            }], singleClick: [{
-                type: Output,
-                args: ['click.single']
-            }], clickEvent: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], doubleClickEvent: [{
-                type: HostListener,
-                args: ['dblclick', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
- * Directive for applying light dismiss actions. Adding this directive will trigger
- * the given function when the user clicks outside the component or hits escape.
+ * Directive for adding drag scroll behaviour to a container element. Elements that overlow will then
+ * be 'scrollable' by dragging the list of children.
  *
- * ```ts
- * <div class="notifications" (yuvLightDismiss)="close()">
+ * @example
+ * <div yuvDragScroll>
+ *   <div class="tile">#1</div>
+ *   <div class="tile">#2</div>
+ *   <div class="tile">#3</div>
  *   ...
  * </div>
- * ```
- */
-class LightDismissDirective {
-    constructor() {
-        this.elRef = inject(ElementRef);
-        this.yuvLightDismiss = output();
-    }
-    onKeydownHandler(event) {
-        if (!event.defaultPrevented) {
-            this.yuvLightDismiss.emit();
-        }
-    }
-    onMousedown(event) {
-        if (!this.elRef.nativeElement.contains(event.target)) {
-            this.yuvLightDismiss.emit();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LightDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: LightDismissDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvLightDismiss]',
-                    standalone: true
-                }]
-        }], propDecorators: { onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }], onMousedown: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
-            }] } });
-
-/**
- * Directive to watch the size of an element inside the DOM. Usefull for example to provide
- * a different layout (different components) depending on the available screen estate. You
- * should first try to use CSS container queries but somtimes you need a different set of
- * components to be loaded for a certain component size.
- *
- * Let's say you have components designed for bigger screens. You do not want to load them
- * if there is not enough space for them. So you rather load components that are designed to
- * take less space by providing the best user experience on smaller devices.
- *
- * ```html
- * <div yuvContainerSize (containerHeight)="onContainerResize($event)" (containerWidth)="onContainerResize($event)"></div>
- * ```
- *
  */
-class ContainerSizeDirective {
-    constructor() {
-        this.elRef = inject(ElementRef);
-        this.ngZone = inject(NgZone);
-        this.containerHeight = output();
-        this.containerWidth = output();
-        this._resizeObserver = new ResizeObserver((entries) => {
-            const size = entries[0].borderBoxSize[0];
-            if (!this._size || size.blockSize !== this._size.blockSize) {
-                this._emit(size.blockSize, true);
+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);
             }
-            if (!this._size || size.inlineSize !== this._size.inlineSize) {
-                this._emit(size.inlineSize);
+            else {
+                el.style.setProperty(property, draggingStyles[property]);
             }
-            this._size = size;
-        });
-        this._resizeObserver.observe(this.elRef.nativeElement);
-    }
-    _emit(value, isHeight = false) {
-        // ResizeObserver callback is not covered by change detection
-        // so it has to be executed withing ngZone
-        this.ngZone.run(() => {
-            (isHeight ? this.containerHeight : this.containerWidth).emit(value);
         });
     }
-    ngOnDestroy() {
-        this._resizeObserver.unobserve(this.elRef.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContainerSizeDirective, isStandalone: true, selector: "[yuvContainerSize]", outputs: { containerHeight: "containerHeight", containerWidth: "containerWidth" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerSizeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvContainerSize]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [] });
-
-class LongPressDirective {
-    constructor() {
-        this.elRef = inject(ElementRef);
-        this.threshold = 500;
-        this.yuvLongPress = input({
-            enabled: false
-        });
-        this.longpress = output();
-        const mousedown = fromEvent(this.elRef.nativeElement, 'mousedown').pipe(takeUntilDestroyed(), filter((event) => event.button == 0), // Only allow left button (Primary button)
-        map(() => true) // turn on threshold counter
-        );
-        const touchstart = fromEvent(this.elRef.nativeElement, 'touchstart').pipe(takeUntilDestroyed(), map(() => true));
-        const touchEnd = fromEvent(this.elRef.nativeElement, 'touchend').pipe(takeUntilDestroyed(), map(() => false));
-        const mouseup = fromEvent(window, 'mouseup').pipe(takeUntilDestroyed(), filter((event) => event.button == 0), // Only allow left button (Primary button)
-        map(() => false) // reset threshold counter
-        );
-        merge(mousedown, mouseup, touchstart, touchEnd)
-            .pipe(takeUntilDestroyed(), switchMap((state) => (state ? timer(this.threshold, 100) : of(null))), filter((value) => !!value))
-            .subscribe(() => this.longpress.emit());
+    ngAfterViewInit() {
+        const nativeElement = this.#element.nativeElement;
+        const mouseDown$ = fromEvent(nativeElement, 'mousedown');
+        const mouseMove$ = fromEvent(this.#document, 'mousemove');
+        const mouseUp$ = fromEvent(this.#document, 'mouseup').pipe(tap((e) => {
+            if (this.#dragging) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.#dragging = false;
+                this.#applyDraggingStyles(nativeElement, true);
+            }
+        }));
+        const dragMove$ = mouseDown$.pipe(filter(() => 
+        // only calculate new scroll position if the container is actually overflowing
+        nativeElement.scrollHeight > nativeElement.clientHeight || nativeElement.scrollWidth > nativeElement.clientWidth), tap((startEvent) => {
+            this.#applyDraggingStyles(nativeElement);
+            startEvent.preventDefault();
+            startEvent.stopPropagation();
+        }), switchMap((startEvent) => {
+            this.#dragging = true;
+            const scrollPos = {
+                left: nativeElement.scrollLeft,
+                top: nativeElement.scrollTop
+            };
+            return mouseMove$.pipe(map((moveEvent) => {
+                moveEvent.preventDefault();
+                moveEvent.stopPropagation();
+                return {
+                    startEvent,
+                    moveEvent,
+                    scrollPos
+                };
+            }), takeUntil(mouseUp$));
+        }), tap(({ startEvent, moveEvent, scrollPos }) => {
+            const diffX = moveEvent.clientX - startEvent.clientX;
+            const diffY = moveEvent.clientY - startEvent.clientY;
+            nativeElement.scrollLeft = scrollPos.left - diffX;
+            nativeElement.scrollTop = scrollPos.top - diffY;
+        }));
+        dragMove$.subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: LongPressDirective, isStandalone: true, selector: "[yuvLongPress]", inputs: { yuvLongPress: { classPropertyName: "yuvLongPress", publicName: "yuvLongPress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { longpress: "longpress" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: DragScrollDirective, isStandalone: true, selector: "[yuvDragScroll]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LongPressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DragScrollDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[yuvLongPress]',
-                    standalone: true
+                    selector: '[yuvDragScroll]'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class DragSelectDirective {
     constructor() {
@@ -535,7 +458,7 @@ class DragSelectDirective {
             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(--color-accent'}`;
+            this.#selector.style.border = `1px solid ${this.yuvDragSelect()?.selectorColor || 'var(--ymt-primary'}`;
             this.#checkSelected();
         };
         this.#checkSelected = () => {
@@ -590,10 +513,10 @@ class DragSelectDirective {
     #resize;
     #checkSelected;
     #checkRectIntersection;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: DragSelectDirective, isStandalone: true, selector: "[yuvDragSelect]", inputs: { yuvDragSelect: { classPropertyName: "yuvDragSelect", publicName: "yuvDragSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragSelectChange: "dragSelectChange", dragSelect: "dragSelect" }, host: { listeners: { "pointerdown": "onPointerDown($event)" } }, queries: [{ propertyName: "items", predicate: DragSelectItemDirective, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.1", 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: "18.2.13", ngImport: i0, type: DragSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DragSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvDragSelect]',
@@ -609,10 +532,10 @@ class DragSelectItemDirective {
         this.el = this.#elRef.nativeElement;
     }
     #elRef;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DragSelectItemDirective, isStandalone: true, selector: "[yuvDragSelectItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DragSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: DragSelectItemDirective, isStandalone: true, selector: "[yuvDragSelectItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragSelectItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DragSelectItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[yuvDragSelectItem]',
@@ -620,357 +543,306 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-// TODO: Move to @yuuvis/components
-class TokenInputComponent {
+class FileDropZoneDirective {
     constructor() {
-        this.elRef = inject(ElementRef);
-        this.overlay = inject(YvcOverlayService);
-        this.ngZone = inject(NgZone);
-        this.optionsTemplate = viewChild.required('options');
-        /**
-         * Template to be used for rendering selected tokens
-         */
-        this.tokenTemplate = contentChild('tokenTemplate');
-        /**
-         * Template to be used for rendering autocomplete suggestion entries
-         */
-        this.optionTemplate = contentChild('optionTemplate');
-        this.TEXT_TOKEN_TYPE = 'txt';
-        this.tokens = input([]);
-        this.caseSensitive = input(false);
-        this.change = output();
-        this._cleanFormTokens = [this._newTextToken()];
-        this.formTokens = structuredClone(this._cleanFormTokens);
-        this.autocompleteValues = [];
-        this.autocompleteSelectedIndex = -1;
-        this.focusedTokenIndex = -1;
-    }
-    onArrowUpKey(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.autocompleteSelectedIndex > 0)
-            this.autocompleteSelectedIndex--;
-    }
-    onArrowDownKey(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.autocompleteValues && this.autocompleteSelectedIndex < this.autocompleteValues.length - 1)
-            this.autocompleteSelectedIndex++;
-    }
-    onEnterKey(event) {
-        if (this.autocompleteValues.length && this.autocompleteSelectedIndex >= 0) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.onOptionSelect(this.autocompleteValues[this.autocompleteSelectedIndex]);
-        }
+        this.#elRef = inject(ElementRef);
+        this.#fileOver = false;
+        this.#defaultDragOverCoverStyles = {
+            outline: '2px dashed var(--ymt-primary)',
+            display: 'flex',
+            transition: 'background-color .3s ease-in-out',
+            'z-index': '500',
+            'align-items': 'center',
+            'justify-content': 'center',
+            'outline-offset': '-2px',
+            'background-color': 'rgb(from var(--ymt-primary) r g b / .5)'
+        };
+        this.#defaultDragOverCoverLabelStyles = {
+            outline: '1px solid var(--ymt-primary)',
+            padding: 'var(--ymt-spacing-m, 16px)',
+            'background-color': 'rgb(from var(--ymt-primary) r g b / 0.9)',
+            color: 'var(--ymt-on-primary)'
+        };
+        this.yuvFileDropZone = input();
+        this.fileDropDisabled = input(false);
+        this.fileDrop = output();
+        this.fileDropOver = output();
     }
-    clear() {
-        this.formTokens = structuredClone(this._cleanFormTokens);
-        this._inputElement.innerText = '';
-        this._emitChange(true);
-    }
-    onInputFocus(e) {
-        this._inputElement = e.target;
-        this.focusedTokenIndex = this._inputElement ? this.formTokens.findIndex((t) => t.id === this._inputElement.getAttribute('data-id')) : -1;
-        // console.log('FIndex: ' + this.focusedTokenIndex);
-    }
-    onInput(e) {
-        this._processValue();
-        this._emitChange();
-    }
-    onArrowLeft(e) {
-        const cp = this._getCaretPos(e.target);
-        if (cp === 0) {
-            e.stopPropagation();
-            e.preventDefault();
-            this._focusInput(-1);
-        }
-    }
-    onArrowRight(e) {
-        const cp = this._getCaretPos(e.target);
-        if (cp === e.target.innerText.length) {
-            e.stopPropagation();
-            e.preventDefault();
-            this._focusInput(1);
+    #elRef;
+    #coverElement;
+    #fileOver;
+    set fileOver(fo) {
+        if (fo !== this.#fileOver) {
+            this.#fileOver = fo;
+            this.fileDropOver.emit(fo);
+            this.#toggleCover();
         }
     }
-    onDelete(e, index) {
-        const cp = this._getCaretPos(e.target);
-        if (cp === e.target.innerText.length) {
-            e.stopPropagation();
-            e.preventDefault();
-            // remove next token
-            if (index < this.formTokens.length - 2) {
-                this.formTokens.splice(index + 1, 1);
-                // if prev token is also a text token => merge
-                const nextIdx = index + 1;
-                if (nextIdx < this.formTokens.length && this.formTokens[nextIdx].type === this.TEXT_TOKEN_TYPE) {
-                    const content = this.formTokens[index].label;
-                    const nextContent = this.formTokens[nextIdx].label;
-                    const mergedToken = {
-                        id: this.formTokens[index + 1].id,
-                        label: `${content} ${nextContent}`,
-                        type: this.TEXT_TOKEN_TYPE
-                    };
-                    this.formTokens.splice(index + 1, 2, mergedToken);
-                    const el = this.elRef.nativeElement.querySelector(`[data-id="${this.formTokens[index + 1].id}"]`);
-                    if (el) {
-                        el.innerText = mergedToken.label;
-                        this._setCaretPos(el, content.length);
+    get fileOver() {
+        return this.#fileOver;
+    }
+    #defaultDragOverCoverStyles;
+    #defaultDragOverCoverLabelStyles;
+    onDrop(event) {
+        if (this.fileDropDisabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.fileOver = 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);
                     }
                 }
-                this._emitChange();
+                dataTransfer.items.clear();
+                this.fileDrop.emit(files);
+            }
+            else {
+                const files = dataTransfer.files;
+                dataTransfer.clearData();
+                this.fileDrop.emit(Array.from(files));
             }
         }
     }
-    onBackspace(e, index) {
-        const cp = this._getCaretPos(e.target);
-        if (cp === 0) {
-            e.stopPropagation();
-            e.preventDefault();
-            // remove prev token
-            if (index > 0) {
-                this.formTokens.splice(index - 1, 1);
-                // if prev token is also a text token => merge
-                const prevIdx = index - 2;
-                if (prevIdx >= 0 && this.formTokens[prevIdx].type === this.TEXT_TOKEN_TYPE) {
-                    const content = this.formTokens[index - 1].label;
-                    const prevContent = this.formTokens[prevIdx].label;
-                    const mergedToken = {
-                        id: this.formTokens[prevIdx].id,
-                        label: `${prevContent} ${content}`,
-                        type: this.TEXT_TOKEN_TYPE
-                    };
-                    this.formTokens.splice(prevIdx, 2, mergedToken);
-                    const el = this.elRef.nativeElement.querySelector(`[data-id="${this.formTokens[prevIdx].id}"]`);
-                    if (el) {
-                        el.innerText = mergedToken.label;
-                        this._setCaretPos(el, prevContent.length);
-                    }
-                }
-                else {
-                    this._focusFirst();
-                }
-                this._emitChange();
-            }
+    onDragOver(event) {
+        if (this.fileDropDisabled())
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        this.fileOver = true;
+    }
+    onDragLeave(event) {
+        if (this.fileDropDisabled())
+            return;
+        if (event.target.getAttribute('id') === this.#coverElement?.getAttribute('id')) {
+            this.fileOver = false;
         }
     }
-    _focusFirst() {
-        const el = this.elRef.nativeElement.querySelector(`[contenteditable]`);
-        if (el)
-            setTimeout(() => {
-                el?.focus();
-            });
+    onBodyDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onBodyDrop(event) {
+        event.preventDefault();
     }
-    _focusInput(offset) {
-        const inputs = Array.from(this.elRef.nativeElement.querySelectorAll('[contenteditable]'));
-        let i = inputs.findIndex((i) => i === document.activeElement);
-        i = i + offset;
-        if (i > inputs.length - 1)
-            i = 0;
-        if (i < 0)
-            i = inputs.length - 1;
-        this.ngZone.run(() => inputs[i].focus());
-        this._setCaretPos(inputs[i], offset > 0 || inputs[i].innerText.length === 0 ? 0 : inputs[i].innerText.length);
-    }
-    _setCaretPos(element, pos) {
-        const targetNode = element.childNodes.length ? element.childNodes[0] : element;
-        const range = document.createRange();
-        range.selectNode(element);
-        range.setStart(targetNode, pos);
-        range.setEnd(targetNode, pos);
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-    }
-    _getCaretPos(node) {
-        const selection = window.getSelection();
-        const range = selection.getRangeAt(0);
-        const clonedRange = range.cloneRange();
-        clonedRange.selectNodeContents(node);
-        clonedRange.setEnd(range.endContainer, range.endOffset);
-        return clonedRange.toString().length;
-    }
-    onOptionSelect(o) {
-        let tokensAdded = 0;
-        let tokensRemoved = 0;
-        const inputValue = this._getInputValue();
-        const wordTokens = this._tokenize(inputValue);
-        const lastWord = wordTokens[wordTokens.length - 1];
-        if (lastWord.length === inputValue.length) {
-            this.formTokens.pop();
-            tokensRemoved++;
+    #toggleCover() {
+        const el = this.#elRef.nativeElement;
+        if (this.#coverElement) {
+            el.style.position = 'initial';
+            this.#coverElement.remove();
+            this.#coverElement = undefined;
         }
-        this.formTokens.splice(this.focusedTokenIndex + 1, 0, structuredClone(o));
-        tokensAdded++;
-        const shadowTokens = [];
-        // check for inbetween tokens
-        let txtTokenCount = -1;
-        this.formTokens.forEach((t, i) => {
-            if (t.type === this.TEXT_TOKEN_TYPE) {
-                txtTokenCount++;
-                t.id = this._textTokenId(txtTokenCount);
-            }
-            shadowTokens.push(t);
-            const nextToken = this.formTokens[i + 1];
-            if (t.type !== this.TEXT_TOKEN_TYPE && nextToken && nextToken.type !== this.TEXT_TOKEN_TYPE) {
-                // add inbetween token
-                txtTokenCount++;
-                shadowTokens.push(this._newTextToken(txtTokenCount));
-                tokensAdded++;
-            }
-        });
-        if (this.formTokens[this.formTokens.length - 1].type !== this.TEXT_TOKEN_TYPE) {
-            // add empty text token at the end
-            txtTokenCount++;
-            shadowTokens.push(this._newTextToken(txtTokenCount));
-            tokensAdded++;
+        if (this.#fileOver) {
+            el.style.position = 'relative';
+            this.#coverElement = this.#createCoverElement();
+            el.append(this.#coverElement);
         }
-        this.formTokens = shadowTokens;
-        this._inputElement.innerText = inputValue.substring(0, inputValue.length - lastWord.length).trim();
-        this._emitChange();
-        setTimeout(() => {
-            // console.log(`fi: ${this.focusedTokenIndex}, ta: ${tokensAdded}, tr: ${tokensRemoved}, ne: ${this.focusedTokenIndex + (tokensAdded - tokensRemoved)}`);
-            this._focusTokenInput(this.focusedTokenIndex + (tokensAdded - tokensRemoved));
+    }
+    #createCoverElement() {
+        const coverElement = document.createElement('div');
+        coverElement.setAttribute('id', Utils.uuid());
+        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];
         });
-        this.closeOptions();
-    }
-    _focusTokenInput(index) {
-        const selector = index === undefined ? 'div:last-child' : `div:nth-child(${index + 1})`;
-        console.log(selector);
-        const lastInput = this.elRef.nativeElement.querySelector(selector);
-        lastInput.focus();
-        return lastInput;
-    }
-    // private _focusInput(): HTMLElement {
-    //   const lastInput: HTMLElement = (
-    //     this.elRef.nativeElement as HTMLElement
-    //   ).querySelector('[contenteditable]:last-child') as HTMLElement;
-    //   lastInput.focus();
-    //   return lastInput;
-    // }
-    openOptions() {
-        if (this._overlayRef || !this.autocompleteValues.length)
-            return;
-        this._overlayRef = this.overlay.open(this.optionsTemplate(), null, {
-            lightDismiss: true,
-            maxHeight: '97vh'
-        }, this.elRef);
-    }
-    closeOptions() {
-        if (this._overlayRef) {
-            this._overlayRef.close();
-            this._overlayRef = undefined;
+        const label = this.yuvFileDropZone()?.label;
+        if (label) {
+            const coverLabelElement = document.createElement('div');
+            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);
         }
-        this.autocompleteSelectedIndex = -1;
-        this.autocompleteValues = [];
+        return coverElement;
     }
-    onTokenEnter(e) {
-        e.preventDefault();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FileDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: FileDropZoneDirective, isStandalone: true, selector: "[yuvFileDropZone]", inputs: { yuvFileDropZone: { classPropertyName: "yuvFileDropZone", publicName: "yuvFileDropZone", isSignal: true, isRequired: false, transformFunction: null }, fileDropDisabled: { classPropertyName: "fileDropDisabled", publicName: "fileDropDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDrop: "fileDrop", fileDropOver: "fileDropOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "body:dragover": "onBodyDragOver($event)", "body:drop": "onBodyDrop($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FileDropZoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvFileDropZone]',
+                    standalone: true
+                }]
+        }], propDecorators: { onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onBodyDragOver: [{
+                type: HostListener,
+                args: ['body:dragover', ['$event']]
+            }], onBodyDrop: [{
+                type: HostListener,
+                args: ['body:drop', ['$event']]
+            }] } });
+
+/**
+ * Directive keeping track of the focus beeing within a component. Once the component or
+ * any of its child components gain focus, a class of `focusWithin` will be set on the
+ * host component in order to allow styling it while beeing focused. Furthermore you can
+ * register callbacks once the component gets or looses focus.
+ *
+ * @example
+ * // just set the css class
+ * <some-component yuvFocusWithin></some-component>
+ * // set the css class and listen to focus changes
+ * <some-component (yuvFocusWithin)="onFocusEnter()" (yuvFocusWithinBlur)="onFocusLeave()"></some-component>
+ */
+class FocusWithinDirective {
+    onFocusIn(evt) {
+        const hadFocusWithin = this.hasFocusWithin;
+        this.hasFocusWithin = this.matchesFocusWithin();
+        if (!hadFocusWithin && this.hasFocusWithin) {
+            this.yuvFocusWithin.emit();
+        }
     }
-    _emitChange(focusFirst = false) {
-        // need to set timeout so DOM changes are applied before accessing elements
-        setTimeout(() => {
-            this.formTokens.forEach((t) => {
-                if (t.type === this.TEXT_TOKEN_TYPE) {
-                    const el = this.elRef.nativeElement.querySelector(`[data-id="${t.id}"]`);
-                    if (el)
-                        t.label = el.innerText;
-                }
-            });
-            this.change.emit(this.formTokens
-                .filter((t) => t.type !== this.TEXT_TOKEN_TYPE || t.label.length > 0)
-                .map((t) => ({
-                id: t.id,
-                label: t.label,
-                type: t.type
-            })));
-            if (focusFirst)
-                this._focusFirst();
-        });
+    onFocusOut(evt) {
+        const hadFocusWithin = this.hasFocusWithin;
+        this.hasFocusWithin = this.matchesFocusWithin();
+        if (hadFocusWithin && !this.hasFocusWithin) {
+            this.yuvFocusWithinBlur.emit();
+        }
     }
-    _newTextToken(idx) {
-        const index = idx !== undefined ? idx : this.formTokens?.length ? this.formTokens.filter((t) => t.type === this.TEXT_TOKEN_TYPE).length : 0;
-        return {
-            id: this._textTokenId(index),
-            label: '',
-            type: this.TEXT_TOKEN_TYPE
-        };
+    /**
+     * @ignore
+     */
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.eventCount = 0;
+        this.hasFocusWithin = false;
+        /**
+         * Emitted once the component or any of its child components gains focus.
+         */
+        this.yuvFocusWithin = new EventEmitter();
+        /**
+         * Emitted once the component (incl. any of its child components) looses focus.
+         */
+        this.yuvFocusWithinBlur = new EventEmitter();
     }
-    _textTokenId(i) {
-        return `txt_${i}`;
-    }
-    _tokenize(value) {
-        const wordTokens = value.split(/\W+/).filter((t) => t?.length);
-        return wordTokens;
-    }
-    _getInputValue() {
-        return this._inputElement.innerText.replaceAll('&nbsp;', '');
-    }
-    _processValue() {
-        const wordTokens = this._tokenize(this._getInputValue());
-        const lastWord = wordTokens[wordTokens.length - 1];
-        this.autocompleteValues =
-            !lastWord || lastWord.length < 2
-                ? []
-                : this.tokens().filter((t) => lastWord && new RegExp(lastWord, this.caseSensitive() ? '' : 'i').test(t.label));
-        this.autocompleteSelectedIndex = this.autocompleteValues.length ? 0 : -1;
-        if (this.autocompleteValues.length)
-            this.openOptions();
-        else
-            this.closeOptions();
+    // Determine if the given node matches the given selector.
+    // @see: https://www.bennadel.com/blog/3476-checking-to-see-if-an-element-has-a-css-pseudo-class-in-javascript.htm
+    matchesFocusWithin() {
+        const node = this.elRef.nativeElement;
+        const nativeMatches = node.matches || node.msMatchesSelector;
+        try {
+            return nativeMatches.call(node, ':focus-within');
+        }
+        catch (error) {
+            return false;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TokenInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TokenInputComponent, isStandalone: true, selector: "yuv-token-input", inputs: { tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "keydown.arrowUp": "onArrowUpKey($event)", "keydown.arrowDown": "onArrowDownKey($event)", "keydown.enter": "onEnterKey($event)" } }, queries: [{ propertyName: "tokenTemplate", first: true, predicate: ["tokenTemplate"], descendants: true, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["options"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- fi {{focusedTokenIndex}} -->\n\n@for (ft of formTokens; let i = $index; track $index) {\n  @if (ft.type === TEXT_TOKEN_TYPE) {\n    <div\n      contenteditable\n      [attr.data-id]=\"ft.id\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onInputFocus($event)\"\n      (keydown.enter)=\"onTokenEnter($event)\"\n      (keydown.arrowLeft)=\"onArrowLeft($event)\"\n      (keydown.arrowRight)=\"onArrowRight($event)\"\n      (keydown.delete)=\"onDelete($event, i)\"\n      (keydown.backspace)=\"onBackspace($event, i)\"\n    ></div>\n  } @else {\n    @if (tokenTemplate()) {\n      <ng-container *ngTemplateOutlet=\"tokenTemplate()!; context: { $implicit: ft }\"></ng-container>\n    } @else {\n      <div class=\"chip\">{{ ft.label }}</div>\n    }\n  }\n}\n\n<ng-template #options>\n  <yvc-autocomplete-options\n    class=\"popover animateIn\"\n    [values]=\"autocompleteValues\"\n    [(focusedIndex)]=\"autocompleteSelectedIndex\"\n    [autocompleteOptionTemplate]=\"optionTemplate() || null\"\n    (optionSelect)=\"onOptionSelect($event)\"\n    [field]=\"'label'\"\n  ></yvc-autocomplete-options>\n</ng-template>\n", styles: [":host{--token-input-chip-border-color: var(--item-focus-border-color);--token-input-chip-background-color: var(--item-focus-background-color);--token-padding-y: .15em;display:flex;align-items:center;flex-flow:row wrap;padding:2px}:host [contenteditable],:host .chip{border:1px solid transparent;border-radius:2px}:host [contenteditable]{display:inline-block;padding:var(--token-padding-y) 2px;min-width:1px}:host [contenteditable]:focus-visible{outline:0}:host [contenteditable]:last-child{flex:1}:host .chip{padding:var(--token-padding-y) .25em;border-color:var(--token-input-chip-border-color);background-color:var(--token-input-chip-background-color)}:host .chip>span{font-size:var(--font-hint);color:var(--text-color-hint)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: YvcAutocompleteModule }, { kind: "component", type: i2.AutocompleteOptionsComponent, selector: "yvc-autocomplete-options", inputs: ["autocompleteOptionTemplate", "values", "field", "focusedIndex"], outputs: ["focusedIndexChange", "optionSelect"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FocusWithinDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: FocusWithinDirective, isStandalone: true, selector: "[yuvFocusWithin]", outputs: { yuvFocusWithin: "yuvFocusWithin", yuvFocusWithinBlur: "yuvFocusWithinBlur" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)" }, properties: { "class.focusWithin": "this.hasFocusWithin" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TokenInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-token-input', standalone: true, imports: [CommonModule, YvcAutocompleteModule], template: "<!-- fi {{focusedTokenIndex}} -->\n\n@for (ft of formTokens; let i = $index; track $index) {\n  @if (ft.type === TEXT_TOKEN_TYPE) {\n    <div\n      contenteditable\n      [attr.data-id]=\"ft.id\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onInputFocus($event)\"\n      (keydown.enter)=\"onTokenEnter($event)\"\n      (keydown.arrowLeft)=\"onArrowLeft($event)\"\n      (keydown.arrowRight)=\"onArrowRight($event)\"\n      (keydown.delete)=\"onDelete($event, i)\"\n      (keydown.backspace)=\"onBackspace($event, i)\"\n    ></div>\n  } @else {\n    @if (tokenTemplate()) {\n      <ng-container *ngTemplateOutlet=\"tokenTemplate()!; context: { $implicit: ft }\"></ng-container>\n    } @else {\n      <div class=\"chip\">{{ ft.label }}</div>\n    }\n  }\n}\n\n<ng-template #options>\n  <yvc-autocomplete-options\n    class=\"popover animateIn\"\n    [values]=\"autocompleteValues\"\n    [(focusedIndex)]=\"autocompleteSelectedIndex\"\n    [autocompleteOptionTemplate]=\"optionTemplate() || null\"\n    (optionSelect)=\"onOptionSelect($event)\"\n    [field]=\"'label'\"\n  ></yvc-autocomplete-options>\n</ng-template>\n", styles: [":host{--token-input-chip-border-color: var(--item-focus-border-color);--token-input-chip-background-color: var(--item-focus-background-color);--token-padding-y: .15em;display:flex;align-items:center;flex-flow:row wrap;padding:2px}:host [contenteditable],:host .chip{border:1px solid transparent;border-radius:2px}:host [contenteditable]{display:inline-block;padding:var(--token-padding-y) 2px;min-width:1px}:host [contenteditable]:focus-visible{outline:0}:host [contenteditable]:last-child{flex:1}:host .chip{padding:var(--token-padding-y) .25em;border-color:var(--token-input-chip-border-color);background-color:var(--token-input-chip-background-color)}:host .chip>span{font-size:var(--font-hint);color:var(--text-color-hint)}\n"] }]
-        }], propDecorators: { onArrowUpKey: [{
-                type: HostListener,
-                args: ['keydown.arrowUp', ['$event']]
-            }], onArrowDownKey: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FocusWithinDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvFocusWithin]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasFocusWithin: [{
+                type: HostBinding,
+                args: ['class.focusWithin']
+            }], onFocusIn: [{
                 type: HostListener,
-                args: ['keydown.arrowDown', ['$event']]
-            }], onEnterKey: [{
+                args: ['focusin', ['$event']]
+            }], onFocusOut: [{
                 type: HostListener,
-                args: ['keydown.enter', ['$event']]
+                args: ['focusout', ['$event']]
+            }], yuvFocusWithin: [{
+                type: Output
+            }], yuvFocusWithinBlur: [{
+                type: Output
             }] } });
 
-class FocusIndicatorComponent {
-    #elRef = inject(ElementRef);
+/**
+ * Directive for applying light dismiss actions. Adding this directive will trigger
+ * the given function when the user clicks outside the component or hits escape.
+ *
+ * ```ts
+ * <div class="notifications" (yuvLightDismiss)="close()">
+ *   ...
+ * </div>
+ * ```
+ */
+class LightDismissDirective {
     constructor() {
-        fromEvent(document, 'keyup')
-            .pipe(takeUntilDestroyed(), filter$1((e) => e.code === 'Tab'))
-            .subscribe(() => this.#position());
-        fromEvent(document, 'focusout')
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            const fi = this.#elRef.nativeElement;
-            fi.classList.remove('visible');
-        });
+        this.elRef = inject(ElementRef);
+        this.yuvLightDismiss = output();
     }
-    #position() {
-        setTimeout(() => {
-            const focusedElement = document.activeElement;
-            const fi = this.#elRef.nativeElement;
-            if (fi && focusedElement && focusedElement.matches(':focus-visible')) {
-                fi.classList.add('visible');
-                const { left, top, width, height } = focusedElement.getBoundingClientRect();
-                fi.style.translate = ` ${Math.round(left)}px ${Math.round(top)}px`;
-                fi.style.width = `${Math.round(width)}px`;
-                fi.style.height = `${Math.round(height)}px`;
-            }
+    onKeydownHandler(event) {
+        if (!event.defaultPrevented) {
+            this.yuvLightDismiss.emit();
+        }
+    }
+    onMousedown(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.yuvLightDismiss.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LightDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: LightDismissDirective, isStandalone: true, selector: "[yuvLightDismiss]", outputs: { yuvLightDismiss: "yuvLightDismiss" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LightDismissDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvLightDismiss]',
+                    standalone: true
+                }]
+        }], propDecorators: { onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], onMousedown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class LongPressDirective {
+    constructor() {
+        this.elRef = inject(ElementRef);
+        this.threshold = 500;
+        this.yuvLongPress = input({
+            enabled: false
         });
+        this.longpress = output();
+        const mousedown = fromEvent(this.elRef.nativeElement, 'mousedown').pipe(takeUntilDestroyed(), filter((event) => event.button == 0), // Only allow left button (Primary button)
+        map(() => true) // turn on threshold counter
+        );
+        const touchstart = fromEvent(this.elRef.nativeElement, 'touchstart').pipe(takeUntilDestroyed(), map(() => true));
+        const touchEnd = fromEvent(this.elRef.nativeElement, 'touchend').pipe(takeUntilDestroyed(), map(() => false));
+        const mouseup = fromEvent(window, 'mouseup').pipe(takeUntilDestroyed(), filter((event) => event.button == 0), // Only allow left button (Primary button)
+        map(() => false) // reset threshold counter
+        );
+        merge(mousedown, mouseup, touchstart, touchEnd)
+            .pipe(takeUntilDestroyed(), switchMap((state) => (state ? timer(this.threshold, 100) : of(null))), filter((value) => !!value))
+            .subscribe(() => this.longpress.emit());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FocusIndicatorComponent, isStandalone: true, selector: "yuv-focus-indicator", host: { attributes: { "inert": "true" } }, ngImport: i0, template: '', isInline: true, styles: [":host{--outline-color: rgba(var(--color-accent-rgb), .4);--outline-width: 2px;--outline-offset: 1px;--border-radius: var(--outline-width);display:block;position:absolute;inset-inline-start:0;inset-block-start:0;opacity:0;outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--border-radius);transition:all .15s ease}:host.visible{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", 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: "18.2.13", ngImport: i0, type: FocusIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-focus-indicator', standalone: true, imports: [CommonModule], template: '', host: {
-                        inert: 'true'
-                    }, styles: [":host{--outline-color: rgba(var(--color-accent-rgb), .4);--outline-width: 2px;--outline-offset: 1px;--border-radius: var(--outline-width);display:block;position:absolute;inset-inline-start:0;inset-block-start:0;opacity:0;outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset);border-radius:var(--border-radius);transition:all .15s ease}:host.visible{opacity:1}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LongPressDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvLongPress]',
+                    standalone: true
+                }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -980,16 +852,16 @@ class NoopValueAccessorDirective {
     writeValue(obj) { }
     registerOnChange(fn) { }
     registerOnTouched(fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: NoopValueAccessorDirective, isStandalone: true, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: NoopValueAccessorDirective, isStandalone: true, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: forwardRef(() => NoopValueAccessorDirective),
-            },
+                useExisting: forwardRef(() => NoopValueAccessorDirective)
+            }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -997,80 +869,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: forwardRef(() => NoopValueAccessorDirective),
-                        },
-                    ],
+                            useExisting: forwardRef(() => NoopValueAccessorDirective)
+                        }
+                    ]
                 }]
         }] });
-function injectNgControl() {
+function injectNgControl(cva) {
     const ngControl = inject(NgControl, { self: true, optional: true });
     if (!ngControl)
-        throw new Error('...');
+        return null;
     if (ngControl instanceof FormControlDirective || ngControl instanceof FormControlName || ngControl instanceof NgModel) {
+        if (cva)
+            ngControl.valueAccessor = cva;
         return ngControl;
     }
     throw new Error('...');
 }
 
-class ErrorMessagesService {
+const directives = [
+    BusyOverlayDirective,
+    FocusWithinDirective,
+    FileDropZoneDirective,
+    ClickDoubleDirective,
+    LightDismissDirective,
+    ContainerSizeDirective,
+    LongPressDirective,
+    DragSelectDirective,
+    DragScrollDirective,
+    NoopValueAccessorDirective,
+    AutofocusChildDirective,
+    AutofocusDelayedDirective
+];
+const components = [ConfirmComponent];
+class YuvCommonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: YuvCommonModule, imports: [BusyOverlayDirective,
+            FocusWithinDirective,
+            FileDropZoneDirective,
+            ClickDoubleDirective,
+            LightDismissDirective,
+            ContainerSizeDirective,
+            LongPressDirective,
+            DragSelectDirective,
+            DragScrollDirective,
+            NoopValueAccessorDirective,
+            AutofocusChildDirective,
+            AutofocusDelayedDirective, ConfirmComponent], exports: [BusyOverlayDirective,
+            FocusWithinDirective,
+            FileDropZoneDirective,
+            ClickDoubleDirective,
+            LightDismissDirective,
+            ContainerSizeDirective,
+            LongPressDirective,
+            DragSelectDirective,
+            DragScrollDirective,
+            NoopValueAccessorDirective,
+            AutofocusChildDirective,
+            AutofocusDelayedDirective, ConfirmComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvCommonModule, imports: [components] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", 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:';
+    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);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutSettingsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutSettingsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+class AbstractMatFormField {
     constructor() {
-        this.translate = inject(TranslateService);
-    }
-    getErrorLabel(error, params) {
-        console.log('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 'classif icationemail':
-                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':
-                console.log('required', params);
-                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);
-            case 'empty':
-                return this.translate.instant('yuv.object-form-element.recent-activities.list.empty', params);
-            default:
-                console.log('default', error, params);
-                return this.translate.instant(error, params);
+        this.stateChanges = new Subject();
+        this.elRef = inject(ElementRef);
+        this.#value = signal(null);
+        this.#id = signal('');
+        this.#placeholder = signal('');
+        this.ngControl = null;
+        this.#focused = signal(false);
+        this.#empty = signal(false);
+        this.#required = signal(false);
+        this.#disabled = signal(false);
+        this.focusHandled = signal(false);
+        this.#errorState = signal(false);
+    }
+    onFocusIn() {
+        this.focused = true;
+    }
+    onFocusout() {
+        this.focused = false;
+    }
+    #value;
+    set value(v) {
+        this.#value.set(v);
+        this.empty = !v;
+        this.stateChanges.next();
+    }
+    get value() {
+        return this.#value();
+    }
+    #id;
+    set id(v) {
+        this.#id.set(v);
+        this.stateChanges.next();
+    }
+    get id() {
+        return this.#id();
+    }
+    #placeholder;
+    set placeholder(v) {
+        this.#placeholder.set(v);
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this.#placeholder();
+    }
+    #focused;
+    set focused(f) {
+        this.#focused.set(f);
+        this.stateChanges.next();
+    }
+    get focused() {
+        return this.#focused();
+    }
+    // #shouldLabelFloat = signal<boolean>(false);
+    // set shouldLabelFloat(f: boolean) {
+    //   this.#shouldLabelFloat.set(f);
+    //   this.stateChanges.next();
+    // }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty || !!this.ngControl?.invalid;
+    }
+    #empty;
+    set empty(f) {
+        this.#empty.set(f);
+        this.stateChanges.next();
+    }
+    get empty() {
+        return this.#empty();
+    }
+    #required;
+    set required(f) {
+        this.#required.set(coerceBooleanProperty(f));
+        this.stateChanges.next();
+    }
+    get required() {
+        return this.#required();
+    }
+    #disabled;
+    set disabled(f) {
+        this.#disabled.set(coerceBooleanProperty(f));
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this.#disabled();
+    }
+    #errorState;
+    set errorState(f) {
+        this.#errorState.set(coerceBooleanProperty(f));
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.#errorState();
+    }
+    setDescribedByIds(ids) {
+        // this.describedBy = ids.join(' ');
+    }
+    onContainerClick(event) {
+        if (this.focusHandled())
+            return;
+        const fe = getFocusableChildren(this.elRef.nativeElement);
+        if (!fe.includes(event.target)) {
+            fe[0].focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ErrorMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ErrorMessagesService, providedIn: 'root' }); }
+    onNgOnDestroy() {
+        this.stateChanges.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AbstractMatFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AbstractMatFormField, isStandalone: true, selector: "ng-component", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusout()" } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AbstractMatFormField, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusout: [{
+                type: HostListener,
+                args: ['focusout']
+            }], 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 ConfirmService {
+    #dialog = inject(MatDialog);
+    confirm(data) {
+        return this.#dialog
+            .open(ConfirmComponent, {
+            data
+        })
+            .afterClosed()
+            .pipe(map((result) => !!result));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ErrorMessagesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1081,5 +1154,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BusyOverlayDirective, ClickDoubleDirective, ContainerSizeDirective, DragSelectDirective, DragSelectItemDirective, ErrorMessagesService, FileDropZoneDirective, FocusIndicatorComponent, FocusWithinDirective, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, TokenInputComponent, injectNgControl };
+export { AbstractMatFormField, AutofocusChildDirective, AutofocusDelayedDirective, BusyOverlayDirective, ClickDoubleDirective, ConfirmComponent, ConfirmService, ContainerSizeDirective, DialogComponent, DialogSize, DragScrollDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusWithinDirective, LayoutSettingsService, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, YuvCommonModule, getFirstFocusableChild, getFocusableChildren, injectNgControl };
 //# sourceMappingURL=yuuvis-client-framework-common.mjs.map