@yuuvis/client-framework 0.6.5

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

@@ -0,0 +1,1020 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, HostBinding, Input, EventEmitter, HostListener, Output, input, output, NgZone, contentChildren, computed, viewChild, contentChild, Component, forwardRef } from '@angular/core';
+import { Utils } from '@yuuvis/client-core';
+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 { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
+
+/**
+ * A directive that will overlay its host component with a translucent background
+ * and a loading spinner once the condition resolves with true. This is useful for example to
+ * prevent user intercation while component data is loading or some processing is done.
+ *
+ * It'll also set the `inert` attribute on the host element. This will disable the host and
+ * all elements inside (like buttons, inputs etc.)
+ *
+ * @example
+ * <div class="result-list" [yuvBusyOverlay]="waitingForServerResponse">...</div>
+ *
+ */
+class BusyOverlayDirective {
+    constructor() {
+        this.stylePosition = 'initial';
+        this.#elRef = inject(ElementRef);
+        this.#overlayId = null;
+    }
+    #elRef;
+    #overlayId;
+    /**
+     * The Boolean expression to evaluate as the condition for showing the busy overlay
+     */
+    set yuvBusyOverlay(b) {
+        if (b === true) {
+            this.#addBusyOverlay();
+        }
+        else if (this.#overlayId) {
+            this.#removeBusyOverlay();
+        }
+    }
+    #addBusyOverlay() {
+        this.stylePosition = 'relative';
+        const overlay = document.createElement('div');
+        overlay.style.position = 'absolute';
+        overlay.style.transition = 'opacity 200ms';
+        overlay.style.opacity = '0';
+        overlay.style.inset = '0';
+        overlay.style.display = 'grid';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.zIndex = '5';
+        overlay.style.backgroundColor = 'var(--busy-overlay-background)';
+        this.#overlayId = `p${Utils.uuid()}`;
+        overlay.setAttribute('id', this.#overlayId);
+        const spinner = document.createElement('div');
+        spinner.setAttribute('class', 'yuv-loader');
+        overlay.append(spinner);
+        const el = this.#elRef.nativeElement;
+        el.setAttribute('inert', '');
+        el.append(overlay);
+        setTimeout(() => {
+            overlay.style.opacity = '1';
+        });
+    }
+    #removeBusyOverlay() {
+        const el = this.#elRef.nativeElement.querySelector(`#${this.#overlayId}`);
+        if (el) {
+            el.style.opacity = '0';
+            setTimeout(() => {
+                el.remove();
+            }, 200);
+        }
+        this.#elRef.nativeElement.removeAttribute('inert');
+        this.#overlayId = null;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BusyOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvBusyOverlay]',
+                    standalone: true
+                }]
+        }], propDecorators: { stylePosition: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], yuvBusyOverlay: [{
+                type: Input
+            }] } });
+
+/**
+ * Directive keeping track of the focus beeing within a component. Once the component or
+ * any of its child components gain focus, a class of `focusWithin` will be set on the
+ * host component in order to allow styling it while beeing focused. Furthermore you can
+ * register callbacks once the component gets or looses focus.
+ *
+ * @example
+ * // just set the css class
+ * <some-component yuvFocusWithin></some-component>
+ * // set the css class and listen to focus changes
+ * <some-component (yuvFocusWithin)="onFocusEnter()" (yuvFocusWithinBlur)="onFocusLeave()"></some-component>
+ */
+class FocusWithinDirective {
+    onFocusIn(evt) {
+        const hadFocusWithin = this.hasFocusWithin;
+        this.hasFocusWithin = this.matchesFocusWithin();
+        if (!hadFocusWithin && this.hasFocusWithin) {
+            this.yuvFocusWithin.emit();
+        }
+    }
+    onFocusOut(evt) {
+        const hadFocusWithin = this.hasFocusWithin;
+        this.hasFocusWithin = this.matchesFocusWithin();
+        if (hadFocusWithin && !this.hasFocusWithin) {
+            this.yuvFocusWithinBlur.emit();
+        }
+    }
+    /**
+     * @ignore
+     */
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.eventCount = 0;
+        this.hasFocusWithin = false;
+        /**
+         * Emitted once the component or any of its child components gains focus.
+         */
+        this.yuvFocusWithin = new EventEmitter();
+        /**
+         * Emitted once the component (incl. any of its child components) looses focus.
+         */
+        this.yuvFocusWithinBlur = new EventEmitter();
+    }
+    // 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;
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: ['focusin', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], yuvFocusWithin: [{
+                type: Output
+            }], yuvFocusWithinBlur: [{
+                type: Output
+            }] } });
+
+class FileDropZoneDirective {
+    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);
+            }
+            else {
+                const files = dataTransfer.files;
+                dataTransfer.clearData();
+                this.fileDrop.emit(Array.from(files));
+            }
+        }
+    }
+    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;
+        }
+    }
+    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);
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickDoubleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[click.single],[click.double]',
+                    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']]
+            }] } });
+
+/**
+ * Directive for applying light dismiss actions. Adding this directive will trigger
+ * the given function when the user clicks outside the component or hits escape.
+ *
+ * ```ts
+ * <div class="notifications" (yuvLightDismiss)="close()">
+ *   ...
+ * </div>
+ * ```
+ */
+class LightDismissDirective {
+    constructor() {
+        this.elRef = inject(ElementRef);
+        this.yuvLightDismiss = output();
+    }
+    onKeydownHandler(event) {
+        if (!event.defaultPrevented) {
+            this.yuvLightDismiss.emit();
+        }
+    }
+    onMousedown(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.yuvLightDismiss.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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);
+            }
+            if (!this._size || size.inlineSize !== this._size.inlineSize) {
+                this._emit(size.inlineSize);
+            }
+            this._size = size;
+        });
+        this._resizeObserver.observe(this.elRef.nativeElement);
+    }
+    _emit(value, isHeight = false) {
+        // ResizeObserver callback is not covered by change detection
+        // so it has to be executed withing ngZone
+        this.ngZone.run(() => {
+            (isHeight ? this.containerHeight : this.containerWidth).emit(value);
+        });
+    }
+    ngOnDestroy() {
+        this._resizeObserver.unobserve(this.elRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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());
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LongPressDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvLongPress]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+class DragSelectDirective {
+    constructor() {
+        this.#selectStartX = 0;
+        this.#selectStartY = 0;
+        this.#selection = [];
+        this.items = contentChildren(DragSelectItemDirective);
+        this.#selectables = computed(() => this.items().map((item) => item.el));
+        this.yuvDragSelect = input();
+        this.dragSelectChange = output();
+        this.dragSelect = output();
+        this.#onPointerUp = () => {
+            removeEventListener('pointermove', this.#resize);
+            removeEventListener('pointerup', this.#onPointerUp);
+            if (this.#selection.length)
+                this.dragSelect.emit(this.#selection);
+            if (this.#selector)
+                this.#selector.remove();
+        };
+        this.#resize = (event) => {
+            if (!this.#selector)
+                return;
+            const diffX = event.pageX - this.#selectStartX;
+            const diffY = event.pageY - this.#selectStartY;
+            this.#selector.style.left = diffX < 0 ? this.#selectStartX + diffX + 'px' : this.#selectStartX + 'px';
+            this.#selector.style.top = diffY < 0 ? this.#selectStartY + diffY + 'px' : this.#selectStartY + 'px';
+            this.#selector.style.height = Math.abs(diffY) + 'px';
+            this.#selector.style.width = Math.abs(diffX) + 'px';
+            this.#selector.style.border = `1px solid ${this.yuvDragSelect()?.selectorColor || 'var(--color-accent'}`;
+            this.#checkSelected();
+        };
+        this.#checkSelected = () => {
+            if (!this.#selector)
+                return;
+            const select = this.#selector.getBoundingClientRect();
+            const { x, y, height, width } = select;
+            if (!height || !width)
+                return;
+            const currSelectionLength = this.#selection.length;
+            this.#selectables().forEach((selectable, idx) => {
+                const r1 = { x: x + window.scrollX, y: y + window.scrollY, height, width };
+                const r2 = selectable.getBoundingClientRect();
+                this.#selection = this.#selection.filter((s) => s !== idx);
+                if (this.#checkRectIntersection(r1, r2)) {
+                    this.#selection.push(idx);
+                }
+            });
+            if (currSelectionLength !== this.#selection.length) {
+                this.dragSelectChange.emit(this.#selection);
+            }
+        };
+        this.#checkRectIntersection = (r1, r2) => {
+            return !(r1.x + r1.width < r2.x || r2.x + r2.width < r1.x || r1.y + r1.height < r2.y || r2.y + r2.height < r1.y);
+        };
+    }
+    #selector;
+    #selectStartX;
+    #selectStartY;
+    #selection;
+    onPointerDown(event) {
+        if (this.yuvDragSelect()?.disabled)
+            return;
+        event.preventDefault();
+        this.#selectStartX = event.pageX;
+        this.#selectStartY = event.pageY;
+        const div = document.createElement('div');
+        div.style.position = 'absolute';
+        div.style.width = '0';
+        div.style.height = '0';
+        div.style.left = this.#selectStartX + 'px';
+        div.style.top = this.#selectStartY + 'px';
+        div.classList.add('drag-select');
+        this.#selector = div;
+        document.body.append(this.#selector);
+        this.#selection = [];
+        addEventListener('pointermove', this.#resize);
+        addEventListener('pointerup', this.#onPointerUp);
+    }
+    #selectables;
+    #onPointerUp;
+    #resize;
+    #checkSelected;
+    #checkRectIntersection;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragSelectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvDragSelect]',
+                    standalone: true
+                }]
+        }], propDecorators: { onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }] } });
+class DragSelectItemDirective {
+    constructor() {
+        this.#elRef = inject(ElementRef);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragSelectItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvDragSelectItem]',
+                    standalone: true
+                }]
+        }] });
+
+// TODO: Move to @yuuvis/components
+class TokenInputComponent {
+    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]);
+        }
+    }
+    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);
+        }
+    }
+    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);
+                    }
+                }
+                this._emitChange();
+            }
+        }
+    }
+    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();
+            }
+        }
+    }
+    _focusFirst() {
+        const el = this.elRef.nativeElement.querySelector(`[contenteditable]`);
+        if (el)
+            setTimeout(() => {
+                el?.focus();
+            });
+    }
+    _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++;
+        }
+        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++;
+        }
+        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));
+        });
+        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;
+        }
+        this.autocompleteSelectedIndex = -1;
+        this.autocompleteValues = [];
+    }
+    onTokenEnter(e) {
+        e.preventDefault();
+    }
+    _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();
+        });
+    }
+    _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
+        };
+    }
+    _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();
+    }
+    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"] }] }); }
+}
+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: [{
+                type: HostListener,
+                args: ['keydown.arrowDown', ['$event']]
+            }], onEnterKey: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
+
+class FocusIndicatorComponent {
+    #elRef = inject(ElementRef);
+    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');
+        });
+    }
+    #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`;
+            }
+        });
+    }
+    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 }] }); }
+}
+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"] }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+// @see: https://netbasal.com/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
+class NoopValueAccessorDirective {
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => NoopValueAccessorDirective),
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => NoopValueAccessorDirective),
+                        },
+                    ],
+                }]
+        }] });
+function injectNgControl() {
+    const ngControl = inject(NgControl, { self: true, optional: true });
+    if (!ngControl)
+        throw new Error('...');
+    if (ngControl instanceof FormControlDirective || ngControl instanceof FormControlName || ngControl instanceof NgModel) {
+        return ngControl;
+    }
+    throw new Error('...');
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BusyOverlayDirective, ClickDoubleDirective, ContainerSizeDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusIndicatorComponent, FocusWithinDirective, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, TokenInputComponent, injectNgControl };
+//# sourceMappingURL=yuuvis-client-framework-common.mjs.map