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

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

@@ -1,691 +1,78 @@
-import * as i1$2 from '@angular/common';
-import { CommonModule, DecimalPipe, NgClass } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, Renderer2, Component, ViewEncapsulation, ViewChild, Input, HostBinding, forwardRef, ElementRef, signal, input, ChangeDetectionStrategy, computed, effect, untracked, EventEmitter, HostListener, Output, output, NgModule } from '@angular/core';
-import { FocusWithinDirective, ErrorMessagesService } from '@yuuvis/client-framework/common';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, FormBuilder, Validators, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
-import * as i1 from '@yuuvis/client-core';
-import { Classification, FileSizePipe, LocaleNumberPipe, Utils, ClassificationPrefix, Situation, TranslateModule, ClipboardService, TranslateService, OperatorLabel, Operator, SystemService, UserService, YuvUser, SearchUtils, LocaleDatePipe } from '@yuuvis/client-core';
-import * as i1$1 from '@yuuvis/components/dropdown';
-import { YvcDropdownModule } from '@yuuvis/components/dropdown';
-import { CdkMenu, CdkMenuTrigger, CdkMenuItem } from '@angular/cdk/menu';
-import * as i4 from '@angular/cdk/table';
-import { CdkTableModule } from '@angular/cdk/table';
-import { IconService, YUV_ICONS } from '@yuuvis/client-framework/icons';
-import * as i3 from '@yuuvis/components/icon';
-import { YvcIconModule } from '@yuuvis/components/icon';
-import { YvcOverlayRef, YvcOverlayService } from '@yuuvis/components/overlay';
-import { map, of, forkJoin } from 'rxjs';
-import * as i2$1 from '@yuuvis/components/chips';
-import { YvcChipsModule } from '@yuuvis/components/chips';
-import { TranslateService as TranslateService$1, TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
-import * as i2$2 from '@yuuvis/components/datepicker';
-import { YvcDatepickerModule } from '@yuuvis/components/datepicker';
-import * as i3$1 from '@yuuvis/components/autocomplete';
-import { YvcAutocompleteModule } from '@yuuvis/components/autocomplete';
-import { map as map$1, catchError } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { marker } from '@colsen1991/ngx-translate-extract-marker';
-import { YvcCheckboxModule } from '@yuuvis/components/checkbox';
-import { YvcFocusWithin } from '@yuuvis/components/common';
-
-/**
- * Component for wrapping a form element. Provides a label and focus behaviour.
- *
- * @example
- * <yuv-form-input [label]="'my form element'">
- *   <!-- form element to be wrapped -->
- * </yuv-form-input>
- */
-class FormInputComponent {
-    constructor() {
-        this.renderer = inject(Renderer2);
-        this.isDisabled = false;
-        this.isInvalid = false;
-        this.isRequired = false;
-    }
-    /**
-     * A label string for the wrapped form element
-     */
-    set label(val) {
-        this._label = val;
-    }
-    /**
-     * Indicator that the wrapped form element is invalid. Will then render appropriate styles.
-     * You may also provide an array of error messages.
-     */
-    set invalid(iv) {
-        if (iv === null || iv === undefined) {
-            this.isInvalid = false;
-            this.renderer.removeAttribute(this.labelEl.nativeElement, 'title');
-        }
-        else if (Array.isArray(iv)) {
-            this.isInvalid = iv.length > 0;
-            if (this.isInvalid) {
-                this.renderer.setAttribute(this.labelEl.nativeElement, 'title', iv.join(';'));
-            }
-        }
-        else {
-            this.isInvalid = iv;
-        }
-    }
-    /**
-     * Indicator that the wrapped form element is disabled. Will then render appropriate styles.
-     */
-    set disabled(d) {
-        this.isDisabled = d;
-    }
-    /**
-     * Indicator that the wrapped form element is mandatory. Will then render appropriate styles.
-     */
-    set required(d) {
-        this.isRequired = d;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormInputComponent, isStandalone: true, selector: "yuv-form-input", inputs: { label: "label", tag: "tag", description: "description", invalid: "invalid", disabled: "disabled", required: "required" }, host: { properties: { "class.disabled": "this.isDisabled", "class.invalid": "this.isInvalid", "class.required": "this.isRequired" } }, viewQueries: [{ propertyName: "labelEl", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fe-wrapper\" yuvFocusWithin>\n  @if (tag) {\n    <div class=\"tag\" title=\"{{ tag.title }}\">{{ tag.label }}</div>\n  }\n  <label class=\"form-input__label\" #label>{{ _label }}</label>\n  <div class=\"control\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (description) {\n  <div class=\"description\">{{ description }}</div>\n}\n", styles: ["yuv-form-input .yvc-form-element{--yvc-form-element-border-color: transparent;--yvc-form-element-focus-border-color: transparent;--yvc-form-element-focus-outline-color: transparent}yuv-form-input .fe-wrapper{display:flex;transition:all .2s ease-in-out;flex-flow:row nowrap;align-items:center;padding:calc(var(--app-pane-padding) / 4) 0;border-bottom:1px solid var(--text-color-hint)}yuv-form-input .fe-wrapper.focusWithin{border-color:var(--color-accent)}yuv-form-input .fe-wrapper.focusWithin>.form-input__label{color:var(--color-accent)}yuv-form-input .fe-wrapper>div.control{flex:1 1 auto;padding:0 calc(var(--app-pane-padding) / 4);order:1;min-height:20px}yuv-form-input .fe-wrapper>div.control>span{display:inline-block;border-radius:2px;font-size:var(--font-body);line-height:1.5em;background-color:var(--color-accent);padding:0 calc(var(--app-pane-padding) / 4);color:#fff}yuv-form-input .fe-wrapper>.triggers{order:3;display:none}yuv-form-input .fe-wrapper>.triggers.visible{order:2}yuv-form-input .fe-wrapper>.triggers.visible,yuv-form-input .fe-wrapper>.triggers:hover{display:flex}yuv-form-input .fe-wrapper>.form-input__label{text-align:end;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none;order:4;flex:0 1 auto;padding:2px calc(var(--app-pane-padding) / 4);margin-right:3px;color:var(--text-color-caption);border-radius:2px;font-size:var(--font-caption)}yuv-form-input .fe-wrapper>.form-input__label:hover+.triggers{display:flex}yuv-form-input .fe-wrapper>.tag{order:5;flex:0 0 auto;border-radius:2px;font-size:var(--font-body);display:inline-block;line-height:1.5em;padding:2px;cursor:default;background-color:rgba(var(--color-accent-rgb),.2);color:var(--color-accent);font-family:monospace}yuv-form-input.checkbox{position:relative}yuv-form-input.checkbox .fe-wrapper>.form-input__label{text-align:start}yuv-form-input .description{font-size:var(--font-hint);font-style:italic;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 8) 0 calc(var(--app-pane-padding) / 8);color:var(--text-color-caption)}yuv-form-input.required .fe-wrapper>.form-input__label{font-weight:700}yuv-form-input.required .fe-wrapper>.form-input__label:after{content:\"*\";padding:0 4px}yuv-form-input.invalid .fe-wrapper{background:rgba(var(--color-error),.15);border-color:var(--color-error)}yuv-form-input.invalid .fe-wrapper>.form-input__label{background-color:var(--color-error);color:#fff;margin:0 4px}yuv-form-input.invalid .fe-wrapper>.form-input__label:after{content:\"!\";margin-left:calc(var(--app-pane-padding) / 2)}yuv-form-input.disabled .fe-wrapper{opacity:.7;background-color:var(--item-focus-background-color)}yuv-form-input.checkbox .fe-wrapper{border-color:transparent!important}yuv-form-input.checkbox .fe-wrapper>div.control{flex:0 0 auto}yuv-form-input.checkbox .fe-wrapper>.form-input__label{flex:0 1 auto}yuv-form-input:not(.skipToggle) .form-input__label{cursor:pointer}.yuv-form-input .fe-wrapper .fe-wrapper{background:transparent;padding:0}.yuv-form-input input:not([type=checkbox]),.yuv-form-input .p-inputtext{padding:0;border:0!important;display:flex;flex-wrap:wrap;align-items:center;width:100%}.yuv-form-input input{background-color:transparent}.yuv-form-input button.p-button{background:transparent;border:0;border-radius:2px;color:var(--text-color-caption);cursor:pointer;width:20px;height:20px;padding:0;min-width:20px}.yuv-form-input button.p-button:enabled:active,.yuv-form-input button.p-button:enabled:focus{border:0;box-shadow:none;background:var(--color-accent);color:#fff}.yuv-form-input button.p-button:enabled:active,.yuv-form-input button.p-button:enabled:hover{border:0;background:var(--color-accent);color:#fff}.yuv-form-input button.p-button .fa{color:currentColor!important}.yuv-form-input button.p-button yuv-icon{width:16px;height:16px;margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: FocusWithinDirective, selector: "[yuvFocusWithin]", outputs: ["yuvFocusWithin", "yuvFocusWithinBlur"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-form-input', standalone: true, imports: [CommonModule, FocusWithinDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"fe-wrapper\" yuvFocusWithin>\n  @if (tag) {\n    <div class=\"tag\" title=\"{{ tag.title }}\">{{ tag.label }}</div>\n  }\n  <label class=\"form-input__label\" #label>{{ _label }}</label>\n  <div class=\"control\">\n    <ng-content></ng-content>\n  </div>\n</div>\n@if (description) {\n  <div class=\"description\">{{ description }}</div>\n}\n", styles: ["yuv-form-input .yvc-form-element{--yvc-form-element-border-color: transparent;--yvc-form-element-focus-border-color: transparent;--yvc-form-element-focus-outline-color: transparent}yuv-form-input .fe-wrapper{display:flex;transition:all .2s ease-in-out;flex-flow:row nowrap;align-items:center;padding:calc(var(--app-pane-padding) / 4) 0;border-bottom:1px solid var(--text-color-hint)}yuv-form-input .fe-wrapper.focusWithin{border-color:var(--color-accent)}yuv-form-input .fe-wrapper.focusWithin>.form-input__label{color:var(--color-accent)}yuv-form-input .fe-wrapper>div.control{flex:1 1 auto;padding:0 calc(var(--app-pane-padding) / 4);order:1;min-height:20px}yuv-form-input .fe-wrapper>div.control>span{display:inline-block;border-radius:2px;font-size:var(--font-body);line-height:1.5em;background-color:var(--color-accent);padding:0 calc(var(--app-pane-padding) / 4);color:#fff}yuv-form-input .fe-wrapper>.triggers{order:3;display:none}yuv-form-input .fe-wrapper>.triggers.visible{order:2}yuv-form-input .fe-wrapper>.triggers.visible,yuv-form-input .fe-wrapper>.triggers:hover{display:flex}yuv-form-input .fe-wrapper>.form-input__label{text-align:end;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none;order:4;flex:0 1 auto;padding:2px calc(var(--app-pane-padding) / 4);margin-right:3px;color:var(--text-color-caption);border-radius:2px;font-size:var(--font-caption)}yuv-form-input .fe-wrapper>.form-input__label:hover+.triggers{display:flex}yuv-form-input .fe-wrapper>.tag{order:5;flex:0 0 auto;border-radius:2px;font-size:var(--font-body);display:inline-block;line-height:1.5em;padding:2px;cursor:default;background-color:rgba(var(--color-accent-rgb),.2);color:var(--color-accent);font-family:monospace}yuv-form-input.checkbox{position:relative}yuv-form-input.checkbox .fe-wrapper>.form-input__label{text-align:start}yuv-form-input .description{font-size:var(--font-hint);font-style:italic;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 8) 0 calc(var(--app-pane-padding) / 8);color:var(--text-color-caption)}yuv-form-input.required .fe-wrapper>.form-input__label{font-weight:700}yuv-form-input.required .fe-wrapper>.form-input__label:after{content:\"*\";padding:0 4px}yuv-form-input.invalid .fe-wrapper{background:rgba(var(--color-error),.15);border-color:var(--color-error)}yuv-form-input.invalid .fe-wrapper>.form-input__label{background-color:var(--color-error);color:#fff;margin:0 4px}yuv-form-input.invalid .fe-wrapper>.form-input__label:after{content:\"!\";margin-left:calc(var(--app-pane-padding) / 2)}yuv-form-input.disabled .fe-wrapper{opacity:.7;background-color:var(--item-focus-background-color)}yuv-form-input.checkbox .fe-wrapper{border-color:transparent!important}yuv-form-input.checkbox .fe-wrapper>div.control{flex:0 0 auto}yuv-form-input.checkbox .fe-wrapper>.form-input__label{flex:0 1 auto}yuv-form-input:not(.skipToggle) .form-input__label{cursor:pointer}.yuv-form-input .fe-wrapper .fe-wrapper{background:transparent;padding:0}.yuv-form-input input:not([type=checkbox]),.yuv-form-input .p-inputtext{padding:0;border:0!important;display:flex;flex-wrap:wrap;align-items:center;width:100%}.yuv-form-input input{background-color:transparent}.yuv-form-input button.p-button{background:transparent;border:0;border-radius:2px;color:var(--text-color-caption);cursor:pointer;width:20px;height:20px;padding:0;min-width:20px}.yuv-form-input button.p-button:enabled:active,.yuv-form-input button.p-button:enabled:focus{border:0;box-shadow:none;background:var(--color-accent);color:#fff}.yuv-form-input button.p-button:enabled:active,.yuv-form-input button.p-button:enabled:hover{border:0;background:var(--color-accent);color:#fff}.yuv-form-input button.p-button .fa{color:currentColor!important}.yuv-form-input button.p-button yuv-icon{width:16px;height:16px;margin:auto}\n"] }]
-        }], propDecorators: { labelEl: [{
-                type: ViewChild,
-                args: ['label', { static: true }]
-            }], label: [{
-                type: Input
-            }], tag: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }], isInvalid: [{
-                type: HostBinding,
-                args: ['class.invalid']
-            }], isRequired: [{
-                type: HostBinding,
-                args: ['class.required']
-            }] } });
-
-/**
- * Component rendering a simple catalog as form element.
- * There are two ways how to use this component. One is to add options as an array
- * of strings on your own, the second one is to apply a special classification.
- *
- * Classifications are used within form models and rendered as object forms. Elements
- * with a classification of `catalog[Item1, Item2, Item3]` will use this component
- * as well. So you may also choose to set a classification like this in order to
- * apply your options.
- *
- * @example
- * <!-- setting options as string array -->
- * <yuv-catalog [options]="cities" [(ngModel)]="hometown"></yuv-catalog>
- *
- * <!-- setting options using a classification -->
- * <yuv-catalog [classification]="'catalog[Berlin, Chicago, Paris]'" [(ngModel)]="hometown"></yuv-catalog>
- */
-class CatalogComponent {
-    /**
-     * Array of selectable entries
-     */
-    set options(options) {
-        this._options = options && typeof options[0] === 'string' ? options.map((o) => ({ label: o, value: o })) : options || [];
-        this.filter = this.filter || this._options?.length > this.enableFilterWhenOptionsExceed;
-    }
-    /**
-     * Additional semantics for the form element.
-     */
-    set classifications(c) {
-        const ce = this.systemService.getClassifications(c).get(Classification.STRING_CATALOG);
-        if (ce && ce.options) {
-            this.options = ce.options;
-        }
-    }
-    constructor(systemService) {
-        this.systemService = systemService;
-        this._options = [];
-        this.getLabel = (value) => (this._options ? this._options.find((o) => o.value === value) || { label: value } : { label: value }).label;
-        /**
-         * Enable filtering of options
-         */
-        this.filter = false;
-        /**
-         * By default a filter panel will shown if the number of options exceeds 10 entries. You could
-         * change this number.
-         */
-        this.enableFilterWhenOptionsExceed = 10;
-        /**
-         * Indicator that multiple items could be selected
-         */
-        this.multiselect = false;
-        /**
-         * Will attch the overlay to this HTMLelement
-         */
-        this.appendTo = null;
-        /**
-         * Will prevent the input from being changed (default: false)
-         */
-        this.readonly = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.propagateChange = (_) => { };
-    }
-    writeValue(value) {
-        this.value = value === undefined ? null : value;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
-    onChange(value) {
-        this.value = value;
-        this.propagateChange(this.value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogComponent, deps: [{ token: i1.SystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { filter: "filter", situation: "situation", enableFilterWhenOptionsExceed: "enableFilterWhenOptionsExceed", options: "options", multiselect: "multiselect", classifications: "classifications", appendTo: "appendTo", readonly: "readonly" }, host: { classAttribute: "yuv-catalog" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CatalogComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<yvc-dropdown [multiple]=\"multiselect\" [options]=\"_options\" [(ngModel)]=\"value\" (ngModelChange)=\"onChange($event)\"  [filter]=\"filter\"\n  [disabled]=\"readonly\"></yvc-dropdown>\n", styles: [":host{display:block}:host ::ng-deep .p-checkbox{flex-shrink:0}:host ::ng-deep .p-multiselect-item{white-space:normal;min-width:33ch}:host ::ng-deep .p-overlay{max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-catalog', standalone: true, imports: [FormsModule, YvcDropdownModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CatalogComponent),
-                            multi: true
-                        }
-                    ], host: { class: 'yuv-catalog' }, template: "<yvc-dropdown [multiple]=\"multiselect\" [options]=\"_options\" [(ngModel)]=\"value\" (ngModelChange)=\"onChange($event)\"  [filter]=\"filter\"\n  [disabled]=\"readonly\"></yvc-dropdown>\n", styles: [":host{display:block}:host ::ng-deep .p-checkbox{flex-shrink:0}:host ::ng-deep .p-multiselect-item{white-space:normal;min-width:33ch}:host ::ng-deep .p-overlay{max-width:300px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.SystemService }], propDecorators: { filter: [{
-                type: Input
-            }], situation: [{
-                type: Input
-            }], enableFilterWhenOptionsExceed: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], multiselect: [{
-                type: Input
-            }], classifications: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }] } });
-
-/**
- * Creates form input for number values.
- *
- * Implements `ControlValueAccessor` so it can be used within Angular forms.
- *
- * @example
- * <yuv-number [scale]="2"></yuv-number>
- *
- */
-class NumberComponent {
-    /**
-     * Number of decimal places
-     */
-    set scale(val) {
-        this._scale = Math.min(val || 0, 30);
-    }
-    get scale() {
-        return this._scale;
-    }
-    /**
-     * Overall amount of digits allowed (including decimal places)
-     */
-    set precision(val) {
-        this._precision = Math.min(val || 100, 100);
-    }
-    get precision() {
-        return this._precision;
-    }
-    /**
-     *  Set to true to group number by pattern
-     */
-    set grouping(val) {
-        this._grouping = val ?? true;
-    }
-    get grouping() {
-        return this._grouping;
-    }
-    /**
-     * The pattern to group number value by
-     */
-    set groupPattern(val) {
-        this._pattern = val;
-    }
-    get groupPattern() {
-        return this._pattern;
-    }
-    /**
-     * classification property adds some semantics to the value of this component.
-     * If you provide a value of `filesize` numbers typed into the control will be
-     * handled like file sizes (calculates differnt units)
-     */
-    set classifications(classifications) {
-        this.numberPipe =
-            classifications && classifications.includes(Classification.NUMBER_FILESIZE) ? new FileSizePipe(this.translate) : new LocaleNumberPipe(this.translate);
-    }
-    static betweenTwoNumbers(val, minVal, maxVal) {
-        const min = !Utils.isEmpty(minVal) ? minVal : -Infinity;
-        const max = !Utils.isEmpty(maxVal) ? maxVal : Infinity;
-        return val >= min && val <= max;
-    }
-    constructor(translate) {
-        this.translate = translate;
-        this.innerValue = null;
-        this._grouping = false;
-        this.validationErrors = [];
-        /**
-         * Will prevent the input from being changed (default: false)
-         */
-        this.readonly = false;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-        this.propagateChange = (_) => { };
-        this.numberPipe = new LocaleNumberPipe(this.translate);
-    }
-    writeValue(value) {
-        this.value = value != null ? value : null;
-        this.innerValue = value != null ? this.numberPipe.numberToString(value, this.grouping, this.groupPattern, this.scale) : null;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched() { }
-    onValueChange(evt) {
-        this.validationErrors = [];
-        if (Utils.isEmpty(evt)) {
-            this.value = undefined;
-            this.propagateChange(this.value);
-            return;
-        }
-        // validate input
-        const val = this.numberPipe.stringToNumber(evt);
-        // general number validation
-        if (isNaN(val) || typeof val !== 'number') {
-            this.validationErrors.push({ key: 'number' });
-        }
-        else {
-            const split = evt.replaceAll(this.numberPipe.separator, '').split(this.numberPipe.decimalSeparator);
-            // check precision
-            if (this.precision !== undefined) {
-                const prePointDigits = this.precision - (this.scale || 0);
-                if (split[0]?.length > prePointDigits) {
-                    this.validationErrors.push({ key: 'precision', params: { prePointDigits } });
-                }
-            }
-            // check scale
-            if (this.scale && split[1]?.length > this.scale) {
-                this.validationErrors.push({ key: 'scale', params: { scale: this.scale } });
-            }
-            // min max
-            if (!NumberComponent.betweenTwoNumbers(val, this.minValue, this.maxValue)) {
-                if (Utils.isEmpty(this.minValue)) {
-                    this.validationErrors.push({ key: 'maxvalue', params: { maxValue: this.maxValue } });
-                }
-                else if (Utils.isEmpty(this.maxValue)) {
-                    this.validationErrors.push({ key: 'minvalue', params: { minValue: this.minValue } });
-                }
-                else {
-                    this.validationErrors.push({ key: 'minmax', params: { minValue: this.minValue, maxValue: this.maxValue } });
-                }
-            }
-            if (!this.validationErrors.length) {
-                this.value = val;
-            }
-        }
-        this.propagateChange(this.value);
-    }
-    // called when the input looses focus
-    format() {
-        if (!this.readonly && typeof this.value === 'number' && this.validationErrors.length === 0) {
-            this.innerValue = this.numberPipe.numberToString(this.value, this.grouping, this.groupPattern, this.scale);
-        }
-    }
-    // called when the input get focus
-    unformat() {
-        if (!this.readonly && typeof this.value === 'number' && this.validationErrors.length === 0) {
-            this.innerValue = this.numberPipe.transform(this.value, false);
-        }
-    }
-    // returns null when valid else the validation object
-    validate() {
-        return this.validationErrors.length ? Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err })) : null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumberComponent, isStandalone: true, selector: "yuv-number", inputs: { scale: "scale", precision: "precision", grouping: "grouping", groupPattern: "groupPattern", readonly: "readonly", minValue: "minValue", maxValue: "maxValue", classifications: "classifications" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NumberComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => NumberComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<input type=\"string\" [(ngModel)]=\"innerValue\" (focus)=\"unformat()\" (blur)=\"format()\" class=\"input-number\"\n  [readonly]=\"readonly\" (ngModelChange)=\"onValueChange($event)\" />\n", styles: [":host{display:flex}:host input{width:100%;border:0;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-number', standalone: true, imports: [FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NumberComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => NumberComponent),
-                            multi: true
-                        }
-                    ], template: "<input type=\"string\" [(ngModel)]=\"innerValue\" (focus)=\"unformat()\" (blur)=\"format()\" class=\"input-number\"\n  [readonly]=\"readonly\" (ngModelChange)=\"onValueChange($event)\" />\n", styles: [":host{display:flex}:host input{width:100%;border:0;background-color:transparent}\n"] }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { scale: [{
-                type: Input
-            }], precision: [{
-                type: Input
-            }], grouping: [{
-                type: Input
-            }], groupPattern: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], classifications: [{
-                type: Input
-            }] } });
-
-/**
- * Creates form input for strings. Based on the input values different kinds of inputs will be generated.
- *
- * Implements `ControlValueAccessor` so it can be used within Angular forms.
- *
- * @example
- * <!-- string input validating input to be between 5 and 10 characters -->
- * <yuv-string [minLength]="5" [maxLength]="10"></yuv-string>
- *
- * <!-- string input that only allow digits -->
- * <yuv-string  [regex]="[0-9]*"></yuv-string>
- *
- * <!-- string input rendering a large textarea -->
- * <yuv-string [rows]="10"></yuv-string>
- *
- */
-class StringComponent {
-    constructor() {
-        this.iconsService = inject(IconService);
-        this.elementRef = inject(ElementRef);
-        this.classifiytionIcons = {
-            email: this.iconsService.getIcon(ClassificationPrefix.EMAIL_ICON) || '',
-            url: this.iconsService.getIcon(ClassificationPrefix.URL_ICON) || '',
-            phone: this.iconsService.getIcon(ClassificationPrefix.PHONE_ICON) || ''
-        };
-        // provides all css variables defined by |yuuvis/comonents
-        this.fe = true;
-        /**
-         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
-         */
-        this.multiselect = false;
-        /**
-         * Will prevent the input from being changed (default: false)
-         */
-        this.readonly = false;
-        /**
-         * Enable autofucus for the input (default: false)
-         */
-        this.autofocus = false;
-        this.valid = false;
-        this.validationErrors = [];
-        this._classifications = [];
-        this.propagateChange = (_) => { };
-    }
-    /**
-     * Additional semantics for the form element. Possible values are
-     * `email` (validates and creates a link to send an email once there
-     * is a valid email address) and `url` (validates and creates a link
-     * to an URL typed into the form element).
-     */
-    set classifications(c) {
-        this._classifications = c;
-        if (c && c.length) {
-            if (c.includes(Classification.STRING_EMAIL)) {
-                this.classify = {
-                    hrefPrefix: ClassificationPrefix.EMAIL,
-                    icon: this.classifiytionIcons.email
-                };
-            }
-            else if (c.includes(Classification.STRING_URL)) {
-                this.classify = {
-                    hrefPrefix: ClassificationPrefix.URL,
-                    icon: this.classifiytionIcons.url
-                };
-            }
-            else if (c.includes(Classification.STRING_PHONE)) {
-                this.classify = {
-                    hrefPrefix: ClassificationPrefix.PHONE,
-                    icon: this.classifiytionIcons.phone
-                };
-            }
-        }
-    }
-    get classifications() {
-        return this._classifications;
-    }
-    propagate() {
-        this.propagateChange(this.value);
-    }
-    writeValue(value) {
-        if (Array.isArray(value)) {
-            value = value.filter((v) => typeof v === 'string' && v.trim().length > 0);
-        }
-        this.formatedValue = Utils.formatMailTo(value, this.classify?.hrefPrefix === ClassificationPrefix.EMAIL);
-        this.value = value || null;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched() { }
-    onValueChange(val) {
-        this.maxEntryCountIfInvalid = undefined;
-        this.validationErrors = [];
-        if (Utils.isEmpty(val)) {
-            this.value = null;
-            this.propagate();
-            return;
-        }
-        const multiCheck = (check) => !!(this.multiselect ? val : [val]).find((v) => check(v));
-        // validate regular expression
-        if (this.regex && multiCheck((v) => !RegExp(this.regex).test(v))) {
-            this.validationErrors.push({ key: 'regex' });
-        }
-        // validate classification settings
-        if (this.classifications && this.classifications.length) {
-            this.classifications.forEach((c) => {
-                if (multiCheck((v) => !this.validateClassification(v, c))) {
-                    this.validationErrors.push({ key: 'classification' + c });
-                }
-            });
-        }
-        // validate min length
-        if (!Utils.isEmpty(this.minLength) && multiCheck((v) => v.length < this.minLength)) {
-            this.validationErrors.push({ key: 'minlength', params: { minLength: this.minLength } });
-        }
-        // validate max length
-        if (!Utils.isEmpty(this.maxLength) && multiCheck((v) => v.length > this.maxLength)) {
-            this.validationErrors.push({ key: 'maxlength', params: { maxLength: this.maxLength } });
-        }
-        // validate invalid if only whitespaces
-        if (multiCheck((v) => v.length > 0 && !v.trim().length)) {
-            this.validationErrors.push({ key: 'onlyWhitespaces' });
-        }
-        if (this.validationErrors.length && this.multiselect && this.value) {
-            // Setting maxEntryCountIfInvalid to the actual length of the value array to prevent the user to add more entries.
-            this.maxEntryCountIfInvalid = this.value.length;
-        }
-        this.formatedValue = Utils.formatMailTo(val, this.classify?.hrefPrefix === ClassificationPrefix.EMAIL);
-        this.propagate();
-    }
-    onBlur() {
-        if (this.multiselect) {
-            // add on blur
-            this.value.push('');
-        }
-        if (this.trimValue()) {
-            this.propagate();
-        }
-    }
-    /**
-     * Trims the current value and returns wether or not it has been trimmed
-     */
-    trimValue() {
-        if (this.value) {
-            if (this.multiselect) {
-                const lengthBefore = this.value.join('').length;
-                this.value = this.value.map((v) => v.trim());
-                return this.value.join('').length !== lengthBefore;
-            }
-            else {
-                const lengthBefore = this.value.length;
-                this.value = this.value.trim();
-                return this.value.length !== lengthBefore;
-            }
-        }
-        return false;
-    }
-    validateClassification(string, classification) {
-        if (this.situation === Situation.SEARCH) {
-            return true;
-        }
-        else {
-            let pattern;
-            if (classification === Classification.STRING_EMAIL) {
-                pattern =
-                    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            }
-            else if (classification === Classification.STRING_URL) {
-                pattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)?([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
-            }
-            else if (classification === Classification.STRING_PHONE) {
-                pattern = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-x\s\./0-9]*$/g;
-            }
-            return pattern ? pattern.test(string) : true;
-        }
-    }
-    /**
-     * returns null when valid else the validation object
-     */
-    validate() {
-        if (this.validationErrors.length) {
-            this.valid = false;
-            return Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
-        }
-        else {
-            this.valid = true;
-            return null;
-        }
-    }
-    ngAfterViewInit() {
-        if (this.autofocus) {
-            if (!this.multiselect) {
-                const el = this.elementRef.nativeElement.querySelector(this.rows && this.rows > 1 ? 'textarea' : 'input');
-                if (el)
-                    el.focus();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, host: { properties: { "class.yvc-form-element": "this.fe" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => StringComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => StringComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [(ngModel)]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n}\n@else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <yvc-chips\n    [(ngModel)]=\"value\"\n    [disabled]=\"readonly\"\n    [max]=\"maxEntryCountIfInvalid\"\n    [addOnBlur]=\"true\"\n    (onBlur)=\"onBlur()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [ngClass]=\"{ invalid: validationErrors.length }\"\n  >\n    <ng-template let-item #chipTemplate>\n      <span class=\"p-autocomplete-token-label\">\n        @if (classify && !validationErrors.length) {\n          <div class=\"classify inchip\">\n            <a href=\"{{ classify.hrefPrefix + item }}\">\n              <yvc-icon [svg]=\"classify.icon!\"></yvc-icon>\n            </a>\n          </div>\n        }\n        <div class=\"label\">\n          {{ item }}\n        </div>\n      </span>\n    </ng-template>\n  </yvc-chips>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea\n    class=\"input-textarea\"\n    pInputTextarea\n    (blur)=\"onBlur()\"\n    [(ngModel)]=\"value\"\n    [rows]=\"rows\"\n    [readonly]=\"readonly\"\n    (ngModelChange)=\"onValueChange($event)\"\n  ></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <yvc-icon [svg]=\"classify.icon!\"></yvc-icon>\n      </a>\n    } @else {\n      <yvc-icon [svg]=\"classify.icon!\"></yvc-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;align-items:center}:host .yvc-chips-list li.chip{--yvc-form-element-border-color: var(--text-color-hint)}:host .classify{color:var(--text-color-hint)}:host .classify a{color:var(--text-color-hint);display:block;border-radius:2px}:host .classify a:hover,:host .classify a:focus{background-color:var(--color-accent);color:#fff}:host .classify yvc-icon{width:18px;height:18px;padding:calc(var(--app-pane-padding) / 8)}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;color:var(--text-color-body);border:1px solid var(--yvc-form-element-border-color)}:host yvc-chips{width:100%}:host input{color:var(--text-color-body);padding:0;border:1px solid var(--yvc-form-element-border-color);display:flex;flex-wrap:wrap;align-items:center;width:100%;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: YvcChipsModule }, { kind: "component", type: i2$1.Chips, selector: "yvc-chips", inputs: ["field", "placeholder", "max", "disabled", "addOnBlur"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i3.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, YvcChipsModule, YvcIconModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => StringComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => StringComponent),
-                            multi: true
-                        }
-                    ], template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [(ngModel)]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n}\n@else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <yvc-chips\n    [(ngModel)]=\"value\"\n    [disabled]=\"readonly\"\n    [max]=\"maxEntryCountIfInvalid\"\n    [addOnBlur]=\"true\"\n    (onBlur)=\"onBlur()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [ngClass]=\"{ invalid: validationErrors.length }\"\n  >\n    <ng-template let-item #chipTemplate>\n      <span class=\"p-autocomplete-token-label\">\n        @if (classify && !validationErrors.length) {\n          <div class=\"classify inchip\">\n            <a href=\"{{ classify.hrefPrefix + item }}\">\n              <yvc-icon [svg]=\"classify.icon!\"></yvc-icon>\n            </a>\n          </div>\n        }\n        <div class=\"label\">\n          {{ item }}\n        </div>\n      </span>\n    </ng-template>\n  </yvc-chips>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea\n    class=\"input-textarea\"\n    pInputTextarea\n    (blur)=\"onBlur()\"\n    [(ngModel)]=\"value\"\n    [rows]=\"rows\"\n    [readonly]=\"readonly\"\n    (ngModelChange)=\"onValueChange($event)\"\n  ></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <yvc-icon [svg]=\"classify.icon!\"></yvc-icon>\n      </a>\n    } @else {\n      <yvc-icon [svg]=\"classify.icon!\"></yvc-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;align-items:center}:host .yvc-chips-list li.chip{--yvc-form-element-border-color: var(--text-color-hint)}:host .classify{color:var(--text-color-hint)}:host .classify a{color:var(--text-color-hint);display:block;border-radius:2px}:host .classify a:hover,:host .classify a:focus{background-color:var(--color-accent);color:#fff}:host .classify yvc-icon{width:18px;height:18px;padding:calc(var(--app-pane-padding) / 8)}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;color:var(--text-color-body);border:1px solid var(--yvc-form-element-border-color)}:host yvc-chips{width:100%}:host input{color:var(--text-color-body);padding:0;border:1px solid var(--yvc-form-element-border-color);display:flex;flex-wrap:wrap;align-items:center;width:100%;background:transparent}\n"] }]
-        }], propDecorators: { fe: [{
-                type: HostBinding,
-                args: ['class.yvc-form-element']
-            }], multiselect: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }], classifications: [{
-                type: Input
-            }], situation: [{
-                type: Input
-            }], regex: [{
-                type: Input
-            }], minLength: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
+import { CdkMenu, CdkMenuTrigger, CdkMenuItem } from '@angular/cdk/menu';
+import * as i5 from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
+import * as i1$1 from '@angular/common';
+import { CommonModule, DecimalPipe, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, input, forwardRef, ChangeDetectionStrategy, Component, computed, effect, untracked, viewChild, DestroyRef, Input, output, ElementRef, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormControl } from '@angular/forms';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@yuuvis/client-core';
+import { SystemService, ObjectFormTranslateService, Situation, TranslateModule, ClipboardService, TranslateService, Operator, OperatorLabel, LocaleNumberPipe, FileSizePipe, Classification, Utils, UserService, YuvUser, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
+import { YUV_ICONS } from '@yuuvis/client-framework/icons';
+import { map, of, forkJoin } from 'rxjs';
+import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
+import { MetadataFormFieldComponent } from '@yuuvis/client-framework/metadata-form';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateService as TranslateService$1 } from '@ngx-translate/core';
+import { AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
+import * as i2$2 from '@yuuvis/client-framework/datepicker';
+import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framework/datepicker';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$1 from '@yuuvis/client-framework/autocomplete';
+import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
+import { map as map$1, catchError, finalize } from 'rxjs/operators';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i1$3 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 
 class EditTableDataComponent {
     constructor() {
-        this.#oRef = inject((YvcOverlayRef));
         this.#fb = inject(FormBuilder);
-        this.#errorMassge = inject(ErrorMessagesService);
-        this.errorMassage = signal(null);
+        this.#system = inject(SystemService);
+        this.#errorMessage = inject(ObjectFormTranslateService);
+        this.#dialogData = inject(MAT_DIALOG_DATA);
+        this.#dialogRef = inject((MatDialogRef));
+        this.errorMessage = signal(null);
         this.tableForm = this.#fb.group({});
         this.isInnerTableForm = input(true);
-        this.formElement = this.#oRef.data?.formElement || {};
-        this.#elementData = this.#oRef.data?.elementData || {};
-        this.situation = this.#oRef.data?.situation || Situation.EDIT;
-        this.header = this.#oRef.data?.label || '';
-        this.adding = this.#oRef.data?.adding;
+        this.formElement = this.#dialogData.formElement || {};
+        this.columns = (this.formElement['elements'] || []).map((c) => {
+            return {
+                ...c,
+                propertyType: c.type,
+                _internalType: this.#system.getInternalFormElementType(c.type, c.classification)
+            };
+        });
+        this.#elementData = this.#dialogData.elementData || {};
+        this.situation = this.#dialogData.situation || Situation.EDIT;
+        this.header = this.#dialogData.label || '';
+        this.adding = this.#dialogData.adding;
     }
-    #oRef;
     #fb;
-    #errorMassge;
+    #system;
+    #errorMessage;
+    #dialogData;
+    #dialogRef;
     #elementData;
     cancel() {
-        if (this.#oRef)
-            this.#oRef.close();
+        this.#dialogRef.close({});
     }
     submit() {
-        if (this.tableForm.valid && this.#oRef)
-            this.#oRef.close(this.tableForm.getRawValue());
+        if (this.tableForm.valid && this.#dialogRef)
+            this.#dialogRef.close(this.tableForm.getRawValue());
     }
     ngOnInit() {
         Object.values(this.formElement['elements']).forEach((element) => {
@@ -694,9 +81,9 @@ class EditTableDataComponent {
         this.tableForm.setValidators(this.#globalErrorValidator());
         this.#elementData && this.tableForm.patchValue(this.#elementData);
         this.tableForm.valueChanges.subscribe((v) => {
-            this.errorMassage.set(this.tableForm.errors
+            this.errorMessage.set(this.tableForm.errors
                 ? Object.keys(this.tableForm.errors).map((key) => this.tableForm.errors && this.tableForm.errors[key]
-                    ? Object.keys(this.tableForm.errors[key]).map((k) => ({ [key]: this.#errorMassge.getErrorLabel(k, key) }))
+                    ? Object.keys(this.tableForm.errors[key]).map((k) => ({ [key]: this.#errorMessage.getErrorLabel(k, key) }))
                     : null)
                 : null);
         });
@@ -724,24 +111,24 @@ class EditTableDataComponent {
             return Object.keys(errors).length ? errors : null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditTableDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EditTableDataComponent, isStandalone: true, selector: "yuv-edit-table-data", inputs: { isInnerTableForm: { classPropertyName: "isInnerTableForm", publicName: "isInnerTableForm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EditTableDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: EditTableDataComponent, isStandalone: true, selector: "yuv-edit-table-data", inputs: { isInnerTableForm: { classPropertyName: "isInnerTableForm", publicName: "isInnerTableForm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EditTableDataComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<header>\n  <h2>{{ 'yuv.form.element.data.grid.edit.headline' | translate: { headline: header } }}</h2>\n</header>\n\n<div [formGroup]=\"tableForm\">\n  @for (element of formElement['elements']; track $index) {\n    <div [attr.data-name]=\"element.name\" class=\"form-field\">\n      <yuv-form-input\n        [label]=\"element.label\"\n        [required]=\"element.required\"\n        [invalid]=\"false\"\n        [disabled]=\"element.readonly\"\n        [invalid]=\"!tableForm.get(element.label)?.valid && tableForm.get(element.label)?.dirty\"\n      >\n        @switch (element.type) {\n          @case ('string') {\n            <yuv-string\n              [situation]=\"situation\"\n              [formControlName]=\"element.name\"\n              [attr.data-name]=\"element.name\"\n              [multiselect]=\"element.cardinality === 'multi' || situation === 'SEARCH'\"\n              [rows]=\"element.rows\"\n              [classifications]=\"element.classifications\"\n              [regex]=\"element.regex\"\n              [readonly]=\"element.readonly\"\n              [minLength]=\"element.minLength\"\n              [maxLength]=\"element.maxLength\"\n            >\n            </yuv-string>\n          }\n          @case ('decimal') {\n            <yuv-number\n              [readonly]=\"element.readonly\"\n              [precision]=\"element.precision\"\n              [scale]=\"element.scale\"\n              [pattern]=\"element.pattern\"\n              [grouping]=\"element.grouping\"\n              [minValue]=\"element.minValue\"\n              [maxValue]=\"element.maxValue\"\n              [formControlName]=\"element.name\"\n              [attr.data-name]=\"element.name\"\n            ></yuv-number>\n          }\n          @default {\n            <input [type]=\"element.type\" [id]=\"element.name\" [name]=\"element.name\" [readonly]=\"element.readonly\" [required]=\"element.required\" />\n          }\n        }\n        <!-- <input [type]=\"element.type\" [id]=\"element.name\" [name]=\"element.name\" [readonly]=\"element.readonly\" [required]=\"element.required\" /> -->\n      </yuv-form-input>\n      @let errorsGroup = errorMassage();\n      @if (errorsGroup && tableForm.errors) {\n        <div class=\"err-msg\">\n          @for (errors of errorsGroup; track $index) {\n            @for (error of errors; track $index) {\n              {{ error[element.label] }}\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <footer>\n    <button (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button class=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty && !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;padding:var(--app-pane-padding)}:host header h2{padding:0;font-weight:400;font-size:var(--font-headline);margin:0 0 var(--app-pane-padding) 0}:host .err-msg{font-size:var(--font-hint);color:var(--color-error);padding:calc(var(--app-pane-padding) / 4) 0;border:0}:host footer{display:flex;justify-content:end;gap:var(--app-pane-padding);margin-block-start:var(--app-pane-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormInputComponent, selector: "yuv-form-input", inputs: ["label", "tag", "description", "invalid", "disabled", "required"] }, { kind: "component", type: StringComponent, selector: "yuv-string", inputs: ["multiselect", "rows", "readonly", "autofocus", "classifications", "situation", "regex", "minLength", "maxLength"] }, { kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div [formGroup]=\"tableForm\">\n  <h2 mat-dialog-title>{{ 'yuv.form.element.data.grid.edit.headline' | translate: { headline: header } }}</h2>\n\n  <mat-dialog-content>\n    <div class=\"fields\">\n      @for (element of columns; track $index) {\n        <div [attr.data-name]=\"element.name\" class=\"form-field\">\n          <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n\n          @let errorsGroup = errorMessage();\n          @if (errorsGroup && tableForm.errors) {\n            <div class=\"err-msg\">\n              @for (errors of errorsGroup; track $index) {\n                @for (error of errors; track $index) {\n                  {{ error[element.name] }}\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </mat-dialog-content>\n\n  <mat-dialog-actions>\n    <button mat-button (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button mat-flat-button class=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty && !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </mat-dialog-actions>\n</div>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["field", "situation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditTableDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EditTableDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-edit-table-data', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormInputComponent, StringComponent, NumberComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'yuv-edit-table-data', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatDialogModule, MatButtonModule, MatFormFieldModule, MetadataFormFieldComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EditTableDataComponent),
                             multi: true
                         }
-                    ], template: "<header>\n  <h2>{{ 'yuv.form.element.data.grid.edit.headline' | translate: { headline: header } }}</h2>\n</header>\n\n<div [formGroup]=\"tableForm\">\n  @for (element of formElement['elements']; track $index) {\n    <div [attr.data-name]=\"element.name\" class=\"form-field\">\n      <yuv-form-input\n        [label]=\"element.label\"\n        [required]=\"element.required\"\n        [invalid]=\"false\"\n        [disabled]=\"element.readonly\"\n        [invalid]=\"!tableForm.get(element.label)?.valid && tableForm.get(element.label)?.dirty\"\n      >\n        @switch (element.type) {\n          @case ('string') {\n            <yuv-string\n              [situation]=\"situation\"\n              [formControlName]=\"element.name\"\n              [attr.data-name]=\"element.name\"\n              [multiselect]=\"element.cardinality === 'multi' || situation === 'SEARCH'\"\n              [rows]=\"element.rows\"\n              [classifications]=\"element.classifications\"\n              [regex]=\"element.regex\"\n              [readonly]=\"element.readonly\"\n              [minLength]=\"element.minLength\"\n              [maxLength]=\"element.maxLength\"\n            >\n            </yuv-string>\n          }\n          @case ('decimal') {\n            <yuv-number\n              [readonly]=\"element.readonly\"\n              [precision]=\"element.precision\"\n              [scale]=\"element.scale\"\n              [pattern]=\"element.pattern\"\n              [grouping]=\"element.grouping\"\n              [minValue]=\"element.minValue\"\n              [maxValue]=\"element.maxValue\"\n              [formControlName]=\"element.name\"\n              [attr.data-name]=\"element.name\"\n            ></yuv-number>\n          }\n          @default {\n            <input [type]=\"element.type\" [id]=\"element.name\" [name]=\"element.name\" [readonly]=\"element.readonly\" [required]=\"element.required\" />\n          }\n        }\n        <!-- <input [type]=\"element.type\" [id]=\"element.name\" [name]=\"element.name\" [readonly]=\"element.readonly\" [required]=\"element.required\" /> -->\n      </yuv-form-input>\n      @let errorsGroup = errorMassage();\n      @if (errorsGroup && tableForm.errors) {\n        <div class=\"err-msg\">\n          @for (errors of errorsGroup; track $index) {\n            @for (error of errors; track $index) {\n              {{ error[element.label] }}\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <footer>\n    <button (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button class=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty && !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;padding:var(--app-pane-padding)}:host header h2{padding:0;font-weight:400;font-size:var(--font-headline);margin:0 0 var(--app-pane-padding) 0}:host .err-msg{font-size:var(--font-hint);color:var(--color-error);padding:calc(var(--app-pane-padding) / 4) 0;border:0}:host footer{display:flex;justify-content:end;gap:var(--app-pane-padding);margin-block-start:var(--app-pane-padding)}\n"] }]
+                    ], template: "<div [formGroup]=\"tableForm\">\n  <h2 mat-dialog-title>{{ 'yuv.form.element.data.grid.edit.headline' | translate: { headline: header } }}</h2>\n\n  <mat-dialog-content>\n    <div class=\"fields\">\n      @for (element of columns; track $index) {\n        <div [attr.data-name]=\"element.name\" class=\"form-field\">\n          <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n\n          @let errorsGroup = errorMessage();\n          @if (errorsGroup && tableForm.errors) {\n            <div class=\"err-msg\">\n              @for (errors of errorsGroup; track $index) {\n                @for (error of errors; track $index) {\n                  {{ error[element.name] }}\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </mat-dialog-content>\n\n  <mat-dialog-actions>\n    <button mat-button (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button mat-flat-button class=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty && !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </mat-dialog-actions>\n</div>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"] }]
         }] });
 
 var DataGridSizeType;
@@ -756,7 +143,7 @@ var DataGridSizeType;
 const CDK_IMPORT = [CdkMenu, CdkTableModule, CdkMenuTrigger, CdkMenuItem];
 class DataGridComponent {
     constructor() {
-        this.#overlay = inject(YvcOverlayService);
+        this.#dialog = inject(MatDialog);
         this.#clipboardService = inject(ClipboardService);
         this.#decimalPipe = inject(DecimalPipe);
         this.trnaslate = inject(TranslateService);
@@ -790,23 +177,26 @@ class DataGridComponent {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.validationChange = () => { };
     }
-    #overlay;
+    #dialog;
     #clipboardService;
     #decimalPipe;
     #loadData;
     #sourceData;
     #openEditOverlay(elementData, adding = false) {
-        return this.#overlay
+        return this.#dialog
             .open(EditTableDataComponent, {
-            formElement: {
-                ...this.formElement()
-            },
-            elementData,
-            situation: this.situation(),
-            adding,
-            label: this.tableLabel()
+            data: {
+                formElement: {
+                    ...this.formElement()
+                },
+                elementData,
+                situation: this.situation(),
+                adding,
+                label: this.tableLabel()
+            }
         })
-            .afterClosed$.pipe(map((result) => result.data));
+            .afterClosed()
+            .pipe(map((result) => result));
     }
     copyLine(element) {
         this.#clipboardService.addToNavigatorClipBoard(JSON.stringify(element));
@@ -884,19 +274,19 @@ class DataGridComponent {
     onValueChange(e) {
         this.propagateChange(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DataGridComponent, isStandalone: true, selector: "yuv-data-grid", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, formElement: { classPropertyName: "formElement", publicName: "formElement", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "yuv-data-grid" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DataGridComponent, isStandalone: true, selector: "yuv-data-grid", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, formElement: { classPropertyName: "formElement", publicName: "formElement", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "yuv-data-grid" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DataGridComponent),
                 multi: true
             },
             DecimalPipe
-        ], ngImport: i0, template: "<header>\n  <h3>{{ tableLabel() }}</h3>\n  @if (!readonly()) {\n    <button (click)=\"addRow()\" aria-label=\"Add Row\" class=\"table-options-add-row\">\n      <yvc-icon [svg]=\"icons.add\"></yvc-icon>\n    </button>\n  }\n</header>\n@let displayedCol = displayedColumns();\n@let displayedColActions = displayedColumnsWithActions();\n<div class=\"table-wrapper\" [ngClass]=\"size()\">\n  <table cdk-table [dataSource]=\"dataSource()\">\n    <!-- Dynamic Columns -->\n    @for (column of displayedCol; track $index) {\n      <ng-container [cdkColumnDef]=\"column.columnDef\">\n        <th class=\"sticky-column\" cdk-header-cell *cdkHeaderCellDef>{{ column.header }}</th>\n        <td cdk-cell *cdkCellDef=\"let element\">{{ column.cell(element) }}</td>\n      </ng-container>\n    }\n\n    <!-- Actions Column (Not in displayedColumns) -->\n    <ng-container cdkColumnDef=\"actions\">\n      <th class=\"actions-header sticky-column\" cdk-header-cell *cdkHeaderCellDef></th>\n      <td class=\"actions-row sticky\" cdk-cell *cdkCellDef=\"let element\">\n        <!-- Only show the button in the last (empty) row -->\n        @if (!readonly()) {\n          <button\n            aria-label=\"Edit Row\"\n            class=\"table-options-menu-bar-item\"\n            cdkMenuItem\n            (cdkMenuOpened)=\"onMenuTriggert(element)\"\n            (cdkMenuClosed)=\"onMenuTriggert(null)\"\n            [cdkMenuTriggerFor]=\"options\"\n            [cdkMenuTriggerData]=\"{ element: element }\"\n          >\n            <yvc-icon [svg]=\"icons.more\"></yvc-icon>\n          </button>\n        }\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"displayedColActions\"></tr>\n    @if (!readonly()) {\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    } @else {\n      <tr cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    }\n  </table>\n</div>\n<ng-template #options let-element=\"element\">\n  <div class=\"table-options-menu\" cdkMenu>\n    <button class=\"table-options-menu-item\" (click)=\"copyLine(element)\" cdkMenuItem>{{ 'yuv.form.element.data.grid.copy' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"editRow(element)\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"removeRow(element)\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n  </div>\n</ng-template>\n", styles: [":root{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px}:host{border:1px solid var(--panel-divider-color)}:host header{display:flex;justify-content:space-between;background-color:var(--panel-background-grey)}:host header h3{text-align:start;-webkit-user-select:none;user-select:none;flex:0 1 auto;padding:1rem;margin:0;color:var(--text-color-caption);border-radius:2px;font-size:var(--font-caption);font-weight:400}:host.yuv-data-grid{display:block}:host.yuv-data-grid .table-wrapper{overflow:auto;position:relative;white-space:nowrap}:host.yuv-data-grid .table-wrapper.small{height:var(--table-size-small)}:host.yuv-data-grid .table-wrapper.medium{height:var(--table-size-medium)}:host.yuv-data-grid .table-wrapper.large{height:var(--table-size-large)}:host.yuv-data-grid .table-wrapper.extra-large{height:var(--table-size-extra-large)}:host.yuv-data-grid ::ng-deep .cdk-header-cell:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep table{border-spacing:0}:host.yuv-data-grid ::ng-deep th{border-bottom:1px solid var(--panel-divider-color);border-right:1px solid var(--panel-divider-color);padding:.5rem 0}:host.yuv-data-grid ::ng-deep thead{background-color:var(--panel-background-grey)}:host.yuv-data-grid ::ng-deep tr.cdk-row{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover td{border-top:1px solid var(--panel-background-grey);border-bottom:1px solid var(--panel-background-grey)}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover:has(.actions-row) td.cdk-cell.actions-row.sticky{opacity:1}:host.yuv-data-grid ::ng-deep tr.cdk-row.selected-row{color:var(--text-color-hint)}:host.yuv-data-grid ::ng-deep tr.cdk-row td{border-bottom:1px solid transparent;border-top:1px solid transparent}:host.yuv-data-grid ::ng-deep tr.cdk-row td:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep .cdk-table .cdk-header-row th[role=columnheader]{font-weight:500}:host.yuv-data-grid th.cdk-header-cell.sticky-column{position:sticky;top:0;background-color:var(--panel-background-grey)}:host.yuv-data-grid td.cdk-cell.actions-row.sticky{position:sticky;right:0;opacity:0;background-color:var(--panel-background);transition:opacity .2s ease-in-out}:host .table-options-menu-bar-item,:host .table-options-add-row{cursor:pointer;border:none;-webkit-user-select:none;user-select:none;min-width:34px;line-height:26px;padding:0;display:flex;align-items:center;justify-content:center}.table-options-menu{display:inline-flex;flex-direction:column;max-width:280px;background-color:var(--panel-background);border:1px solid var(--panel-divider-color);padding:calc(var(--app-pane-padding) / 6) 0}.table-options-menu .table-options-menu-item{background-color:transparent;cursor:pointer;border:none;border-radius:0;-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-direction:row;flex:1}.table-options-menu .table-options-menu-item:not(:last-child){border-block-end:1px solid var(--panel-divider-color)}.table-options-menu .table-options-menu-item>span{display:flex;flex-direction:row;flex:1;justify-content:flex-end}.table-options-menu .table-options-menu-item:active{background-color:var(--item-focus-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i3.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i4.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i4.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i4.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i4.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i4.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i4.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i4.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i4.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i4.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i4.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<header>\n  <h3>{{ tableLabel() }}</h3>\n  @if (!readonly()) {\n    <button mat-icon-button (click)=\"addRow()\" class=\"table-options-add-row\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n</header>\n@let displayedCol = displayedColumns();\n@let displayedColActions = displayedColumnsWithActions();\n<div class=\"table-wrapper\" [ngClass]=\"size()\">\n  <table cdk-table [dataSource]=\"dataSource()\">\n    <!-- Dynamic Columns -->\n    @for (column of displayedCol; track $index) {\n      <ng-container [cdkColumnDef]=\"column.columnDef\">\n        <th class=\"sticky-column\" cdk-header-cell *cdkHeaderCellDef>{{ column.header }}</th>\n        <td cdk-cell *cdkCellDef=\"let element\">{{ column.cell(element) }}</td>\n      </ng-container>\n    }\n\n    <!-- Actions Column (Not in displayedColumns) -->\n    <ng-container cdkColumnDef=\"actions\">\n      <th class=\"actions-header sticky-column\" cdk-header-cell *cdkHeaderCellDef></th>\n      <td class=\"actions-row sticky\" cdk-cell *cdkCellDef=\"let element\">\n        <!-- Only show the button in the last (empty) row -->\n        @if (!readonly()) {\n          <button\n            mat-icon-button\n            class=\"table-options-menu-bar-item\"\n            cdkMenuItem\n            (cdkMenuOpened)=\"onMenuTriggert(element)\"\n            (cdkMenuClosed)=\"onMenuTriggert(null)\"\n            [cdkMenuTriggerFor]=\"options\"\n            [cdkMenuTriggerData]=\"{ element: element }\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"displayedColActions\"></tr>\n    @if (!readonly()) {\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    } @else {\n      <tr cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    }\n  </table>\n</div>\n<ng-template #options let-element=\"element\">\n  <div class=\"table-options-menu\" cdkMenu>\n    <button class=\"table-options-menu-item\" (click)=\"copyLine(element)\" cdkMenuItem>{{ 'yuv.form.element.data.grid.copy' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"editRow(element)\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"removeRow(element)\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n  </div>\n</ng-template>\n", styles: [":root{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px}:host{border:1px solid var(--ymt-outline-variant)}:host header{display:flex;justify-content:space-between;background-color:var(--ymt-surface-panel-grey)}:host header h3{text-align:start;-webkit-user-select:none;user-select:none;flex:0 1 auto;padding:1rem;margin:0;color:var(--ymt-text-color-subtle);border-radius:2px;font:var(--ymt-font-body-subtle);font-weight:400}:host.yuv-data-grid{display:block}:host.yuv-data-grid .table-wrapper{overflow:auto;position:relative;white-space:nowrap}:host.yuv-data-grid .table-wrapper.small{height:var(--table-size-small)}:host.yuv-data-grid .table-wrapper.medium{height:var(--table-size-medium)}:host.yuv-data-grid .table-wrapper.large{height:var(--table-size-large)}:host.yuv-data-grid .table-wrapper.extra-large{height:var(--table-size-extra-large)}:host.yuv-data-grid ::ng-deep .cdk-header-cell:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep table{border-spacing:0}:host.yuv-data-grid ::ng-deep th{border-bottom:1px solid var(--ymt-outline-variant);border-right:1px solid var(--ymt-outline-variant);padding:.5rem 0}:host.yuv-data-grid ::ng-deep thead{background-color:var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover td{border-top:1px solid var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover:has(.actions-row) td.cdk-cell.actions-row.sticky{opacity:1}:host.yuv-data-grid ::ng-deep tr.cdk-row.selected-row{color:var(--ymt-text-color-subtle)}:host.yuv-data-grid ::ng-deep tr.cdk-row td{border-bottom:1px solid transparent;border-top:1px solid transparent}:host.yuv-data-grid ::ng-deep tr.cdk-row td:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep .cdk-table .cdk-header-row th[role=columnheader]{font-weight:500}:host.yuv-data-grid th.cdk-header-cell.sticky-column{position:sticky;top:0;background-color:var(--ymt-surface-panel)}:host.yuv-data-grid td.cdk-cell.actions-row.sticky{position:sticky;right:0;opacity:0;background-color:var(--ymt-surface-panel);transition:opacity .2s ease-in-out}:host .table-options-menu-bar-item,:host .table-options-add-row{cursor:pointer;border:none;-webkit-user-select:none;user-select:none;min-width:34px;line-height:26px;padding:0;display:flex;align-items:center;justify-content:center}.table-options-menu{display:inline-flex;flex-direction:column;max-width:280px;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-3xs) 0}.table-options-menu .table-options-menu-item{background-color:transparent;cursor:pointer;border:none;border-radius:0;-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-direction:row;flex:1}.table-options-menu .table-options-menu-item:not(:last-child){border-block-end:1px solid var(--ymt-outline-variant)}.table-options-menu .table-options-menu-item>span{display:flex;flex-direction:row;flex:1;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i5.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i5.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i5.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i5.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i5.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i5.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i5.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i5.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i5.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i5.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-data-grid', standalone: true, imports: [CommonModule, NgClass, TranslateModule, YvcIconModule, ...CDK_IMPORT], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'yuv-data-grid', standalone: true, imports: [CommonModule, NgClass, MatIconModule, MatButtonModule, TranslateModule, ...CDK_IMPORT], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DataGridComponent),
@@ -905,40 +295,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DecimalPipe
                     ], host: {
                         class: 'yuv-data-grid'
-                    }, template: "<header>\n  <h3>{{ tableLabel() }}</h3>\n  @if (!readonly()) {\n    <button (click)=\"addRow()\" aria-label=\"Add Row\" class=\"table-options-add-row\">\n      <yvc-icon [svg]=\"icons.add\"></yvc-icon>\n    </button>\n  }\n</header>\n@let displayedCol = displayedColumns();\n@let displayedColActions = displayedColumnsWithActions();\n<div class=\"table-wrapper\" [ngClass]=\"size()\">\n  <table cdk-table [dataSource]=\"dataSource()\">\n    <!-- Dynamic Columns -->\n    @for (column of displayedCol; track $index) {\n      <ng-container [cdkColumnDef]=\"column.columnDef\">\n        <th class=\"sticky-column\" cdk-header-cell *cdkHeaderCellDef>{{ column.header }}</th>\n        <td cdk-cell *cdkCellDef=\"let element\">{{ column.cell(element) }}</td>\n      </ng-container>\n    }\n\n    <!-- Actions Column (Not in displayedColumns) -->\n    <ng-container cdkColumnDef=\"actions\">\n      <th class=\"actions-header sticky-column\" cdk-header-cell *cdkHeaderCellDef></th>\n      <td class=\"actions-row sticky\" cdk-cell *cdkCellDef=\"let element\">\n        <!-- Only show the button in the last (empty) row -->\n        @if (!readonly()) {\n          <button\n            aria-label=\"Edit Row\"\n            class=\"table-options-menu-bar-item\"\n            cdkMenuItem\n            (cdkMenuOpened)=\"onMenuTriggert(element)\"\n            (cdkMenuClosed)=\"onMenuTriggert(null)\"\n            [cdkMenuTriggerFor]=\"options\"\n            [cdkMenuTriggerData]=\"{ element: element }\"\n          >\n            <yvc-icon [svg]=\"icons.more\"></yvc-icon>\n          </button>\n        }\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"displayedColActions\"></tr>\n    @if (!readonly()) {\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    } @else {\n      <tr cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    }\n  </table>\n</div>\n<ng-template #options let-element=\"element\">\n  <div class=\"table-options-menu\" cdkMenu>\n    <button class=\"table-options-menu-item\" (click)=\"copyLine(element)\" cdkMenuItem>{{ 'yuv.form.element.data.grid.copy' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"editRow(element)\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"removeRow(element)\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n  </div>\n</ng-template>\n", styles: [":root{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px}:host{border:1px solid var(--panel-divider-color)}:host header{display:flex;justify-content:space-between;background-color:var(--panel-background-grey)}:host header h3{text-align:start;-webkit-user-select:none;user-select:none;flex:0 1 auto;padding:1rem;margin:0;color:var(--text-color-caption);border-radius:2px;font-size:var(--font-caption);font-weight:400}:host.yuv-data-grid{display:block}:host.yuv-data-grid .table-wrapper{overflow:auto;position:relative;white-space:nowrap}:host.yuv-data-grid .table-wrapper.small{height:var(--table-size-small)}:host.yuv-data-grid .table-wrapper.medium{height:var(--table-size-medium)}:host.yuv-data-grid .table-wrapper.large{height:var(--table-size-large)}:host.yuv-data-grid .table-wrapper.extra-large{height:var(--table-size-extra-large)}:host.yuv-data-grid ::ng-deep .cdk-header-cell:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep table{border-spacing:0}:host.yuv-data-grid ::ng-deep th{border-bottom:1px solid var(--panel-divider-color);border-right:1px solid var(--panel-divider-color);padding:.5rem 0}:host.yuv-data-grid ::ng-deep thead{background-color:var(--panel-background-grey)}:host.yuv-data-grid ::ng-deep tr.cdk-row{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover td{border-top:1px solid var(--panel-background-grey);border-bottom:1px solid var(--panel-background-grey)}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover:has(.actions-row) td.cdk-cell.actions-row.sticky{opacity:1}:host.yuv-data-grid ::ng-deep tr.cdk-row.selected-row{color:var(--text-color-hint)}:host.yuv-data-grid ::ng-deep tr.cdk-row td{border-bottom:1px solid transparent;border-top:1px solid transparent}:host.yuv-data-grid ::ng-deep tr.cdk-row td:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep .cdk-table .cdk-header-row th[role=columnheader]{font-weight:500}:host.yuv-data-grid th.cdk-header-cell.sticky-column{position:sticky;top:0;background-color:var(--panel-background-grey)}:host.yuv-data-grid td.cdk-cell.actions-row.sticky{position:sticky;right:0;opacity:0;background-color:var(--panel-background);transition:opacity .2s ease-in-out}:host .table-options-menu-bar-item,:host .table-options-add-row{cursor:pointer;border:none;-webkit-user-select:none;user-select:none;min-width:34px;line-height:26px;padding:0;display:flex;align-items:center;justify-content:center}.table-options-menu{display:inline-flex;flex-direction:column;max-width:280px;background-color:var(--panel-background);border:1px solid var(--panel-divider-color);padding:calc(var(--app-pane-padding) / 6) 0}.table-options-menu .table-options-menu-item{background-color:transparent;cursor:pointer;border:none;border-radius:0;-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-direction:row;flex:1}.table-options-menu .table-options-menu-item:not(:last-child){border-block-end:1px solid var(--panel-divider-color)}.table-options-menu .table-options-menu-item>span{display:flex;flex-direction:row;flex:1;justify-content:flex-end}.table-options-menu .table-options-menu-item:active{background-color:var(--item-focus-border-color)}\n"] }]
+                    }, template: "<header>\n  <h3>{{ tableLabel() }}</h3>\n  @if (!readonly()) {\n    <button mat-icon-button (click)=\"addRow()\" class=\"table-options-add-row\">\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n</header>\n@let displayedCol = displayedColumns();\n@let displayedColActions = displayedColumnsWithActions();\n<div class=\"table-wrapper\" [ngClass]=\"size()\">\n  <table cdk-table [dataSource]=\"dataSource()\">\n    <!-- Dynamic Columns -->\n    @for (column of displayedCol; track $index) {\n      <ng-container [cdkColumnDef]=\"column.columnDef\">\n        <th class=\"sticky-column\" cdk-header-cell *cdkHeaderCellDef>{{ column.header }}</th>\n        <td cdk-cell *cdkCellDef=\"let element\">{{ column.cell(element) }}</td>\n      </ng-container>\n    }\n\n    <!-- Actions Column (Not in displayedColumns) -->\n    <ng-container cdkColumnDef=\"actions\">\n      <th class=\"actions-header sticky-column\" cdk-header-cell *cdkHeaderCellDef></th>\n      <td class=\"actions-row sticky\" cdk-cell *cdkCellDef=\"let element\">\n        <!-- Only show the button in the last (empty) row -->\n        @if (!readonly()) {\n          <button\n            mat-icon-button\n            class=\"table-options-menu-bar-item\"\n            cdkMenuItem\n            (cdkMenuOpened)=\"onMenuTriggert(element)\"\n            (cdkMenuClosed)=\"onMenuTriggert(null)\"\n            [cdkMenuTriggerFor]=\"options\"\n            [cdkMenuTriggerData]=\"{ element: element }\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"displayedColActions\"></tr>\n    @if (!readonly()) {\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    } @else {\n      <tr cdk-row *cdkRowDef=\"let row; columns: displayedColActions\"></tr>\n    }\n  </table>\n</div>\n<ng-template #options let-element=\"element\">\n  <div class=\"table-options-menu\" cdkMenu>\n    <button class=\"table-options-menu-item\" (click)=\"copyLine(element)\" cdkMenuItem>{{ 'yuv.form.element.data.grid.copy' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"editRow(element)\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n    <button class=\"table-options-menu-item\" cdkMenuItem (click)=\"removeRow(element)\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n  </div>\n</ng-template>\n", styles: [":root{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px}:host{border:1px solid var(--ymt-outline-variant)}:host header{display:flex;justify-content:space-between;background-color:var(--ymt-surface-panel-grey)}:host header h3{text-align:start;-webkit-user-select:none;user-select:none;flex:0 1 auto;padding:1rem;margin:0;color:var(--ymt-text-color-subtle);border-radius:2px;font:var(--ymt-font-body-subtle);font-weight:400}:host.yuv-data-grid{display:block}:host.yuv-data-grid .table-wrapper{overflow:auto;position:relative;white-space:nowrap}:host.yuv-data-grid .table-wrapper.small{height:var(--table-size-small)}:host.yuv-data-grid .table-wrapper.medium{height:var(--table-size-medium)}:host.yuv-data-grid .table-wrapper.large{height:var(--table-size-large)}:host.yuv-data-grid .table-wrapper.extra-large{height:var(--table-size-extra-large)}:host.yuv-data-grid ::ng-deep .cdk-header-cell:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep table{border-spacing:0}:host.yuv-data-grid ::ng-deep th{border-bottom:1px solid var(--ymt-outline-variant);border-right:1px solid var(--ymt-outline-variant);padding:.5rem 0}:host.yuv-data-grid ::ng-deep thead{background-color:var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover td{border-top:1px solid var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover:has(.actions-row) td.cdk-cell.actions-row.sticky{opacity:1}:host.yuv-data-grid ::ng-deep tr.cdk-row.selected-row{color:var(--ymt-text-color-subtle)}:host.yuv-data-grid ::ng-deep tr.cdk-row td{border-bottom:1px solid transparent;border-top:1px solid transparent}:host.yuv-data-grid ::ng-deep tr.cdk-row td:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep .cdk-table .cdk-header-row th[role=columnheader]{font-weight:500}:host.yuv-data-grid th.cdk-header-cell.sticky-column{position:sticky;top:0;background-color:var(--ymt-surface-panel)}:host.yuv-data-grid td.cdk-cell.actions-row.sticky{position:sticky;right:0;opacity:0;background-color:var(--ymt-surface-panel);transition:opacity .2s ease-in-out}:host .table-options-menu-bar-item,:host .table-options-add-row{cursor:pointer;border:none;-webkit-user-select:none;user-select:none;min-width:34px;line-height:26px;padding:0;display:flex;align-items:center;justify-content:center}.table-options-menu{display:inline-flex;flex-direction:column;max-width:280px;background-color:var(--ymt-surface-panel);border:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-3xs) 0}.table-options-menu .table-options-menu-item{background-color:transparent;cursor:pointer;border:none;border-radius:0;-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-direction:row;flex:1}.table-options-menu .table-options-menu-item:not(:last-child){border-block-end:1px solid var(--ymt-outline-variant)}.table-options-menu .table-options-menu-item>span{display:flex;flex-direction:row;flex:1;justify-content:flex-end}\n"] }]
         }] });
 
-class DatetimeComponent {
+class DatetimeComponent extends AbstractMatFormField {
     constructor() {
+        super(...arguments);
         this.translate = inject(TranslateService$1);
-        this.value = null;
-        this.locale = this.translate.currentLang;
+        this.pickerCmp = viewChild.required(DatepickerComponent);
+        this.ngControl = injectNgControl(this);
+        this._locale = signal(this.translate.currentLang);
+        this.locale = input(this.translate.currentLang);
+        this.#localeEffect = effect(() => {
+            this._locale.set(this.locale() || this.translate.currentLang);
+        });
         /**
          * Whether or not to allow only values in the future (default: false)
          */
-        this.onlyFutureDates = false;
+        this.onlyFutureDates = input(false);
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = false;
+        this.readonly = input(false);
+        /**
+         * Whether to show the calendar icon that opens the date picker calendar (default: true)
+         */
+        this.calendar = input(true);
         /**
          * Enables setting time as well (default: false)
          */
-        this.withTime = false;
+        this.withTime = input(false);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
         this.propagateChange = (fn) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.validationChange = () => { };
-        this._setLabels();
-        this.translate.onLangChange.subscribe((e) => (this.locale = e.lang));
     }
-    _setLabels() {
+    #localeEffect;
+    #setLabels() {
         this.labels = {
             calendarApply: this.translate.instant('yuv.form.element.datetime.calendar.select'),
             calendarCancel: this.translate.instant('yuv.form.element.datetime.calendar.cancel'),
             shortcut: { today: this.translate.instant('yuv.form.element.datetime.calendar.today') }
         };
     }
+    openCalendar() {
+        this.pickerCmp().openCalendar();
+    }
     writeValue(value) {
         if (typeof value === 'string') {
             value = new Date(value);
@@ -955,37 +357,25 @@ class DatetimeComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched() { }
     onValueChange(e) {
-        this.propagateChange(this.withTime ? e : e.toISOString().split('T')[0]);
+        this.propagateChange(this.withTime() ? e : e.toISOString().split('T')[0]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatetimeComponent, isStandalone: true, selector: "yuv-datetime", inputs: { onlyFutureDates: "onlyFutureDates", readonly: "readonly", withTime: "withTime" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatetimeComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<yvc-datepicker #picker [calendar]=\"true\" [disabled]=\"readonly\" [locale]=\"locale\" [withTime]=\"withTime\" [labels]=\"labels!\"\n    [onlyFutureDates]=\"onlyFutureDates\"\n    [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"value\"\n    (ngModelChange)=\"onValueChange($event)\"></yvc-datepicker>", styles: [":host{display:flex}:host yvc-datepicker{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YvcDatepickerModule }, { kind: "component", type: i2$2.Datepicker, selector: "yvc-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }] }); }
+    ngOnInit() {
+        this.focusHandled.set(true);
+        this.#setLabels();
+        this.translate.onLangChange.subscribe((e) => this._locale.set(e.lang));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", type: DatetimeComponent, isStandalone: true, selector: "yuv-datetime", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], viewQueries: [{ propertyName: "pickerCmp", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [ngModelOptions]=\"{ standalone: true }\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onValueChange($event)\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YuvDatepickerModule }, { kind: "component", type: i2$2.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-datetime', standalone: true, imports: [FormsModule, YvcDatepickerModule, DatetimeComponent], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatetimeComponent),
-                            multi: true
-                        }
-                    ], template: "<yvc-datepicker #picker [calendar]=\"true\" [disabled]=\"readonly\" [locale]=\"locale\" [withTime]=\"withTime\" [labels]=\"labels!\"\n    [onlyFutureDates]=\"onlyFutureDates\"\n    [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"value\"\n    (ngModelChange)=\"onValueChange($event)\"></yvc-datepicker>", styles: [":host{display:flex}:host yvc-datepicker{flex:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onlyFutureDates: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], withTime: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'yuv-datetime', standalone: true, imports: [FormsModule, YuvDatepickerModule, MatInputModule, MatDatepickerModule], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [ngModelOptions]=\"{ standalone: true }\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onValueChange($event)\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"] }]
+        }] });
 
-class DatetimeRangeComponent {
+class DatetimeRangeComponent extends AbstractMatFormField {
     constructor() {
-        this.fb = inject(FormBuilder);
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
         /**
          * Enables setting time as well (default: false)
          */
@@ -995,11 +385,8 @@ class DatetimeRangeComponent {
          */
         this.readonly = false;
         this.operator = 'eq';
-        this.rangeForm = this.fb.group({
-            dateValue: [undefined, Validators.required],
-            dateValueFrom: []
-        });
         this._isValid = true;
+        this.ngControl = injectNgControl(this);
         // options for search situation
         this.availableSearchOptions = [
             { label: OperatorLabel.EQUAL, value: Operator.EQUAL },
@@ -1007,24 +394,30 @@ class DatetimeRangeComponent {
             { label: OperatorLabel.LESS_OR_EQUAL, value: Operator.LESS_OR_EQUAL },
             { label: OperatorLabel.INTERVAL_INCLUDE_BOTH, value: Operator.INTERVAL_INCLUDE_BOTH }
         ];
-        // the selected search option
-        this.searchOption = this.availableSearchOptions[1].value;
+        this.rangeForm = new FormGroup({
+            dateValue: new FormControl(undefined, { nonNullable: true, validators: [Validators.required] }),
+            operator: new FormControl(this.availableSearchOptions[1].value, { nonNullable: true }),
+            dateValueFrom: new FormControl(undefined, { nonNullable: true })
+        });
         // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
+    #dRef;
     writeValue(value) {
         if (value && (value.firstValue || value.secondValue)) {
             const match = this.availableSearchOptions.find((o) => o.value === value.operator);
-            this.searchOption = match ? match.value : this.availableSearchOptions[0].value;
             this.value = value;
             this.rangeForm.patchValue({
                 dateValueFrom: value.secondValue && value.firstValue,
+                operator: match ? match.value : this.availableSearchOptions[0].value,
                 dateValue: value.secondValue || value.firstValue
             });
         }
         else {
-            this.searchOption = this.availableSearchOptions[0].value;
-            this.value = undefined;
+            this.rangeForm.patchValue({
+                operator: this.availableSearchOptions[0].value
+            });
+            this.value = null;
             this.rangeForm.reset();
         }
     }
@@ -1033,21 +426,17 @@ class DatetimeRangeComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    onValueChange() {
+    #onValueChange() {
         const dateValue = this.rangeForm.value.dateValue || undefined;
-        if (this.searchOption === Operator.INTERVAL_INCLUDE_BOTH) {
+        const operator = this.rangeForm.value.operator;
+        if (operator === Operator.INTERVAL_INCLUDE_BOTH) {
             const dateValueFrom = this.rangeForm.value.dateValueFrom || undefined;
             if (dateValueFrom || dateValue) {
                 this._isValid = this.rangeForm.valid && !!dateValueFrom && !!dateValue;
                 this.value = !this._isValid
-                    ? // {
-                        //   operator: this.searchOption,
-                        //   firstValue: undefined,
-                        //   secondValue: undefined
-                        // }
-                        undefined
+                    ? null
                     : {
-                        operator: this.searchOption,
+                        operator,
                         firstValue: dateValueFrom,
                         secondValue: dateValue
                     };
@@ -1056,80 +445,67 @@ class DatetimeRangeComponent {
         else {
             this._isValid = this.rangeForm.valid;
             this.value = !this._isValid
-                ? // {
-                    //   operator: this.searchOption,
-                    //   firstValue: undefined,
-                    //   secondValue: undefined
-                    // }
-                    undefined
+                ? null
                 : {
-                    operator: this.searchOption,
+                    operator,
                     firstValue: dateValue,
                     secondValue: undefined
                 };
         }
         this.propagateChange(this.value);
     }
-    validate() {
-        let err;
-        if (this.searchOption === Operator.EQUAL) {
-            err = {
-                datecontrol: {
-                    valid: false
-                }
-            };
-        }
-        else {
-            // make sure that on ranges, the first value is earlier than the last
-            if (this.searchOption === Operator.INTERVAL_INCLUDE_BOTH && this.value && this.value.firstValue && this.value.secondValue) {
-                this._isValid = new Date(this.value.firstValue).getTime() < new Date(this.value.secondValue).getTime();
+    #getValidator() {
+        return (control) => {
+            let err;
+            const operator = control.value.operator;
+            if (operator === Operator.EQUAL) {
                 err = {
-                    daterangeorder: {
+                    datecontrol: {
                         valid: false
                     }
                 };
             }
             else {
-                err = {
-                    daterange: {
-                        valid: false
-                    }
-                };
+                // make sure that on ranges, the first value is earlier than the last
+                if (operator === Operator.INTERVAL_INCLUDE_BOTH && control.value && control.value.firstValue && control.value.secondValue) {
+                    this._isValid = new Date(control.value.firstValue).getTime() < new Date(control.value.secondValue).getTime();
+                    err = {
+                        daterangeorder: {
+                            valid: false
+                        }
+                    };
+                }
+                else {
+                    err = {
+                        daterange: {
+                            valid: false
+                        }
+                    };
+                }
             }
-        }
-        return this.situation === Situation.SEARCH || this._isValid ? null : err;
+            return this.situation === Situation.SEARCH || this._isValid ? null : err;
+        };
     }
     ngOnInit() {
-        this.rangeForm.valueChanges.subscribe(() => this.onValueChange());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DatetimeRangeComponent, isStandalone: true, selector: "yuv-datetime-range", inputs: { withTime: "withTime", readonly: "readonly", operator: "operator", situation: "situation" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatetimeRangeComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => DatetimeRangeComponent),
-                multi: true
+        this.rangeForm.setValidators(this.#getValidator());
+        this.rangeForm.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.situation === Situation.SEARCH || this._isValid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.rangeForm.errors);
             }
-        ], ngImport: i0, template: "<form class=\"eo-datetime-range\" [formGroup]=\"rangeForm\">\n  @if (searchOption === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n  <yvc-dropdown\n    [disableClearButton]=\"true\"\n    [(ngModel)]=\"searchOption\"\n    (ngModelChange)=\"onValueChange()\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [options]=\"availableSearchOptions\"\n  ></yvc-dropdown>\n\n  <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:flex;flex-flow:row nowrap;gap:3px}:host form yuv-datetime{flex:1 1 auto}:host form yvc-dropdown{--yvc-form-element-border-color: var(--text-color-hint);--yvc-form-element-focus-border-color: var(--color-accent);padding:0;min-width:auto;border-radius:2px;background-color:var(--list-item-hover-background)}:host form yvc-dropdown:hover{background-color:var(--list-item-selected-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeComponent, selector: "yuv-datetime", inputs: ["onlyFutureDates", "readonly", "withTime"] }] }); }
+        });
+        this.rangeForm.updateValueAndValidity();
+        this.rangeForm.valueChanges.subscribe(() => this.#onValueChange());
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatetimeRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DatetimeRangeComponent, isStandalone: true, selector: "yuv-datetime-range", inputs: { withTime: "withTime", readonly: "readonly", operator: "operator", situation: "situation" }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeRangeComponent }], usesInheritance: true, ngImport: i0, template: "<form class=\"eo-datetime-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:inline-flex;flex-flow:row nowrap;gap:3px}:host form yuv-datetime{flex:1 1 auto}:host form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeComponent, selector: "yuv-datetime", inputs: ["locale", "onlyFutureDates", "readonly", "calendar", "withTime"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimeRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatetimeRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-datetime-range', standalone: true, imports: [CommonModule, FormsModule, YvcDropdownModule, ReactiveFormsModule, DatetimeComponent], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatetimeRangeComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => DatetimeRangeComponent),
-                            multi: true
-                        }
-                    ], template: "<form class=\"eo-datetime-range\" [formGroup]=\"rangeForm\">\n  @if (searchOption === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n  <yvc-dropdown\n    [disableClearButton]=\"true\"\n    [(ngModel)]=\"searchOption\"\n    (ngModelChange)=\"onValueChange()\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [options]=\"availableSearchOptions\"\n  ></yvc-dropdown>\n\n  <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:flex;flex-flow:row nowrap;gap:3px}:host form yuv-datetime{flex:1 1 auto}:host form yvc-dropdown{--yvc-form-element-border-color: var(--text-color-hint);--yvc-form-element-focus-border-color: var(--color-accent);padding:0;min-width:auto;border-radius:2px;background-color:var(--list-item-hover-background)}:host form yvc-dropdown:hover{background-color:var(--list-item-selected-background)}\n"] }]
+            args: [{ selector: 'yuv-datetime-range', standalone: true, imports: [CommonModule, FormsModule, MatDatepickerModule, MatSelectModule, ReactiveFormsModule, DatetimeComponent], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeRangeComponent }], template: "<form class=\"eo-datetime-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-datetime [withTime]=\"withTime\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:inline-flex;flex-flow:row nowrap;gap:3px}:host form yuv-datetime{flex:1 1 auto}:host form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"] }]
         }], propDecorators: { withTime: [{
                 type: Input
             }], readonly: [{
@@ -1140,6 +516,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+var _a;
+/**
+ * Creates form input for number values.
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms.
+ *
+ * @example
+ * <yuv-number [scale]="2"></yuv-number>
+ *
+ */
+class NumberComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
+        this.translate = inject(TranslateService);
+        // innerValue: string | null = null;
+        this.validationErrors = [];
+        this.transformPipe = new LocaleNumberPipe(this.translate);
+        this.innerCtrl = new FormControl(null);
+        this.ngControl = injectNgControl(this);
+        /**
+         * Number of decimal places
+         */
+        this.scale = input(undefined);
+        this.#scale = computed(() => Math.min(this.scale() || 0, 30));
+        /**
+         * Overall amount of digits allowed (including decimal places)
+         */
+        this.precision = input(undefined);
+        this.#precision = computed(() => Math.min(this.precision() || 100, 100));
+        /**
+         *  Set to true to group number by pattern
+         */
+        this.grouping = input(false);
+        this.#grouping = computed(() => this.grouping() ?? true);
+        /**
+         * The pattern to group number value by
+         */
+        this.groupPattern = input(undefined);
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = input(false);
+        /**
+         * set minimum input value
+         */
+        this.minValue = input(undefined);
+        /**
+         * set maximum input value
+         *
+         */
+        this.maxValue = input(undefined);
+        /**
+         * classification property adds some semantics to the value of this component.
+         * If you provide a value of `filesize` numbers typed into the control will be
+         * handled like file sizes (calculates differnt units)
+         */
+        this.classifications = input([]);
+        this.#classificationsEffect = effect(() => {
+            const classifications = this.classifications();
+            this.transformPipe =
+                classifications && classifications.includes(Classification.NUMBER_FILESIZE) ? new FileSizePipe(this.translate) : new LocaleNumberPipe(this.translate);
+        });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #dRef;
+    #scale;
+    #precision;
+    #grouping;
+    #classificationsEffect;
+    static betweenTwoNumbers(val, minVal, maxVal) {
+        const min = !Utils.isEmpty(minVal) ? minVal : -Infinity;
+        const max = !Utils.isEmpty(maxVal) ? maxVal : Infinity;
+        return val >= min && val <= max;
+    }
+    writeValue(value) {
+        this.value = value != null ? value : null;
+        const innerValue = value != null ? this.transformPipe.numberToString(value, this.#grouping(), this.groupPattern(), this.#scale()) : null;
+        this.innerCtrl.setValue(innerValue, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    // called when the input looses focus
+    format() {
+        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
+            this.innerCtrl.patchValue(this.transformPipe.numberToString(this.value, this.#grouping(), this.groupPattern(), this.#scale()), { emitEvent: false });
+        }
+    }
+    // called when the input get focus
+    unformat() {
+        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
+            this.innerCtrl.patchValue(this.transformPipe.transform(this.value, false), {
+                emitEvent: false
+            });
+        }
+    }
+    #getValidator() {
+        return (control) => {
+            this.validationErrors = [];
+            if (Utils.isEmpty(control.value))
+                return null;
+            const val = this.transformPipe.stringToNumber(control.value);
+            // general number validation
+            if (isNaN(val) || typeof val !== 'number') {
+                this.validationErrors.push({ key: 'number' });
+            }
+            else {
+                const split = control.value.replaceAll(this.transformPipe.separator, '').split(this.transformPipe.decimalSeparator);
+                // check precision
+                if (this.#precision() !== undefined) {
+                    const prePointDigits = this.#precision() - this.#scale();
+                    if (split[0]?.length > prePointDigits) {
+                        this.validationErrors.push({ key: 'precision', params: { prePointDigits } });
+                    }
+                }
+                // check scale
+                if (this.#scale() && split[1]?.length > this.#scale()) {
+                    this.validationErrors.push({ key: 'scale', params: { scale: this.#scale() } });
+                }
+                // min max
+                if (!_a.betweenTwoNumbers(val, this.minValue(), this.maxValue())) {
+                    if (Utils.isEmpty(this.minValue())) {
+                        this.validationErrors.push({ key: 'maxvalue', params: { maxValue: this.maxValue() } });
+                    }
+                    else if (Utils.isEmpty(this.maxValue())) {
+                        this.validationErrors.push({ key: 'minvalue', params: { minValue: this.minValue() } });
+                    }
+                    else {
+                        this.validationErrors.push({ key: 'minmax', params: { minValue: this.minValue(), maxValue: this.maxValue() } });
+                    }
+                }
+            }
+            const e = Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
+            return this.validationErrors.length ? e : null;
+        };
+    }
+    ngOnInit() {
+        // set up validators once all inputs are set
+        this.innerCtrl.setValidators(this.#getValidator());
+        this.innerCtrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.innerCtrl.invalid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.innerCtrl.errors);
+            }
+        });
+        this.innerCtrl.updateValueAndValidity();
+        this.innerCtrl.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            if (Utils.isEmpty(v)) {
+                this.value = null;
+                this.propagateChange(this.value);
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const val = this.transformPipe.stringToNumber(v);
+                if (this.validationErrors.length === 0 && this.value !== val) {
+                    this.value = val;
+                    this.propagateChange(this.value);
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NumberComponent, isStandalone: true, selector: "yuv-number", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, groupPattern: { classPropertyName: "groupPattern", publicName: "groupPattern", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: NumberComponent }], usesInheritance: true, ngImport: i0, template: '<input type="string" [formControl]="innerCtrl" (focus)="unformat()" (blur)="format()" [readonly]="readonly()" />', isInline: true, styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+_a = NumberComponent;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-number', standalone: true, imports: [ReactiveFormsModule], template: '<input type="string" [formControl]="innerCtrl" (focus)="unformat()" (blur)="format()" [readonly]="readonly()" />', providers: [{ provide: MatFormFieldControl, useExisting: NumberComponent }], styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"] }]
+        }] });
+
 /**
  * Creates form input for ranges of numeric values.
  *
@@ -1149,8 +702,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * <yuv-number-range [scale]="2"></yuv-number-range>
  *
  */
-class NumberRangeComponent {
+class NumberRangeComponent extends AbstractMatFormField {
     constructor() {
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
         /**
          *  Set to true to group number by pattern
          */
@@ -1165,10 +720,6 @@ class NumberRangeComponent {
          * handled like file sizes (calculates differnt units)
          */
         this.classifications = [];
-        this.rangeForm = new UntypedFormGroup({
-            numberValue: new UntypedFormControl(),
-            numberValueFrom: new UntypedFormControl()
-        });
         this.isValid = true;
         // options for search situation
         this.availableSearchOptions = [
@@ -1177,35 +728,44 @@ class NumberRangeComponent {
             { label: OperatorLabel.LESS_OR_EQUAL, value: Operator.LESS_OR_EQUAL },
             { label: OperatorLabel.INTERVAL_INCLUDE_BOTH, value: Operator.INTERVAL_INCLUDE_BOTH }
         ];
-        // the selected search option
-        this.searchOption = this.availableSearchOptions[1].value;
+        this.rangeForm = new FormGroup({
+            numberValue: new FormControl(undefined, { nonNullable: true, validators: [Validators.required] }),
+            operator: new FormControl(this.availableSearchOptions[1].value, { nonNullable: true }),
+            numberValueFrom: new FormControl(undefined, { nonNullable: true })
+        });
+        // constructor() {
+        //   this.rangeForm.valueChanges.forEach(() => {
+        //     this.#onValueChange();
+        //   });
+        // }
         // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
-        this.rangeForm.valueChanges.forEach(() => {
-            this.onValueChange();
-        });
     }
+    #dRef;
     writeValue(value) {
         if (value && (value.firstValue != null || value.secondValue != null)) {
             const match = this.availableSearchOptions.find((o) => o.value === value.operator);
-            this.searchOption = match ? match.value : this.availableSearchOptions[0].value;
             this.value = value;
-            if (value.secondValue == null) {
+            if (value.secondValue == undefined) {
                 this.rangeForm.setValue({
-                    numberValueFrom: null,
-                    numberValue: value.firstValue != null ? value.firstValue : null
+                    numberValueFrom: undefined,
+                    operator: match ? match.value : this.availableSearchOptions[0].value,
+                    numberValue: value.firstValue || undefined
                 });
             }
             else {
                 this.rangeForm.setValue({
-                    numberValueFrom: value.firstValue != null ? value.firstValue : null,
+                    numberValueFrom: value.firstValue || undefined,
+                    operator: match ? match.value : this.availableSearchOptions[0].value,
                     numberValue: value.secondValue
                 });
             }
         }
         else {
-            this.searchOption = this.availableSearchOptions[0].value;
-            this.value = undefined;
+            this.rangeForm.patchValue({
+                operator: this.availableSearchOptions[0].value
+            });
+            this.value = null;
             this.rangeForm.reset();
         }
     }
@@ -1214,18 +774,19 @@ class NumberRangeComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    onValueChange() {
+    #onValueChange() {
         this.isValid = this.rangeForm.valid;
-        if (this.searchOption === Operator.INTERVAL_INCLUDE_BOTH) {
+        const operator = this.rangeForm.value.operator;
+        if (operator === Operator.INTERVAL_INCLUDE_BOTH) {
             this.isValid = this.rangeForm.valid && this.rangeForm.value.numberValueFrom != null && this.rangeForm.value.numberValue != null;
             this.value = !this.isValid
                 ? {
-                    operator: this.searchOption,
+                    operator,
                     firstValue: undefined,
                     secondValue: undefined
                 }
                 : {
-                    operator: this.searchOption,
+                    operator,
                     firstValue: this.rangeForm.value.numberValueFrom,
                     secondValue: this.rangeForm.value.numberValue
                 };
@@ -1233,25 +794,44 @@ class NumberRangeComponent {
         else {
             this.value = !this.isValid
                 ? {
-                    operator: this.searchOption,
+                    operator,
                     firstValue: undefined,
                     secondValue: undefined
                 }
                 : {
-                    operator: this.searchOption,
+                    operator,
                     firstValue: this.rangeForm.value.numberValue,
                     secondValue: undefined
                 };
         }
         this.propagateChange(this.value);
     }
+    #getValidator() {
+        return (control) => {
+            let err;
+            const operator = control.value.operator;
+            if (operator === Operator.EQUAL) {
+                err = { number: { valid: false } };
+            }
+            else if (operator === Operator.INTERVAL_INCLUDE_BOTH && this.value?.firstValue && this.value?.secondValue) {
+                // make sure that on ranges, the first value is earlier than the last
+                this.isValid = this.value.firstValue < this.value.secondValue;
+                err = { numberrangeorder: { valid: false } };
+            }
+            else {
+                err = { numberrange: { valid: false } };
+            }
+            return this.isValid ? null : err;
+        };
+    }
     // returns null when valid else the validation object
     validate() {
         let err;
-        if (this.searchOption === Operator.EQUAL) {
+        const operator = this.rangeForm.value.operator;
+        if (operator === Operator.EQUAL) {
             err = { number: { valid: false } };
         }
-        else if (this.searchOption === Operator.INTERVAL_INCLUDE_BOTH && this.value?.firstValue && this.value?.secondValue) {
+        else if (operator === Operator.INTERVAL_INCLUDE_BOTH && this.value?.firstValue && this.value?.secondValue) {
             // make sure that on ranges, the first value is earlier than the last
             this.isValid = this.value.firstValue < this.value.secondValue;
             err = { numberrangeorder: { valid: false } };
@@ -1261,35 +841,27 @@ class NumberRangeComponent {
         }
         return this.isValid ? null : err;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NumberRangeComponent, isStandalone: true, selector: "yuv-number-range", inputs: { scale: "scale", precision: "precision", grouping: "grouping", pattern: "pattern", readonly: "readonly", classifications: "classifications", minValue: "minValue", maxValue: "maxValue" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NumberRangeComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => NumberRangeComponent),
-                multi: true
+    ngOnInit() {
+        this.rangeForm.setValidators(this.#getValidator());
+        this.rangeForm.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.rangeForm.invalid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.rangeForm.errors);
             }
-        ], ngImport: i0, template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if(searchOption === 'gtelte'){\n  <yuv-number\n    class=\"first\"\n    [readonly]=\"readonly\"\n    [scale]=\"scale\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValueFrom\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  ></yuv-number>}\n\n  <yvc-dropdown\n    class=\"no-trigger\"\n    [(ngModel)]=\"searchOption\"\n    (ngModelChange)=\"onValueChange()\"\n    [disabled]=\"readonly\"\n    [disableClearButton]=\"true\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [options]=\"availableSearchOptions\"\n  ></yvc-dropdown>\n\n  <yuv-number\n    [scale]=\"scale\"\n    [readonly]=\"readonly\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:flex;flex-flow:row nowrap;gap:3px}:host>form yuv-number{flex:1 1 auto}:host>form yvc-dropdown{--yvc-form-element-border-color: var(--text-color-hint);--yvc-form-element-focus-border-color: var(--color-accent);padding:0;min-width:auto;border-radius:2px;background-color:var(--list-item-hover-background)}:host>form yvc-dropdown:hover{background-color:var(--list-item-selected-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+        });
+        this.rangeForm.updateValueAndValidity();
+        this.rangeForm.valueChanges.subscribe(() => this.#onValueChange());
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NumberRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: NumberRangeComponent, isStandalone: true, selector: "yuv-number-range", inputs: { scale: "scale", precision: "precision", grouping: "grouping", pattern: "pattern", readonly: "readonly", classifications: "classifications", minValue: "minValue", maxValue: "maxValue" }, providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], usesInheritance: true, ngImport: i0, template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly\"\n      [scale]=\"scale\"\n      [precision]=\"precision\"\n      [grouping]=\"grouping\"\n      [groupPattern]=\"pattern\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale\"\n    [readonly]=\"readonly\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;gap:3px}:host>form yuv-number{flex:1 1 auto}:host>form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NumberRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-number-range', standalone: true, imports: [CommonModule, NumberComponent, YvcDropdownModule, FormsModule, ReactiveFormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NumberRangeComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => NumberRangeComponent),
-                            multi: true
-                        }
-                    ], template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if(searchOption === 'gtelte'){\n  <yuv-number\n    class=\"first\"\n    [readonly]=\"readonly\"\n    [scale]=\"scale\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValueFrom\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  ></yuv-number>}\n\n  <yvc-dropdown\n    class=\"no-trigger\"\n    [(ngModel)]=\"searchOption\"\n    (ngModelChange)=\"onValueChange()\"\n    [disabled]=\"readonly\"\n    [disableClearButton]=\"true\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [options]=\"availableSearchOptions\"\n  ></yvc-dropdown>\n\n  <yuv-number\n    [scale]=\"scale\"\n    [readonly]=\"readonly\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:flex;flex-flow:row nowrap;gap:3px}:host>form yuv-number{flex:1 1 auto}:host>form yvc-dropdown{--yvc-form-element-border-color: var(--text-color-hint);--yvc-form-element-focus-border-color: var(--color-accent);padding:0;min-width:auto;border-radius:2px;background-color:var(--list-item-hover-background)}:host>form yvc-dropdown:hover{background-color:var(--list-item-selected-background)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { scale: [{
+            args: [{ selector: 'yuv-number-range', standalone: true, imports: [CommonModule, NumberComponent, MatSelectModule, FormsModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly\"\n      [scale]=\"scale\"\n      [precision]=\"precision\"\n      [grouping]=\"grouping\"\n      [groupPattern]=\"pattern\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale\"\n    [readonly]=\"readonly\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;gap:3px}:host>form yuv-number{flex:1 1 auto}:host>form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"] }]
+        }], propDecorators: { scale: [{
                 type: Input
             }], precision: [{
                 type: Input
@@ -1309,85 +881,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 /**
  * Creates form input for organisation values.
- * Implements `ControlValueAccessor` so it can be used within Angular forms.
- *
- * [Screenshot](../assets/images/yuv-organization.gif)
  *
  * @example
  * <yuv-organization [multiselect]="true"></yuv-organization>
  */
-class OrganizationComponent {
+class OrganizationComponent extends AbstractMatFormField {
     constructor() {
-        this.system = inject(SystemService);
-        this.userService = inject(UserService);
+        super(...arguments);
+        this.#system = inject(SystemService);
+        this.#userService = inject(UserService);
         this.translate = inject(TranslateService);
         this.minLength = 2;
-        this.icons = {
-            organizationMulti: YUV_ICONS['group'],
-            organization: YUV_ICONS['user']
-        };
-        this.isValidInput = true;
-        this.value = null;
+        this.busy = signal(false);
+        this.acFormControl = new FormControl(undefined);
+        this.ngControl = injectNgControl(this);
         this._innerValue = [];
         this.autocompleteRes = [];
-        this.filterRoles = [];
-        /**
-         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
-         */
-        this.multiselect = false;
+        this.#filterRoles = [];
         /**
-         * Will prevent the input from being changed (default: false)
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
          */
-        this.readonly = false;
+        this.situation = input(undefined);
         /**
-         * Set this to true and the component will try to gain focus once it has been rendered.
-         * Notice that this is not reliable. If there are any other components that are rendered
-         * later and also try to be focused, they will 'win', because there can only be one focus.
+         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
          */
-        this.autofocus = false;
+        this.multiselect = input(false);
         /**
-         * Will attch the overlay to this HTMLelement
+         * Will prevent the input from being changed (default: false)
          */
-        this.appendTo = null;
+        this.readonly = input(false);
         /**
          * Whether or not to exclude the current user from autocomplete result
          */
-        this.excludeMe = false;
+        this.excludeMe = input(false);
         /**
          * Whether or not the emitted value should be an object containing id and title
          * or, if set to false only the ID
          */
         this.withMetadata = input(false);
-        this.userSelect = new EventEmitter();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
+    #system;
+    #userService;
     set innerValue(iv) {
         this._innerValue = iv || [];
-        this.userSelect.emit(this._innerValue.map((v) => v.user));
     }
     get innerValue() {
         return this._innerValue;
     }
-    // prevent ENTER from being propagated, because the component could be located
-    // inside some other component that also relys on ENTER
-    onKeydownHandler(event) {
-        event.stopPropagation();
-    }
-    get _inputDisabled() {
-        return !this.multiselect && this.innerValue?.length === 1;
-    }
+    #filterRoles;
     set classifications(c) {
         this._classifications = c;
         if (c?.length) {
-            const classifications = this.system.getClassifications(c);
+            const classifications = this.#system.getClassifications(c);
             if (classifications.has(Classification.STRING_ORGANIZATION)) {
                 const options = classifications.get(Classification.STRING_ORGANIZATION).options;
-                this.filterRoles = options;
+                this.#filterRoles = options;
             }
         }
         else {
-            this.filterRoles = [];
+            this.#filterRoles = [];
         }
     }
     get classifications() {
@@ -1409,29 +963,18 @@ class OrganizationComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
     propagate() {
-        this.propagateChange(this.#getPropagateValue());
+        this.value = this.#getPropagateValue();
+        this.propagateChange(this.value);
     }
     #getPropagateValue() {
-        return this.multiselect
-            ? this.withMetadata()
-                ? this.value
-                    ? this._innerValue.map((v) => ({
-                        id: v.user.id,
-                        title: v.user.title
-                    }))
-                    : this.value
-                : this.value
-            : this.withMetadata()
-                ? this.value
-                    ? {
-                        id: this._innerValue[0].user.id,
-                        title: this._innerValue[0].user.title
-                    }
-                    : this.value
-                : this.value;
-    }
-    focusInput() {
-        this.autoCompleteInput.focusInput();
+        if (this.multiselect()) {
+            return this.innerValue.map((v) => (this.withMetadata() ? { id: v.user.id, title: v.user.title } : v.user.id));
+        }
+        else if (this.innerValue.length) {
+            return this.withMetadata() ? { id: this.innerValue[0].user.id, title: this.innerValue[0].user.title } : this.innerValue[0].user.id;
+        }
+        else
+            return undefined;
     }
     resolveFn(value) {
         const obs = (value instanceof Array ? value : [value]).map((v) => {
@@ -1439,7 +982,7 @@ class OrganizationComponent {
             const match = this.innerValue.find((iv) => iv.user.id === valueID);
             return match
                 ? of(match)
-                : this.userService.getUserById(valueID).pipe(map$1((res) => ({
+                : this.#userService.getUserById(valueID).pipe(map$1((res) => ({
                     user: res,
                     state: {}
                 })), catchError((e) => {
@@ -1458,24 +1001,35 @@ class OrganizationComponent {
         });
         return forkJoin(obs).subscribe((data) => {
             this.innerValue = data;
-            // setTimeout(() => this.autoCompleteInput.cd.markForCheck());
+            const mapped = this.innerValue.map((u) => ({
+                label: u.user.title,
+                value: u
+            }));
+            this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
         });
     }
     autocompleteFn(query) {
         if (query.length >= this.minLength) {
-            this.userService.queryUser(query, this.excludeMe, this.filterRoles).subscribe({
+            this.busy.set(true);
+            this.#userService
+                .queryUser(query, this.excludeMe(), this.#filterRoles)
+                .pipe(finalize(() => {
+                this.busy.set(false);
+            }))
+                .subscribe({
                 next: (users) => {
                     this.autocompleteRes = users
                         .filter((user) => !this.innerValue.some((value) => value.user.id === user.id))
                         .map((user) => ({
-                        user: user,
-                        state: {}
+                        label: user.title,
+                        value: {
+                            user,
+                            state: {}
+                        }
                     }));
-                    this.propagateValidity(this.autocompleteRes.length > 0);
                 },
                 error: () => {
                     this.autocompleteRes = [];
-                    this.propagateValidity(this.autocompleteRes.length > 0);
                 }
             });
         }
@@ -1483,129 +1037,58 @@ class OrganizationComponent {
             this.autocompleteRes = [];
         }
     }
-    // returns null when valid else the validation object
-    validate() {
-        return this.isValidInput ? null : { empty: { valid: false } };
-    }
-    propagateValidity(valid = true) {
-        if (this.isValidInput !== valid) {
-            this.isValidInput = valid;
+    ngOnInit() {
+        this.acFormControl.valueChanges.subscribe((v) => {
+            if (!Array.isArray(v))
+                v = v ? [v] : [];
+            this.innerValue = v.map((i) => i.value);
             this.propagate();
-        }
-    }
-    // handle selection changes to the model
-    onSelect() {
-        if (this.multiselect) {
-            this.value = this.innerValue.map((v) => v.user.id);
-        }
-        else {
-            // internal autocomplete control is always set to multiselect
-            // so the resolved value is always an array
-            this.innerValue = this.innerValue.slice(-1);
-            this.value = this.innerValue[0].user.id;
-        }
-        this.propagate();
-    }
-    // handle selection changes to the model
-    onUnselect(value) {
-        this.innerValue = this.innerValue.filter((v) => v.user.id !== value.id);
-        const _value = this.innerValue.map((v) => v.user.id);
-        this.value = this.multiselect ? _value : null;
-        if (!this.multiselect) {
-            this.clearInnerInput();
-        }
-        this.propagate();
-    }
-    onAutoCompleteBlur() {
-        this.clearInnerInput();
-    }
-    clearInnerInput() {
-        this.autoCompleteInput.clearInput();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: false, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: false, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userSelect: "userSelect" }, host: { listeners: { "keydown.enter": "onKeydownHandler($event)" }, properties: { "class.inputDisabled": "this._inputDisabled" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => OrganizationComponent),
-                multi: true
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => OrganizationComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "autoCompleteInput", first: true, predicate: ["autocomplete"], descendants: true }], ngImport: i0, template: "<yvc-autocomplete\n  [(ngModel)]=\"innerValue\"\n  #autocomplete\n  (suggestionSelect)=\"onSelect()\"\n  [placeholder]=\"placeholder\"\n  (suggestionUnselect)=\"onUnselect($event)\"\n  (blur)=\"onAutoCompleteBlur()\"\n  [disabled]=\"readonly\"\n  [autocompleteValues]=\"autocompleteRes\"\n  field=\"id\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #autocompleteOptionTemplate let-item>\n    <span class=\"chip\">{{ item.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.state.notFound }\" [title]=\"item.titleString\">\n      {{ item.user.title }}\n    </span>\n  </ng-template>\n</yvc-autocomplete>\n\n<yvc-icon class=\"classify\" aria-hidden=\"true\" [svg]=\"multiselect ? icons.organizationMulti : icons.organization\" (click)=\"focusInput()\"></yvc-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--color-error);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--color-error);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yvc-autocomplete{flex:1;--yvc-form-element-focus-border-color: transparent;--yvc-form-element-focus-outline-color: transparent}:host yvc-icon.classify{width:18px;height:18px;padding:calc(var(--app-pane-padding) / 8);color:var(--text-color-hint)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YvcAutocompleteModule }, { kind: "component", type: i3$1.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i3.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }] }); }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? (-1) : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n      {{ item.value.user.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host yuv-icon.classify{width:18px;height:18px;padding:var(--ymt-spacing-3xs);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YvcAutocompleteModule, YvcIconModule, TranslateModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => OrganizationComponent),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => OrganizationComponent),
-                            multi: true
-                        }
-                    ], template: "<yvc-autocomplete\n  [(ngModel)]=\"innerValue\"\n  #autocomplete\n  (suggestionSelect)=\"onSelect()\"\n  [placeholder]=\"placeholder\"\n  (suggestionUnselect)=\"onUnselect($event)\"\n  (blur)=\"onAutoCompleteBlur()\"\n  [disabled]=\"readonly\"\n  [autocompleteValues]=\"autocompleteRes\"\n  field=\"id\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #autocompleteOptionTemplate let-item>\n    <span class=\"chip\">{{ item.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.state.notFound }\" [title]=\"item.titleString\">\n      {{ item.user.title }}\n    </span>\n  </ng-template>\n</yvc-autocomplete>\n\n<yvc-icon class=\"classify\" aria-hidden=\"true\" [svg]=\"multiselect ? icons.organizationMulti : icons.organization\" (click)=\"focusInput()\"></yvc-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--color-error);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--color-error);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yvc-autocomplete{flex:1;--yvc-form-element-focus-border-color: transparent;--yvc-form-element-focus-outline-color: transparent}:host yvc-icon.classify{width:18px;height:18px;padding:calc(var(--app-pane-padding) / 8);color:var(--text-color-hint)}\n"] }]
-        }], propDecorators: { autoCompleteInput: [{
-                type: ViewChild,
-                args: ['autocomplete']
-            }], onKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }], _inputDisabled: [{
-                type: HostBinding,
-                args: ['class.inputDisabled']
-            }], placeholder: [{
-                type: Input
-            }], situation: [{
-                type: Input
-            }], multiselect: [{
-                type: Input
-            }], classifications: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }], appendTo: [{
+            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YuvAutocompleteModule,
+                        MatTooltipModule,
+                        MatIconModule, ReactiveFormsModule, TranslateModule], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? (-1) : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n      {{ item.value.user.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host yuv-icon.classify{width:18px;height:18px;padding:var(--ymt-spacing-3xs);color:var(--ymt-text-color-subtle)}\n"] }]
+        }], propDecorators: { classifications: [{
                 type: Input
-            }], excludeMe: [{
-                type: Input
-            }], userSelect: [{
-                type: Output
             }] } });
 
 class DateRangePickerComponent {
     constructor() {
-        this.#oRef = inject(YvcOverlayRef);
         this.#fb = inject(FormBuilder);
+        this.#dialogData = inject(MAT_DIALOG_DATA);
+        this.#dialogRef = inject((MatDialogRef));
         this.form = this.#fb.group({
-            range: this.#fb.control(this.#oRef.data.range, Validators.required)
+            range: this.#fb.control(this.#dialogData.range, Validators.required)
         });
-        this.range = input(this.#oRef.data.range);
+        this.range = input(this.#dialogData.range);
         this.rangeChange = output();
         this.#rangeEffect = effect(() => {
             const range = this.range();
             this.form.patchValue({ range });
         });
     }
-    #oRef;
     #fb;
+    #dialogData;
+    #dialogRef;
     #rangeEffect;
     apply() {
         this.rangeChange.emit(this.form.value.range || undefined);
-        this.#oRef?.close(this.form.value.range);
+        this.#dialogRef.close(this.form.value.range);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DateRangePickerComponent, isStandalone: true, selector: "yuv-date-range-picker", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n  <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n  <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n  <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host{--form-element-border-color: transparent;--yvc-form-element-border-color: transparent}:host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--app-pane-padding);padding:var(--app-pane-padding)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--text-color-hint);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator", "situation"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: DateRangePickerComponent, isStandalone: true, selector: "yuv-date-range-picker", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n  <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n  <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n  <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--ymt-spacing-m);padding:var(--ymt-spacing-m)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--ymt-text-color-subtle);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator", "situation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-date-range-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule, DatetimeRangeComponent], template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n  <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n  <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n  <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host{--form-element-border-color: transparent;--yvc-form-element-border-color: transparent}:host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--app-pane-padding);padding:var(--app-pane-padding)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--text-color-hint);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"] }]
+            args: [{ selector: 'yuv-date-range-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule, DatetimeRangeComponent], template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n  <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n  <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n  <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--ymt-spacing-m);padding:var(--ymt-spacing-m)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--ymt-text-color-subtle);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"] }]
         }] });
 
 // marker for extracting translations for the available date range options
@@ -1624,22 +1107,25 @@ marker('yuv.form.element.range-select-date.option.custom');
  * 'today', 'this week', 'this month', etc.
  * It also allows to pick a custom date range.
  */
-class RangeSelectDateComponent {
-    #overlay;
-    #fb;
+class RangeSelectDateComponent extends AbstractMatFormField {
+    #dialog;
     #ANY_OPTION;
     #CUSTOM_OPTION;
     #customDateRange;
+    get shouldLabelFloat() {
+        return true;
+    }
     constructor() {
+        super();
         this.translate = inject(TranslateService);
-        this.#overlay = inject(YvcOverlayService);
-        this.#fb = inject(FormBuilder);
+        this.#dialog = inject(MatDialog);
         this.#ANY_OPTION = 'any';
         this.#CUSTOM_OPTION = 'custom';
-        this.dateOptions = signal([]);
-        this.innerForm = this.#fb.nonNullable.group({
-            range: [this.#ANY_OPTION]
+        this.options = signal([]);
+        this.fc = new FormControl(this.#ANY_OPTION, {
+            nonNullable: true
         });
+        this.ngControl = injectNgControl(this);
         /**
          * Range values to be used in the dropdown.
          */
@@ -1653,46 +1139,51 @@ class RangeSelectDateComponent {
         this.propagateChange = (_) => { };
         this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe((_) => this.#setupOptions());
         this.#setupOptions();
-        this.innerForm.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.#onFormValueChange(v));
+        this.fc.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.#onFormValueChange(v));
     }
     #onFormValueChange(v) {
-        if (v.range === this.#CUSTOM_OPTION) {
-            if (!this.#customDateRange || this.dateOptions().find((o) => o.value === this.#CUSTOM_OPTION)?.label === this.#customDateRangeToString())
+        if (v === this.#CUSTOM_OPTION) {
+            if (!this.#customDateRange || this.options().find((o) => o.value === this.#CUSTOM_OPTION)?.label === this.#customDateRangeToString())
                 this.#openCustomRangeDialog();
             else
-                this.propagateChange({
+                this.value = {
                     rangeValue: this.#customDateRange,
                     label: this.#customDateRangeToString()
-                });
+                };
+            this.propagateChange(this.value);
         }
         else {
-            const { start, end } = SearchUtils.dateRangeStartEnd(v.range);
-            this.propagateChange(v.range !== this.#ANY_OPTION
-                ? {
-                    rangeValue: { operator: Operator.INTERVAL_INCLUDE_BOTH, firstValue: start, secondValue: end },
-                    label: this.translate.instant(`yuv.form.element.range-select-date.option.${v.range}`)
-                }
-                : undefined);
+            const { start, end } = SearchUtils.dateRangeStartEnd(v);
+            this.value =
+                v !== this.#ANY_OPTION
+                    ? {
+                        rangeValue: { operator: Operator.INTERVAL_INCLUDE_BOTH, firstValue: start, secondValue: end },
+                        label: this.translate.instant(`yuv.form.element.range-select-date.option.${v}`)
+                    }
+                    : null;
+            this.propagateChange(this.value);
             this.#customDateRange = undefined;
             this.#setupOptions();
         }
     }
     #openCustomRangeDialog() {
         // open date range picker
-        const o = this.#overlay.open(DateRangePickerComponent, {
-            range: this.#customDateRange
+        const o = this.#dialog.open(DateRangePickerComponent, {
+            data: {
+                range: this.#customDateRange
+            }
         });
-        o.afterClosed$.subscribe((res) => {
-            this.#customDateRange = res.data;
-            if (!res.data) {
-                this.innerForm.patchValue({ range: this.#ANY_OPTION });
+        o.afterClosed().subscribe((res) => {
+            this.#customDateRange = res;
+            if (!res) {
+                this.fc.patchValue(this.#ANY_OPTION);
                 this.#setupOptions();
             }
             else {
-                this.#onFormValueChange(this.innerForm.value);
+                this.#onFormValueChange(this.fc.value);
                 this.#setupOptions(this.#customDateRangeToString());
                 setTimeout(() => {
-                    this.innerForm.patchValue({ range: this.#CUSTOM_OPTION }, {
+                    this.fc.patchValue(this.#CUSTOM_OPTION, {
                         emitEvent: false
                     });
                 });
@@ -1709,7 +1200,7 @@ class RangeSelectDateComponent {
                 label: custom || this.translate.instant('yuv.form.element.range-select-date.option.custom'),
                 value: this.#CUSTOM_OPTION
             });
-        this.dateOptions.set([
+        this.options.set([
             {
                 label: this.translate.instant('yuv.form.element.range-select-date.option.any'),
                 value: this.#ANY_OPTION
@@ -1738,18 +1229,19 @@ class RangeSelectDateComponent {
         return undefined;
     }
     writeValue(value) {
+        this.value = value || null;
         if (value?.rangeValue?.operator && value?.rangeValue?.firstValue) {
             const dr = SearchUtils.getMatchingDateRange(value.rangeValue);
             if (dr) {
-                this.innerForm.patchValue({ range: dr });
+                this.fc.patchValue(dr);
             }
             else {
                 this.#customDateRange = value.rangeValue;
-                this.innerForm.patchValue({ range: this.#CUSTOM_OPTION });
+                this.fc.patchValue(this.#CUSTOM_OPTION);
             }
         }
         else {
-            this.innerForm.patchValue({ range: this.#ANY_OPTION });
+            this.fc.patchValue(this.#ANY_OPTION);
         }
     }
     registerOnChange(fn) {
@@ -1757,24 +1249,15 @@ class RangeSelectDateComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: RangeSelectDateComponent, isStandalone: true, selector: "yuv-range-select-date", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, customRange: { classPropertyName: "customRange", publicName: "customRange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RangeSelectDateComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"dateOptions()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RangeSelectDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RangeSelectDateComponent, isStandalone: true, selector: "yuv-range-select-date", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, customRange: { classPropertyName: "customRange", publicName: "customRange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RangeSelectDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-range-select-date', standalone: true, imports: [CommonModule, YvcDropdownModule, ReactiveFormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RangeSelectDateComponent),
-                            multi: true
-                        }
-                    ], template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"dateOptions()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"] }]
+            args: [{ selector: 'yuv-range-select-date', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
         }], ctorParameters: () => [] });
 
 // marker for extracting translations for the available filesize range options
@@ -1787,17 +1270,20 @@ marker('yuv.form.element.range-select-filesize.option.verylarge');
  * Component for selecting a range of filesizes based on pre-defined ranges like
  * 'today', 'this week', 'this month', etc.
  */
-class RangeSelectFilesizeComponent {
-    #fb;
+class RangeSelectFilesizeComponent extends AbstractMatFormField {
     #ANY_OPTION;
+    get shouldLabelFloat() {
+        return true;
+    }
     constructor() {
+        super();
         this.translate = inject(TranslateService$1);
-        this.#fb = inject(FormBuilder);
         this.#ANY_OPTION = 'any';
         this.options = signal([]);
-        this.innerForm = this.#fb.nonNullable.group({
-            range: [this.#ANY_OPTION]
+        this.fc = new FormControl(this.#ANY_OPTION, {
+            nonNullable: true
         });
+        this.ngControl = injectNgControl(this);
         /**
          * Range values to be used in the dropdown.
          */
@@ -1807,14 +1293,15 @@ class RangeSelectFilesizeComponent {
         this.propagateChange = (_) => { };
         this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe((_) => this.#setupOptions());
         this.#setupOptions();
-        this.innerForm.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.#onFormValueChange(v));
+        this.fc.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.#onFormValueChange(v));
     }
     #onFormValueChange(v) {
-        const rangeValue = v.range !== this.#ANY_OPTION ? SearchUtils.filesizeRangeToRangeValue(v.range) : undefined;
+        const rangeValue = v !== this.#ANY_OPTION ? SearchUtils.filesizeRangeToRangeValue(v) : undefined;
         const res = rangeValue && {
             rangeValue,
-            label: this.translate.instant(`yuv.form.element.range-select-filesize.option.${v.range}`)
+            label: this.translate.instant(`yuv.form.element.range-select-filesize.option.${v}`)
         };
+        this.value = res || null;
         this.propagateChange(res);
     }
     #setupOptions() {
@@ -1831,105 +1318,406 @@ class RangeSelectFilesizeComponent {
         ]);
     }
     writeValue(value) {
-        const patch = { range: this.#ANY_OPTION };
+        this.value = value || null;
+        let patch = this.#ANY_OPTION;
         if (value?.rangeValue?.operator && value?.rangeValue?.firstValue) {
             const range = SearchUtils.getMatchingFilesizeRange(value.rangeValue);
             if (range)
-                patch.range = range;
+                patch = range;
         }
-        this.innerForm.patchValue(patch);
+        this.fc.patchValue(patch);
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectFilesizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: RangeSelectFilesizeComponent, isStandalone: true, selector: "yuv-range-select-filesize", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RangeSelectFilesizeComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"options()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>\n", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RangeSelectFilesizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RangeSelectFilesizeComponent, isStandalone: true, selector: "yuv-range-select-filesize", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectFilesizeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RangeSelectFilesizeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-range-select-filesize', standalone: true, imports: [CommonModule, YvcDropdownModule, ReactiveFormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RangeSelectFilesizeComponent),
-                            multi: true
-                        }
-                    ], template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"options()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>\n", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"] }]
+            args: [{ selector: 'yuv-range-select-filesize', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Creates form input for strings. Based on the input values different kinds of inputs will be generated.
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms.
+ *
+ * @example
+ * <!-- string input validating input to be between 5 and 10 characters -->
+ * <yuv-string [minLength]="5" [maxLength]="10"></yuv-string>
+ *
+ * <!-- string input that only allow digits -->
+ * <yuv-string  [regex]="[0-9]*"></yuv-string>
+ *
+ * <!-- string input rendering a large textarea -->
+ * <yuv-string [rows]="10"></yuv-string>
+ *
+ */
+class StringComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#elRef = inject(ElementRef);
+        this.#dRef = inject(DestroyRef);
+        this.fc = new FormControl(undefined);
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.classifiytionIcons = {
+            email: 'email',
+            url: 'language',
+            phone: 'call'
+        };
+        /**
+         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
+         */
+        this.multiselect = false;
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = false;
+        /**
+         * Enable autofucus for the input (default: false)
+         */
+        this.autofocus = false;
+        this.valid = false;
+        this.validationErrors = [];
+        this.#classifications = [];
+        this.ngControl = injectNgControl(this);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #elRef;
+    #dRef;
+    /**
+     * Additional semantics for the form element. Possible values are
+     * `email` (validates and creates a link to send an email once there
+     * is a valid email address) and `url` (validates and creates a link
+     * to an URL typed into the form element).
+     */
+    set classifications(c) {
+        this.#classifications = c;
+        if (c && c.length) {
+            if (c.includes(Classification.STRING_EMAIL)) {
+                this.classify = {
+                    hrefPrefix: ClassificationPrefix.EMAIL,
+                    icon: this.classifiytionIcons.email
+                };
+            }
+            else if (c.includes(Classification.STRING_URL)) {
+                this.classify = {
+                    hrefPrefix: ClassificationPrefix.URL,
+                    icon: this.classifiytionIcons.url
+                };
+            }
+            else if (c.includes(Classification.STRING_PHONE)) {
+                this.classify = {
+                    hrefPrefix: ClassificationPrefix.PHONE,
+                    icon: this.classifiytionIcons.phone
+                };
+            }
+        }
+    }
+    get classifications() {
+        return this.#classifications;
+    }
+    #classifications;
+    propagate() {
+        this.propagateChange(this.value);
+    }
+    writeValue(value) {
+        if (Array.isArray(value)) {
+            value = value.filter((v) => typeof v === 'string' && v.trim().length > 0);
+        }
+        else {
+            this.formatedValue = Utils.formatMailTo(value, this.classify?.hrefPrefix === ClassificationPrefix.EMAIL);
+        }
+        this.fc.patchValue(value);
+        this.value = value || undefined;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    #onValueChange(val) {
+        this.value = val;
+        this.empty = Utils.isEmpty(val);
+        if (this.empty) {
+            this.value = undefined;
+            this.propagate();
+            return;
+        }
+        this.formatedValue = Utils.formatMailTo(val, this.classify?.hrefPrefix === ClassificationPrefix.EMAIL);
+        this.propagate();
+    }
+    onBlur() {
+        if (!this.value)
+            return;
+        // only called by single item input
+        const value = this.value;
+        const lengthBefore = value.length;
+        this.value = value.trim();
+        if (this.value.length !== lengthBefore) {
+            this.propagate();
+        }
+    }
+    // chips for multiselect
+    chipsAdd(event) {
+        const value = (event.value || '').trim();
+        if (value) {
+            this.value = [...(this.value || []), value];
+            this.fc.patchValue(this.value);
+        }
+        // Clear the input value
+        event.chipInput.clear();
+    }
+    chipsRemove(v) {
+        const currValue = this.value;
+        const index = currValue.indexOf(v);
+        if (index !== -1) {
+            currValue.splice(index, 1);
+            this.value = [...currValue];
+            this.fc.patchValue(this.value);
+        }
+    }
+    chipsEdit(v, event) {
+        const value = event.value.trim();
+        if (!value) {
+            this.chipsRemove(v);
+            return;
+        }
+        const currValue = this.value;
+        const index = currValue.indexOf(v);
+        if (index >= 0) {
+            currValue[index] = value;
+            this.value = [...currValue];
+            this.fc.patchValue(this.value);
+        }
+    }
+    validateClassification(string, classification) {
+        if (this.situation === Situation.SEARCH) {
+            return true;
+        }
+        else {
+            let pattern;
+            if (classification === Classification.STRING_EMAIL) {
+                pattern =
+                    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+            }
+            else if (classification === Classification.STRING_URL) {
+                pattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)?([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
+            }
+            else if (classification === Classification.STRING_PHONE) {
+                pattern = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-x\s\./0-9]*$/g;
+            }
+            return pattern ? pattern.test(string) : true;
+        }
+    }
+    #getValidator() {
+        return (control) => {
+            this.maxEntryCountIfInvalid = undefined;
+            this.validationErrors = [];
+            const val = control.value;
+            if (!val)
+                return null;
+            const multiCheck = (check) => !!(this.multiselect ? val : [val]).find((v) => check(v));
+            // validate regular expression
+            if (this.regex && multiCheck((v) => !RegExp(this.regex).test(v))) {
+                this.validationErrors.push({ key: 'regex' });
+            }
+            // validate classification settings
+            if (this.classifications && this.classifications.length) {
+                this.classifications.forEach((c) => {
+                    if (multiCheck((v) => !this.validateClassification(v, c))) {
+                        this.validationErrors.push({ key: 'classification' + c });
+                    }
+                });
+            }
+            // validate min length
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            if (!Utils.isEmpty(this.minLength) && multiCheck((v) => v.length < this.minLength)) {
+                this.validationErrors.push({ key: 'minlength', params: { minLength: this.minLength } });
+            }
+            // validate max length
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            if (!Utils.isEmpty(this.maxLength) && multiCheck((v) => v.length > this.maxLength)) {
+                this.validationErrors.push({ key: 'maxlength', params: { maxLength: this.maxLength } });
+            }
+            // validate invalid if only whitespaces
+            if (multiCheck((v) => v.length > 0 && !v.trim().length)) {
+                this.validationErrors.push({ key: 'onlyWhitespaces' });
+            }
+            if (this.validationErrors.length && this.multiselect && this.value) {
+                // Setting maxEntryCountIfInvalid to the actual length of the value array to prevent the user to add more entries.
+                this.maxEntryCountIfInvalid = this.value.length;
+            }
+            if (this.validationErrors.length) {
+                this.valid = false;
+                return Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
+            }
+            else {
+                this.valid = true;
+                return null;
+            }
+        };
+    }
+    ngOnInit() {
+        this.fc.setValidators(this.#getValidator());
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.fc.invalid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.fc.errors);
+            }
+        });
+        this.fc.updateValueAndValidity();
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
+    }
+    ngAfterViewInit() {
+        if (this.autofocus) {
+            if (!this.multiselect) {
+                const el = this.#elRef.nativeElement.querySelector(this.rows && this.rows > 1 ? 'textarea' : 'input');
+                if (el)
+                    el.focus();
+            }
+        }
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <mat-chip-grid #chipGrid [formControl]=\"fc\" [disabled]=\"disabled\">\n    @for (v of value; track v) {\n      <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n        {{ v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input\n      [disabled]=\"disabled\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      [matChipInputAddOnBlur]=\"true\"\n      (matChipInputTokenEnd)=\"chipsAdd($event)\"\n    />\n  </mat-chip-grid>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea\n    matInput\n    class=\"input-textarea\"\n    (blur)=\"onBlur()\"\n    [rows]=\"rows\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [formControl]=\"fc\"\n  ></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StringComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <mat-chip-grid #chipGrid [formControl]=\"fc\" [disabled]=\"disabled\">\n    @for (v of value; track v) {\n      <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n        {{ v }}\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input\n      [disabled]=\"disabled\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      [matChipInputAddOnBlur]=\"true\"\n      (matChipInputTokenEnd)=\"chipsAdd($event)\"\n    />\n  </mat-chip-grid>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea\n    matInput\n    class=\"input-textarea\"\n    (blur)=\"onBlur()\"\n    [rows]=\"rows\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [formControl]=\"fc\"\n  ></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}\n"] }]
+        }], propDecorators: { multiselect: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], classifications: [{
+                type: Input
+            }], situation: [{
+                type: Input
+            }], regex: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }] } });
+
+class CatalogComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#system = inject(SystemService);
+        this.#dRef = inject(DestroyRef);
+        this.readonly = input(false);
+        this.multiple = input(false);
+        this._options = signal([]);
+        this.options = input([]);
+        this.#optionsEffect = effect(() => {
+            untracked(() => {
+                this._options.set(this.options() || []);
+            });
+        });
+        /**
+         * Additional semantics for the form element.
+         */
+        this.classifications = input([]);
+        this.#classificationEffect = effect(() => {
+            const cls = this.classifications();
+            untracked(() => {
+                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG);
+                if (ce && ce.options) {
+                    this._options.set(ce.options);
+                }
+            });
+        });
+        this.ngControl = injectNgControl(this);
+        this.fc = new FormControl(undefined);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #system;
+    #dRef;
+    #optionsEffect;
+    #classificationEffect;
+    #onValueChange(val) {
+        this.value = val;
+        this.propagateChange(this.value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    ngOnInit() {
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o\">{{ o }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-catalog', imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o\">{{ o }}</mat-option>\n  }\n</mat-select>\n" }]
+        }], propDecorators: { situation: [{
+                type: Input
+            }] } });
+
+const formElementCmps = [
+    StringComponent,
+    NumberComponent,
+    NumberRangeComponent,
+    DatetimeComponent,
+    DatetimeRangeComponent,
+    OrganizationComponent,
+    StringComponent,
+    CatalogComponent
+];
 class YuvFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: YuvFormsModule, imports: [CommonModule,
-            FormsModule,
-            TranslateModule$1,
-            ReactiveFormsModule,
-            YvcFocusWithin,
-            YvcAutocompleteModule,
-            YvcDatepickerModule,
-            FormsModule,
-            YvcCheckboxModule,
-            YvcIconModule,
-            YvcChipsModule,
-            YvcDropdownModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvFormsModule, imports: [CommonModule,
-            FormsModule,
-            TranslateModule$1,
-            ReactiveFormsModule,
-            YvcAutocompleteModule,
-            YvcDatepickerModule,
-            FormsModule,
-            YvcCheckboxModule,
-            YvcIconModule,
-            YvcChipsModule,
-            YvcDropdownModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: YuvFormsModule, imports: [StringComponent,
+            NumberComponent,
+            NumberRangeComponent,
+            DatetimeComponent,
+            DatetimeRangeComponent,
+            OrganizationComponent,
+            StringComponent,
+            CatalogComponent], exports: [StringComponent,
+            NumberComponent,
+            NumberRangeComponent,
+            DatetimeComponent,
+            DatetimeRangeComponent,
+            OrganizationComponent,
+            StringComponent,
+            CatalogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvFormsModule, imports: [formElementCmps] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvFormsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        TranslateModule$1,
-                        ReactiveFormsModule,
-                        YvcFocusWithin,
-                        YvcAutocompleteModule,
-                        YvcDatepickerModule,
-                        FormsModule,
-                        YvcCheckboxModule,
-                        YvcIconModule,
-                        YvcChipsModule,
-                        YvcDropdownModule,
-                    ]
+                    imports: [...formElementCmps],
+                    exports: [...formElementCmps]
                 }]
         }] });
 
-// export { CatalogComponent } from './lib/elements/catalog/catalog.component';
-// export { CheckboxComponent } from './lib/elements/checkbox/checkbox.component';
-// export { DatetimeRangeComponent } from './lib/elements/datetime-range/datetime-range.component';
-// export { DatepickerComponent } from './lib/elements/datetime/datepicker/datepicker.component';
-// export { DatetimeComponent } from './lib/elements/datetime/datetime.component';
-// export { YearRangeDirective } from './lib/elements/datetime/year-range/year-range.directive';
-// export { DynamicCatalogManagementComponent } from './lib/elements/dynamic-catalog/dynamic-catalog-management/dynamic-catalog-management.component';
-// export { DynamicCatalogComponent } from './lib/elements/dynamic-catalog/dynamic-catalog.component';
-// export { NumberRangeComponent } from './lib/elements/number-range/number-range.component';
-// export { NumberComponent } from './lib/elements/number/number.component';
-// export { OrganizationSetComponent } from './lib/elements/organization-set/organization-set.component';
-// export { OrganizationComponent } from './lib/elements/organization/organization.component';
-// export { ReferenceItemComponent } from './lib/elements/reference/reference-item/reference-item.component';
-// export { ReferenceComponent } from './lib/elements/reference/reference.component';
-// export * from './lib/elements/reference/reference.interface';
-// export { StringComponent } from './lib/elements/string/string.component';
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, FormInputComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map