@yuuvis/client-framework 0.8.0 → 0.9.1

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

@@ -1,31 +1,118 @@
+import * as i1$2 from '@angular/common';
+import { CommonModule, DecimalPipe, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, Input, inject, input, EventEmitter, ViewChild, HostListener, HostBinding, Output, ElementRef, Renderer2, ViewEncapsulation, NgModule, output, effect, signal } 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, FormBuilder, Validators, NG_VALIDATORS, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl } 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, OperatorLabel, Operator, Situation, FileSizePipe, LocaleNumberPipe, Utils, SystemService, UserService, YuvUser, TranslateModule, ClassificationPrefix, TranslateService as TranslateService$1, SearchUtils, LocaleDatePipe } 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 { TranslateService, TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
-import * as i2$1 from '@yuuvis/components/datepicker';
-import { YvcDatepickerModule } from '@yuuvis/components/datepicker';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { YUV_ICONS, IconService } from '@yuuvis/client-framework/icons';
-import * as i2$2 from '@yuuvis/components/autocomplete';
-import { YvcAutocompleteModule } from '@yuuvis/components/autocomplete';
+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 { of, forkJoin } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import * as i2$3 from '@yuuvis/components/chips';
+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 { FocusWithinDirective } from '@yuuvis/client-framework/common';
-import { YvcCheckboxModule } from '@yuuvis/components/checkbox';
-import { YvcFocusWithin } from '@yuuvis/components/common';
+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 { YvcOverlayRef, YvcOverlayService } from '@yuuvis/components/overlay';
+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.
@@ -137,310 +224,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class DatetimeComponent {
-    constructor() {
-        this.translate = inject(TranslateService);
-        this.value = null;
-        this.locale = this.translate.currentLang;
-        /**
-         * Whether or not to allow only values in the future (default: false)
-         */
-        this.onlyFutureDates = false;
-        /**
-         * Will prevent the input from being changed (default: false)
-         */
-        this.readonly = false;
-        /**
-         * Enables setting time as well (default: false)
-         */
-        this.withTime = 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));
+/**
+ * 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);
     }
-    _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') }
-        };
+    get scale() {
+        return this._scale;
     }
-    writeValue(value) {
-        if (typeof value === 'string') {
-            value = new Date(value);
-            this.propagateChange(value);
-        }
-        this.value = value || null;
+    /**
+     * Overall amount of digits allowed (including decimal places)
+     */
+    set precision(val) {
+        this._precision = Math.min(val || 100, 100);
     }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
+    get precision() {
+        return this._precision;
     }
-    registerOnValidatorChange(fn) {
-        this.validationChange = fn;
+    /**
+     *  Set to true to group number by pattern
+     */
+    set grouping(val) {
+        this._grouping = val ?? true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched() { }
-    onValueChange(e) {
-        this.propagateChange(e);
+    get grouping() {
+        return this._grouping;
     }
-    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$1.Datepicker, selector: "yvc-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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
-            }] } });
-
-class DatetimeRangeComponent {
-    constructor() {
-        this.fb = inject(FormBuilder);
-        /**
-         * Enables setting time as well (default: false)
-         */
-        this.withTime = false;
+    /**
+     * 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;
-        this.operator = 'eq';
-        this.rangeForm = this.fb.group({
-            dateValue: [undefined, Validators.required],
-            dateValueFrom: []
-        });
-        this._isValid = true;
-        // options for search situation
-        this.availableSearchOptions = [
-            { label: OperatorLabel.EQUAL, value: Operator.EQUAL },
-            { label: OperatorLabel.GREATER_OR_EQUAL, value: Operator.GREATER_OR_EQUAL },
-            { 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;
         // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
-    }
-    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,
-                dateValue: value.secondValue || value.firstValue
-            });
-        }
-        else {
-            this.searchOption = this.availableSearchOptions[0].value;
-            this.value = undefined;
-            this.rangeForm.reset();
-        }
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
-    onValueChange() {
-        const dateValue = this.rangeForm.value.dateValue || undefined;
-        if (this.searchOption === 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
-                    : {
-                        operator: this.searchOption,
-                        firstValue: dateValueFrom,
-                        secondValue: dateValue
-                    };
-            }
-        }
-        else {
-            this._isValid = this.rangeForm.valid;
-            this.value = !this._isValid
-                ? // {
-                    //   operator: this.searchOption,
-                    //   firstValue: undefined,
-                    //   secondValue: undefined
-                    // }
-                    undefined
-                : {
-                    operator: this.searchOption,
-                    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();
-                err = {
-                    daterangeorder: {
-                        valid: false
-                    }
-                };
-            }
-            else {
-                err = {
-                    daterange: {
-                        valid: false
-                    }
-                };
-            }
-        }
-        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
-            }
-        ], 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
-        }], propDecorators: { withTime: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], operator: [{
-                type: Input
-            }], situation: [{
-                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);
+        this.numberPipe = new LocaleNumberPipe(this.translate);
     }
     writeValue(value) {
         this.value = value != null ? value : null;
@@ -558,453 +413,924 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 /**
- * Creates form input for ranges of numeric values.
+ * 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
- * <yuv-number-range [scale]="2"></yuv-number-range>
+ * <!-- 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 NumberRangeComponent {
+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;
         /**
-         *  Set to true to group number by pattern
+         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
          */
-        this.grouping = false;
+        this.multiselect = false;
         /**
          * Will prevent the input from being changed (default: false)
          */
         this.readonly = false;
         /**
-         * 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)
+         * Enable autofucus for the input (default: false)
          */
-        this.classifications = [];
-        this.rangeForm = new UntypedFormGroup({
-            numberValue: new UntypedFormControl(),
-            numberValueFrom: new UntypedFormControl()
-        });
-        this.isValid = true;
-        // options for search situation
-        this.availableSearchOptions = [
-            { label: OperatorLabel.EQUAL, value: Operator.EQUAL },
-            { label: OperatorLabel.GREATER_OR_EQUAL, value: Operator.GREATER_OR_EQUAL },
-            { 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;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+        this.autofocus = false;
+        this.valid = false;
+        this.validationErrors = [];
+        this._classifications = [];
         this.propagateChange = (_) => { };
-        this.rangeForm.valueChanges.forEach(() => {
-            this.onValueChange();
-        });
     }
-    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) {
-                this.rangeForm.setValue({
-                    numberValueFrom: null,
-                    numberValue: value.firstValue != null ? value.firstValue : null
-                });
-            }
-            else {
-                this.rangeForm.setValue({
-                    numberValueFrom: value.firstValue != null ? value.firstValue : null,
-                    numberValue: value.secondValue
-                });
+    /**
+     * 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
+                };
             }
         }
-        else {
-            this.searchOption = this.availableSearchOptions[0].value;
-            this.value = undefined;
-            this.rangeForm.reset();
+    }
+    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;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
-    onValueChange() {
-        this.isValid = this.rangeForm.valid;
-        if (this.searchOption === 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,
-                    firstValue: undefined,
-                    secondValue: undefined
+    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 });
                 }
-                : {
-                    operator: this.searchOption,
-                    firstValue: this.rangeForm.value.numberValueFrom,
-                    secondValue: this.rangeForm.value.numberValue
-                };
+            });
+        }
+        // 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 {
-            this.value = !this.isValid
-                ? {
-                    operator: this.searchOption,
-                    firstValue: undefined,
-                    secondValue: undefined
-                }
-                : {
-                    operator: this.searchOption,
-                    firstValue: this.rangeForm.value.numberValue,
-                    secondValue: undefined
-                };
+            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;
         }
-        this.propagateChange(this.value);
     }
-    // returns null when valid else the validation object
+    /**
+     * returns null when valid else the validation object
+     */
     validate() {
-        let err;
-        if (this.searchOption === Operator.EQUAL) {
-            err = { number: { valid: false } };
-        }
-        else if (this.searchOption === 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 } };
+        if (this.validationErrors.length) {
+            this.valid = false;
+            return Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
         }
         else {
-            err = { numberrange: { valid: false } };
+            this.valid = true;
+            return null;
         }
-        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: [
+    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(() => NumberRangeComponent),
+                useExisting: forwardRef(() => StringComponent),
                 multi: true
             },
             {
                 provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => NumberRangeComponent),
+                useExisting: forwardRef(() => StringComponent),
                 multi: true
             }
-        ], 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"] }] }); }
+        ], 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: NumberRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-number-range', standalone: true, imports: [CommonModule, NumberComponent, YvcDropdownModule, FormsModule, ReactiveFormsModule], providers: [
+            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, YvcChipsModule, YvcIconModule, FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NumberRangeComponent),
+                            useExisting: forwardRef(() => StringComponent),
                             multi: true
                         },
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => NumberRangeComponent),
+                            useExisting: forwardRef(() => StringComponent),
                             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: [{
-                type: Input
-            }], precision: [{
-                type: Input
-            }], grouping: [{
+                    ], 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
-            }], pattern: [{
+            }], rows: [{
                 type: Input
             }], readonly: [{
                 type: Input
+            }], autofocus: [{
+                type: Input
             }], classifications: [{
                 type: Input
-            }], minValue: [{
+            }], situation: [{
                 type: Input
-            }], maxValue: [{
+            }], regex: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
                 type: Input
             }] } });
 
-/**
- * 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 EditTableDataComponent {
     constructor() {
-        this.system = inject(SystemService);
-        this.userService = inject(UserService);
-        this.minLength = 2;
-        this.icons = {
-            organizationMulti: YUV_ICONS['group'],
-            organization: YUV_ICONS['user']
+        this.#oRef = inject((YvcOverlayRef));
+        this.#fb = inject(FormBuilder);
+        this.#errorMassge = inject(ErrorMessagesService);
+        this.errorMassage = 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;
+    }
+    #oRef;
+    #fb;
+    #errorMassge;
+    #elementData;
+    cancel() {
+        if (this.#oRef)
+            this.#oRef.close();
+    }
+    submit() {
+        if (this.tableForm.valid && this.#oRef)
+            this.#oRef.close(this.tableForm.getRawValue());
+    }
+    ngOnInit() {
+        Object.values(this.formElement['elements']).forEach((element) => {
+            return this.tableForm.addControl(element.name, this.#fb.control({ value: '', disabled: element.readonly }, element.required ? Validators.required : null));
+        });
+        this.tableForm.setValidators(this.#globalErrorValidator());
+        this.#elementData && this.tableForm.patchValue(this.#elementData);
+        this.tableForm.valueChanges.subscribe((v) => {
+            this.errorMassage.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) }))
+                    : null)
+                : null);
+        });
+    }
+    #globalErrorValidator() {
+        return (control) => {
+            const formGroup = control;
+            const errors = {};
+            Object.keys(formGroup.controls).forEach((key) => {
+                const control = formGroup.get(key);
+                if (control && control.invalid && control.dirty) {
+                    const controlErrors = control.errors;
+                    if (controlErrors) {
+                        // Ignore 'required' error if there are more errors
+                        if (Object.keys(controlErrors).length > 1 && controlErrors['required']) {
+                            const { required, ...otherErrors } = controlErrors;
+                            errors[key] = otherErrors;
+                        }
+                        else {
+                            errors[key] = controlErrors;
+                        }
+                    }
+                }
+            });
+            return Object.keys(errors).length ? errors : null;
         };
-        this.isValidInput = true;
+    }
+    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: [
+            {
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: [
+                        {
+                            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"] }]
+        }] });
+
+var DataGridSizeType;
+(function (DataGridSizeType) {
+    DataGridSizeType["SMALL"] = "small";
+    DataGridSizeType["MEDIUM"] = "medium";
+    DataGridSizeType["LARGE"] = "large";
+    DataGridSizeType["XLARGE"] = "extra-large";
+    DataGridSizeType["AUTO"] = "auto";
+})(DataGridSizeType || (DataGridSizeType = {}));
+
+const CDK_IMPORT = [CdkMenu, CdkTableModule, CdkMenuTrigger, CdkMenuItem];
+class DataGridComponent {
+    constructor() {
+        this.#overlay = inject(YvcOverlayService);
+        this.#clipboardService = inject(ClipboardService);
+        this.#decimalPipe = inject(DecimalPipe);
+        this.trnaslate = inject(TranslateService);
+        this.situation = input(Situation.EDIT);
+        this.formElement = input(undefined);
+        this.formControl = input(undefined);
+        this.classifications = input([]);
+        this.readonly = input(false);
+        this.size = input(DataGridSizeType.AUTO);
+        this.displayedColumns = signal([]);
+        this.displayedColumnsWithActions = signal([]);
+        this.dataSource = signal([]);
+        this.tableLabel = computed(() => this.formElement()?.['label'] ?? '');
+        this.selectedRow = signal(null);
+        this.initalTableUpdate = true;
+        this.icons = {
+            add: YUV_ICONS.add,
+            more: YUV_ICONS.more
+        };
+        this.#loadData = effect(() => {
+            const formElement = this.formElement();
+            untracked(() => formElement && this.#updateTable(formElement['elements'], formElement['value'] || []));
+        });
+        this.#sourceData = effect(() => {
+            const dataSource = this.dataSource();
+            !this.initalTableUpdate && this.writeValue(dataSource.filter((row) => !row.isAddRow));
+            this.initalTableUpdate = 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 = () => { };
+    }
+    #overlay;
+    #clipboardService;
+    #decimalPipe;
+    #loadData;
+    #sourceData;
+    #openEditOverlay(elementData, adding = false) {
+        return this.#overlay
+            .open(EditTableDataComponent, {
+            formElement: {
+                ...this.formElement()
+            },
+            elementData,
+            situation: this.situation(),
+            adding,
+            label: this.tableLabel()
+        })
+            .afterClosed$.pipe(map((result) => result.data));
+    }
+    copyLine(element) {
+        this.#clipboardService.addToNavigatorClipBoard(JSON.stringify(element));
+    }
+    onMenuTriggert(element) {
+        this.selectedRow.set(element);
+    }
+    editRow(element) {
+        this.selectedRow.set(element);
+        this.#openEditOverlay(element).subscribe((result) => {
+            if (result) {
+                const updatedData = this.dataSource().map((item) => (JSON.stringify(item) === JSON.stringify(element) ? result : item));
+                const formElement = this.formElement();
+                formElement && this.#updateTable(formElement['elements'], [...updatedData]);
+            }
+            this.selectedRow.set(null);
+        });
+    }
+    addRow() {
+        this.#openEditOverlay(null, true).subscribe((result) => {
+            const currentData = this.dataSource();
+            const data = [...currentData];
+            result && data.push(result);
+            const formElement = this.formElement();
+            formElement && this.#updateTable(formElement['elements'], data);
+        });
+    }
+    removeRow(element) {
+        const updatedData = this.dataSource().filter((item) => JSON.stringify(item) !== JSON.stringify(element));
+        const formElement = this.formElement();
+        formElement && this.#updateTable(formElement['elements'], updatedData);
+    }
+    #cellor(element, value) {
+        switch (element.type) {
+            case 'string':
+                return value;
+                break;
+            case 'decimal':
+                return this.#decimalPipe.transform(value, '1.2-4', this.trnaslate.currentLang);
+                break;
+            default:
+                return value;
+                break;
+        }
+    }
+    #updateTable(elements, data = []) {
+        if (elements.length > 0) {
+            this.displayedColumns.set(elements.reduce((acc, el) => {
+                acc.push({
+                    columnDef: el.label,
+                    header: el.label,
+                    cell: (element) => (element.isAddRow ? '' : this.#cellor(el, element[el.label]))
+                });
+                return acc;
+            }, []));
+        }
+        else {
+            this.displayedColumns.set([]);
+        }
+        this.displayedColumnsWithActions.set([...this.displayedColumns().map((col) => col.columnDef), 'actions']);
+        this.dataSource.set(data);
+    }
+    writeValue(obj) {
+        this.propagateChange(obj);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.validationChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        // console.log('setDisabledState: ', isDisabled);
+    }
+    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: [
+            {
+                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;z-index:1;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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DataGridComponent),
+                            multi: true
+                        },
+                        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;z-index:1;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"] }]
+        }] });
+
+class DatetimeComponent {
+    constructor() {
+        this.translate = inject(TranslateService$1);
         this.value = null;
-        this._innerValue = [];
-        this.autocompleteRes = [];
-        this.filterRoles = [];
+        this.locale = this.translate.currentLang;
+        /**
+         * Whether or not to allow only values in the future (default: false)
+         */
+        this.onlyFutureDates = false;
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = false;
+        /**
+         * Enables setting time as well (default: false)
+         */
+        this.withTime = 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() {
+        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') }
+        };
+    }
+    writeValue(value) {
+        if (typeof value === 'string') {
+            value = new Date(value);
+            this.propagateChange(value);
+        }
+        this.value = value || null;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.validationChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    onValueChange(e) {
+        this.propagateChange(e);
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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
+            }] } });
+
+class DatetimeRangeComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        /**
+         * Enables setting time as well (default: false)
+         */
+        this.withTime = false;
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = false;
+        this.operator = 'eq';
+        this.rangeForm = this.fb.group({
+            dateValue: [undefined, Validators.required],
+            dateValueFrom: []
+        });
+        this._isValid = true;
+        // options for search situation
+        this.availableSearchOptions = [
+            { label: OperatorLabel.EQUAL, value: Operator.EQUAL },
+            { label: OperatorLabel.GREATER_OR_EQUAL, value: Operator.GREATER_OR_EQUAL },
+            { 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;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    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,
+                dateValue: value.secondValue || value.firstValue
+            });
+        }
+        else {
+            this.searchOption = this.availableSearchOptions[0].value;
+            this.value = undefined;
+            this.rangeForm.reset();
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    onValueChange() {
+        const dateValue = this.rangeForm.value.dateValue || undefined;
+        if (this.searchOption === 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
+                    : {
+                        operator: this.searchOption,
+                        firstValue: dateValueFrom,
+                        secondValue: dateValue
+                    };
+            }
+        }
+        else {
+            this._isValid = this.rangeForm.valid;
+            this.value = !this._isValid
+                ? // {
+                    //   operator: this.searchOption,
+                    //   firstValue: undefined,
+                    //   secondValue: undefined
+                    // }
+                    undefined
+                : {
+                    operator: this.searchOption,
+                    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();
+                err = {
+                    daterangeorder: {
+                        valid: false
+                    }
+                };
+            }
+            else {
+                err = {
+                    daterange: {
+                        valid: false
+                    }
+                };
+            }
+        }
+        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
+            }
+        ], 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
+        }], propDecorators: { withTime: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], operator: [{
+                type: Input
+            }], situation: [{
+                type: Input
+            }] } });
+
+/**
+ * Creates form input for ranges of numeric values.
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms.
+ *
+ * @example
+ * <yuv-number-range [scale]="2"></yuv-number-range>
+ *
+ */
+class NumberRangeComponent {
+    constructor() {
         /**
-         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
+         *  Set to true to group number by pattern
          */
-        this.multiselect = false;
+        this.grouping = false;
         /**
          * Will prevent the input from being changed (default: false)
          */
         this.readonly = false;
         /**
-         * 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.
-         */
-        this.autofocus = false;
-        /**
-         * Will attch the overlay to this HTMLelement
-         */
-        this.appendTo = null;
-        /**
-         * Whether or not to exclude the current user from autocomplete result
-         */
-        this.excludeMe = false;
-        /**
-         * Whether or not the emitted value should be an object containing id and title
-         * or, if set to false only the ID
+         * 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.withMetadata = input(false);
-        this.userSelect = new EventEmitter();
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        this.classifications = [];
+        this.rangeForm = new UntypedFormGroup({
+            numberValue: new UntypedFormControl(),
+            numberValueFrom: new UntypedFormControl()
+        });
+        this.isValid = true;
+        // options for search situation
+        this.availableSearchOptions = [
+            { label: OperatorLabel.EQUAL, value: Operator.EQUAL },
+            { label: OperatorLabel.GREATER_OR_EQUAL, value: Operator.GREATER_OR_EQUAL },
+            { 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;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
-    }
-    set innerValue(iv) {
-        this._innerValue = iv || [];
-        this.userSelect.emit(this._innerValue);
-    }
-    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;
-    }
-    set classifications(c) {
-        this._classifications = c;
-        if (c?.length) {
-            const classifications = this.system.getClassifications(c);
-            if (classifications.has(Classification.STRING_ORGANIZATION)) {
-                const options = classifications.get(Classification.STRING_ORGANIZATION).options;
-                this.filterRoles = options;
-            }
-        }
-        else {
-            this.filterRoles = [];
-        }
-    }
-    get classifications() {
-        return this._classifications;
+        this.rangeForm.valueChanges.forEach(() => {
+            this.onValueChange();
+        });
     }
     writeValue(value) {
-        if (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;
-            this.resolveFn(value);
+            if (value.secondValue == null) {
+                this.rangeForm.setValue({
+                    numberValueFrom: null,
+                    numberValue: value.firstValue != null ? value.firstValue : null
+                });
+            }
+            else {
+                this.rangeForm.setValue({
+                    numberValueFrom: value.firstValue != null ? value.firstValue : null,
+                    numberValue: value.secondValue
+                });
+            }
         }
         else {
-            this.value = null;
-            this.innerValue = [];
+            this.searchOption = this.availableSearchOptions[0].value;
+            this.value = undefined;
+            this.rangeForm.reset();
         }
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    propagate() {
-        this.propagateChange(this.#getPropagateValue());
-    }
-    #getPropagateValue() {
-        return this.multiselect
-            ? this.withMetadata()
-                ? this.value
-                    ? this._innerValue.map((v) => ({
-                        id: v.id,
-                        title: v.title
-                    }))
-                    : this.value
-                : this.value
-            : this.withMetadata()
-                ? this.value
-                    ? {
-                        id: this._innerValue[0].id,
-                        title: this._innerValue[0].title
-                    }
-                    : this.value
-                : this.value;
-    }
-    focusInput() {
-        this.autoCompleteInput.focusInput();
-    }
-    resolveFn(value) {
-        const map = (value instanceof Array ? value : [value]).map((v) => {
-            const match = this.innerValue.find((iv) => iv.id === v);
-            return match
-                ? of(match)
-                : this.userService.getUserById(v).pipe(catchError(() => of(new YuvUser({
-                    id: v,
-                    title: v,
-                    image: null
-                }, undefined))));
-        });
-        return forkJoin(map).subscribe((data) => {
-            this.innerValue = data;
-            // setTimeout(() => this.autoCompleteInput.cd.markForCheck());
-        });
-    }
-    autocompleteFn(query) {
-        if (query.length >= this.minLength) {
-            this.userService.queryUser(query, this.excludeMe, this.filterRoles).subscribe({
-                next: (users) => {
-                    this.autocompleteRes = users.filter((user) => !this.innerValue.some((value) => value.id === user.id));
-                    this.propagateValidity(this.autocompleteRes.length > 0);
-                },
-                error: () => {
-                    this.autocompleteRes = [];
-                    this.propagateValidity(this.autocompleteRes.length > 0);
+    onValueChange() {
+        this.isValid = this.rangeForm.valid;
+        if (this.searchOption === 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,
+                    firstValue: undefined,
+                    secondValue: undefined
                 }
-            });
+                : {
+                    operator: this.searchOption,
+                    firstValue: this.rangeForm.value.numberValueFrom,
+                    secondValue: this.rangeForm.value.numberValue
+                };
         }
         else {
-            this.autocompleteRes = [];
+            this.value = !this.isValid
+                ? {
+                    operator: this.searchOption,
+                    firstValue: undefined,
+                    secondValue: undefined
+                }
+                : {
+                    operator: this.searchOption,
+                    firstValue: this.rangeForm.value.numberValue,
+                    secondValue: undefined
+                };
         }
+        this.propagateChange(this.value);
     }
     // 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;
-            this.propagate();
+        let err;
+        if (this.searchOption === Operator.EQUAL) {
+            err = { number: { valid: false } };
         }
-    }
-    // handle selection changes to the model
-    onSelect() {
-        if (this.multiselect) {
-            this.value = this.innerValue.map((v) => v.id);
+        else if (this.searchOption === 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 {
-            // 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].id;
-        }
-        this.propagate();
-    }
-    // handle selection changes to the model
-    onUnselect(value) {
-        this.innerValue = this.innerValue.filter((v) => v.id !== value.id);
-        const _value = this.innerValue.map((v) => v.id);
-        this.value = this.multiselect ? _value : null;
-        if (!this.multiselect) {
-            this.clearInnerInput();
+            err = { numberrange: { valid: false } };
         }
-        this.propagate();
-    }
-    onAutoCompleteBlur() {
-        this.clearInnerInput();
-    }
-    clearInnerInput() {
-        this.autoCompleteInput.clearInput();
+        return this.isValid ? null : err;
     }
-    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: [
+    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(() => OrganizationComponent),
+                useExisting: forwardRef(() => NumberRangeComponent),
                 multi: true
             },
             {
                 provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => OrganizationComponent),
+                useExisting: forwardRef(() => NumberRangeComponent),
                 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.title }}</span>\n  </ng-template>\n  \n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">{{ item.title }}</span>\n  </ng-template>\n</yvc-autocomplete>\n\n<yvc-icon\n  class=\"classify\"\n  [title]=\"'yuv.form.element.organization.classify.icon.title' | translate\"\n  [svg]=\"multiselect ? icons.organizationMulti : icons.organization\"\n  (click)=\"focusInput()\"\n></yvc-icon>\n", styles: [":host{display:flex;align-items:center}:host ::ng-deep .chip{--yvc-form-element-border-color: var(--text-color-hint)}: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: "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: i2$2.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 }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+        ], 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YvcAutocompleteModule, YvcIconModule, TranslateModule], providers: [
+            args: [{ selector: 'yuv-number-range', standalone: true, imports: [CommonModule, NumberComponent, YvcDropdownModule, FormsModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => OrganizationComponent),
+                            useExisting: forwardRef(() => NumberRangeComponent),
                             multi: true
                         },
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => OrganizationComponent),
+                            useExisting: forwardRef(() => NumberRangeComponent),
                             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.title }}</span>\n  </ng-template>\n  \n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">{{ item.title }}</span>\n  </ng-template>\n</yvc-autocomplete>\n\n<yvc-icon\n  class=\"classify\"\n  [title]=\"'yuv.form.element.organization.classify.icon.title' | translate\"\n  [svg]=\"multiselect ? icons.organizationMulti : icons.organization\"\n  (click)=\"focusInput()\"\n></yvc-icon>\n", styles: [":host{display:flex;align-items:center}:host ::ng-deep .chip{--yvc-form-element-border-color: var(--text-color-hint)}: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: [{
+                    ], 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: [{
                 type: Input
-            }], situation: [{
+            }], precision: [{
                 type: Input
-            }], multiselect: [{
+            }], grouping: [{
                 type: Input
-            }], classifications: [{
+            }], pattern: [{
                 type: Input
             }], readonly: [{
                 type: Input
-            }], autofocus: [{
-                type: Input
-            }], appendTo: [{
+            }], classifications: [{
                 type: Input
-            }], excludeMe: [{
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
                 type: Input
-            }], userSelect: [{
-                type: Output
             }] } });
 
 /**
- * Creates form input for strings. Based on the input values different kinds of inputs will be generated.
- *
+ * Creates form input for organisation values.
  * 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>
+ * [Screenshot](../assets/images/yuv-organization.gif)
  *
+ * @example
+ * <yuv-organization [multiselect]="true"></yuv-organization>
  */
-class StringComponent {
+class OrganizationComponent {
     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) || ''
+        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']
         };
-        // provides all css variables defined by |yuuvis/comonents
-        this.fe = true;
+        this.isValidInput = true;
+        this.value = null;
+        this._innerValue = [];
+        this.autocompleteRes = [];
+        this.filterRoles = [];
         /**
          * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
          */
@@ -1014,349 +1340,245 @@ class StringComponent {
          */
         this.readonly = false;
         /**
-         * Enable autofucus for the input (default: false)
+         * 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.
          */
         this.autofocus = false;
-        this.valid = false;
-        this.validationErrors = [];
-        this._classifications = [];
+        /**
+         * Will attch the overlay to this HTMLelement
+         */
+        this.appendTo = null;
+        /**
+         * Whether or not to exclude the current user from autocomplete result
+         */
+        this.excludeMe = 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 = (_) => { };
     }
-    /**
-     * 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 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;
+    }
     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
-                };
+        if (c?.length) {
+            const classifications = this.system.getClassifications(c);
+            if (classifications.has(Classification.STRING_ORGANIZATION)) {
+                const options = classifications.get(Classification.STRING_ORGANIZATION).options;
+                this.filterRoles = options;
             }
         }
+        else {
+            this.filterRoles = [];
+        }
     }
     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);
+        if (value) {
+            this.value = value;
+            this.resolveFn(value);
+        }
+        else {
+            this.value = null;
+            this.innerValue = [];
         }
-        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();
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    propagate() {
+        this.propagateChange(this.#getPropagateValue());
     }
-    onBlur() {
-        if (this.multiselect) {
-            // add on blur
-            this.value.push('');
-        }
-        if (this.trimValue()) {
-            this.propagate();
-        }
+    #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;
     }
-    /**
-     * 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;
+    focusInput() {
+        this.autoCompleteInput.focusInput();
     }
-    validateClassification(string, classification) {
-        if (this.situation === Situation.SEARCH) {
-            return true;
+    resolveFn(value) {
+        const obs = (value instanceof Array ? value : [value]).map((v) => {
+            const valueID = typeof v === 'string' ? v : v.id;
+            const match = this.innerValue.find((iv) => iv.user.id === valueID);
+            return match
+                ? of(match)
+                : this.userService.getUserById(valueID).pipe(map$1((res) => ({
+                    user: res,
+                    state: {}
+                })), catchError((e) => {
+                    const user = new YuvUser({
+                        id: typeof v === 'string' ? v : v.id
+                    });
+                    user.title = typeof v === 'string' ? v : v.title;
+                    return of({
+                        user,
+                        state: {
+                            notFound: e.status === 404
+                        },
+                        titleString: e.status === 404 ? this.translate.instant('yuv.form.element.organization.user.not-found') : undefined
+                    });
+                }));
+        });
+        return forkJoin(obs).subscribe((data) => {
+            this.innerValue = data;
+            // setTimeout(() => this.autoCompleteInput.cd.markForCheck());
+        });
+    }
+    autocompleteFn(query) {
+        if (query.length >= this.minLength) {
+            this.userService.queryUser(query, this.excludeMe, this.filterRoles).subscribe({
+                next: (users) => {
+                    this.autocompleteRes = users
+                        .filter((user) => !this.innerValue.some((value) => value.user.id === user.id))
+                        .map((user) => ({
+                        user: user,
+                        state: {}
+                    }));
+                    this.propagateValidity(this.autocompleteRes.length > 0);
+                },
+                error: () => {
+                    this.autocompleteRes = [];
+                    this.propagateValidity(this.autocompleteRes.length > 0);
+                }
+            });
         }
         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;
+            this.autocompleteRes = [];
         }
     }
-    /**
-     * returns null when valid else the validation object
-     */
+    // 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 }));
+        return this.isValidInput ? null : { empty: { valid: false } };
+    }
+    propagateValidity(valid = true) {
+        if (this.isValidInput !== valid) {
+            this.isValidInput = valid;
+            this.propagate();
+        }
+    }
+    // handle selection changes to the model
+    onSelect() {
+        if (this.multiselect) {
+            this.value = this.innerValue.map((v) => v.user.id);
         }
         else {
-            this.valid = true;
-            return null;
+            // 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();
     }
-    ngAfterViewInit() {
-        if (this.autofocus) {
-            if (!this.multiselect) {
-                const el = this.elementRef.nativeElement.querySelector(this.rows && this.rows > 1 ? 'textarea' : 'input');
-                if (el)
-                    el.focus();
-            }
+    // 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();
     }
-    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: [
+    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(() => StringComponent),
+                useExisting: forwardRef(() => OrganizationComponent),
                 multi: true
             },
             {
                 provide: NG_VALIDATORS,
-                useExisting: forwardRef(() => StringComponent),
+                useExisting: forwardRef(() => OrganizationComponent),
                 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$3.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"] }] }); }
+        ], 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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, YvcChipsModule, YvcIconModule, FormsModule], providers: [
+            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YvcAutocompleteModule, YvcIconModule, TranslateModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => StringComponent),
+                            useExisting: forwardRef(() => OrganizationComponent),
                             multi: true
                         },
                         {
                             provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => StringComponent),
+                            useExisting: forwardRef(() => OrganizationComponent),
                             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: [{
+                    ], 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.yvc-form-element']
-            }], multiselect: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }], classifications: [{
+                args: ['class.inputDisabled']
+            }], placeholder: [{
                 type: Input
             }], situation: [{
                 type: Input
-            }], regex: [{
-                type: Input
-            }], minLength: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
-
-/**
- * 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: [{
+            }], multiselect: [{
                 type: Input
-            }], tag: [{
+            }], classifications: [{
                 type: Input
-            }], description: [{
+            }], readonly: [{
                 type: Input
-            }], invalid: [{
+            }], autofocus: [{
                 type: Input
-            }], disabled: [{
+            }], appendTo: [{
                 type: Input
-            }], required: [{
+            }], excludeMe: [{
                 type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }], isInvalid: [{
-                type: HostBinding,
-                args: ['class.invalid']
-            }], isRequired: [{
-                type: HostBinding,
-                args: ['class.required']
+            }], userSelect: [{
+                type: Output
             }] } });
 
-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] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvFormsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        TranslateModule$1,
-                        ReactiveFormsModule,
-                        YvcFocusWithin,
-                        YvcAutocompleteModule,
-                        YvcDatepickerModule,
-                        FormsModule,
-                        YvcCheckboxModule,
-                        YvcIconModule,
-                        YvcChipsModule,
-                        YvcDropdownModule,
-                    ]
-                }]
-        }] });
-
 class DateRangePickerComponent {
     constructor() {
         this.#oRef = inject(YvcOverlayRef);
@@ -1409,7 +1631,7 @@ class RangeSelectDateComponent {
     #CUSTOM_OPTION;
     #customDateRange;
     constructor() {
-        this.translate = inject(TranslateService$1);
+        this.translate = inject(TranslateService);
         this.#overlay = inject(YvcOverlayService);
         this.#fb = inject(FormBuilder);
         this.#ANY_OPTION = 'any';
@@ -1569,7 +1791,7 @@ class RangeSelectFilesizeComponent {
     #fb;
     #ANY_OPTION;
     constructor() {
-        this.translate = inject(TranslateService);
+        this.translate = inject(TranslateService$1);
         this.#fb = inject(FormBuilder);
         this.#ANY_OPTION = 'any';
         this.options = signal([]);
@@ -1642,9 +1864,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], 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"] }]
         }], ctorParameters: () => [] });
 
+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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YuvFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule$1,
+                        ReactiveFormsModule,
+                        YvcFocusWithin,
+                        YvcAutocompleteModule,
+                        YvcDatepickerModule,
+                        FormsModule,
+                        YvcCheckboxModule,
+                        YvcIconModule,
+                        YvcChipsModule,
+                        YvcDropdownModule,
+                    ]
+                }]
+        }] });
+
+// 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, DatetimeComponent, DatetimeRangeComponent, FormInputComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, FormInputComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map