@yuuvis/client-framework 0.6.5

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

@@ -0,0 +1,1355 @@
+import * as i0 from '@angular/core';
+import { forwardRef, Component, Input, inject, input, EventEmitter, ViewChild, HostListener, HostBinding, Output, ElementRef, Renderer2, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, FormBuilder, Validators, NG_VALIDATORS, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import * as i1 from '@yuuvis/client-core';
+import { Classification, OperatorLabel, Operator, FileSizePipe, LocaleNumberPipe, Utils, SystemService, UserService, YuvUser, TranslateModule, ClassificationPrefix, Situation } from '@yuuvis/client-core';
+import * as i3 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$1 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 * as i3$1 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 { YvcChipsModule } from '@yuuvis/components/chips';
+import { FocusWithinDirective } from '@yuuvis/client-framework/common';
+import { YvcCheckboxModule } from '@yuuvis/components/checkbox';
+import { YvcFocusWithin } from '@yuuvis/components/common';
+
+/**
+ * Component rendering a simple catalog as form element.
+ * There are two ways how to use this component. One is to add options as an array
+ * of strings on your own, the second one is to apply a special classification.
+ *
+ * Classifications are used within form models and rendered as object forms. Elements
+ * with a classification of `catalog[Item1, Item2, Item3]` will use this component
+ * as well. So you may also choose to set a classification like this in order to
+ * apply your options.
+ *
+ * @example
+ * <!-- setting options as string array -->
+ * <yuv-catalog [options]="cities" [(ngModel)]="hometown"></yuv-catalog>
+ *
+ * <!-- setting options using a classification -->
+ * <yuv-catalog [classification]="'catalog[Berlin, Chicago, Paris]'" [(ngModel)]="hometown"></yuv-catalog>
+ */
+class CatalogComponent {
+    /**
+     * Array of selectable entries
+     */
+    set options(options) {
+        this._options = options && typeof options[0] === 'string' ? options.map((o) => ({ label: o, value: o })) : options || [];
+        this.filter = this.filter || this._options?.length > this.enableFilterWhenOptionsExceed;
+    }
+    /**
+     * Additional semantics for the form element.
+     */
+    set classifications(c) {
+        const ce = this.systemService.getClassifications(c).get(Classification.STRING_CATALOG);
+        if (ce && ce.options) {
+            this.options = ce.options;
+        }
+    }
+    constructor(systemService) {
+        this.systemService = systemService;
+        this._options = [];
+        this.getLabel = (value) => (this._options ? this._options.find((o) => o.value === value) || { label: value } : { label: value }).label;
+        /**
+         * Enable filtering of options
+         */
+        this.filter = false;
+        /**
+         * By default a filter panel will shown if the number of options exceeds 10 entries. You could
+         * change this number.
+         */
+        this.enableFilterWhenOptionsExceed = 10;
+        /**
+         * Indicator that multiple items could be selected
+         */
+        this.multiselect = false;
+        /**
+         * Will attch the overlay to this HTMLelement
+         */
+        this.appendTo = null;
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    writeValue(value) {
+        this.value = value === undefined ? null : value;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    onChange(value) {
+        this.value = value;
+        this.propagateChange(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogComponent, deps: [{ token: i1.SystemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { filter: "filter", situation: "situation", enableFilterWhenOptionsExceed: "enableFilterWhenOptionsExceed", options: "options", multiselect: "multiselect", classifications: "classifications", appendTo: "appendTo", readonly: "readonly" }, host: { classAttribute: "yuv-catalog" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CatalogComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<yvc-dropdown [multiple]=\"multiselect\" [options]=\"_options\" [(ngModel)]=\"value\" (ngModelChange)=\"onChange($event)\"  [filter]=\"filter\"\n  [disabled]=\"readonly\"></yvc-dropdown>\n", styles: [":host{display:block}:host ::ng-deep .p-checkbox{flex-shrink:0}:host ::ng-deep .p-multiselect-item{white-space:normal;min-width:33ch}:host ::ng-deep .p-overlay{max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i3.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-catalog', standalone: true, imports: [FormsModule, YvcDropdownModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CatalogComponent),
+                            multi: true
+                        }
+                    ], host: { class: 'yuv-catalog' }, template: "<yvc-dropdown [multiple]=\"multiselect\" [options]=\"_options\" [(ngModel)]=\"value\" (ngModelChange)=\"onChange($event)\"  [filter]=\"filter\"\n  [disabled]=\"readonly\"></yvc-dropdown>\n", styles: [":host{display:block}:host ::ng-deep .p-checkbox{flex-shrink:0}:host ::ng-deep .p-multiselect-item{white-space:normal;min-width:33ch}:host ::ng-deep .p-overlay{max-width:300px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.SystemService }], propDecorators: { filter: [{
+                type: Input
+            }], situation: [{
+                type: Input
+            }], enableFilterWhenOptionsExceed: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], classifications: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
+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));
+    }
+    _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$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;
+        /**
+         * 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._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" }, 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;align-items:center}: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: i3.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;align-items:center}: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
+            }] } });
+
+/**
+ * Creates form input for number values.
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms.
+ *
+ * @example
+ * <yuv-number [scale]="2"></yuv-number>
+ *
+ */
+class NumberComponent {
+    /**
+     * Number of decimal places
+     */
+    set scale(val) {
+        this._scale = Math.min(val || 0, 30);
+    }
+    get scale() {
+        return this._scale;
+    }
+    /**
+     * Overall amount of digits allowed (including decimal places)
+     */
+    set precision(val) {
+        this._precision = Math.min(val || 100, 100);
+    }
+    get precision() {
+        return this._precision;
+    }
+    /**
+     *  Set to true to group number by pattern
+     */
+    set grouping(val) {
+        this._grouping = val ?? true;
+    }
+    get grouping() {
+        return this._grouping;
+    }
+    /**
+     * The pattern to group number value by
+     */
+    set groupPattern(val) {
+        this._pattern = val;
+    }
+    get groupPattern() {
+        return this._pattern;
+    }
+    /**
+     * classification property adds some semantics to the value of this component.
+     * If you provide a value of `filesize` numbers typed into the control will be
+     * handled like file sizes (calculates differnt units)
+     */
+    set classifications(classifications) {
+        this.numberPipe =
+            classifications && classifications.includes(Classification.NUMBER_FILESIZE) ? new FileSizePipe(this.translate) : new LocaleNumberPipe(this.translate);
+    }
+    static betweenTwoNumbers(val, minVal, maxVal) {
+        const min = !Utils.isEmpty(minVal) ? minVal : -Infinity;
+        const max = !Utils.isEmpty(maxVal) ? maxVal : Infinity;
+        return val >= min && val <= max;
+    }
+    constructor(translate) {
+        this.translate = translate;
+        this.innerValue = null;
+        this._grouping = false;
+        this.validationErrors = [];
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = false;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this.numberPipe = new LocaleNumberPipe(this.translate);
+    }
+    writeValue(value) {
+        this.value = value != null ? value : null;
+        this.innerValue = value != null ? this.numberPipe.numberToString(value, this.grouping, this.groupPattern, this.scale) : null;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    onValueChange(evt) {
+        this.validationErrors = [];
+        if (Utils.isEmpty(evt)) {
+            this.value = undefined;
+            this.propagateChange(this.value);
+            return;
+        }
+        // validate input
+        const val = this.numberPipe.stringToNumber(evt);
+        // general number validation
+        if (isNaN(val) || typeof val !== 'number') {
+            this.validationErrors.push({ key: 'number' });
+        }
+        else {
+            const split = evt.replaceAll(this.numberPipe.separator, '').split(this.numberPipe.decimalSeparator);
+            // check precision
+            if (this.precision !== undefined) {
+                const prePointDigits = this.precision - (this.scale || 0);
+                if (split[0]?.length > prePointDigits) {
+                    this.validationErrors.push({ key: 'precision', params: { prePointDigits } });
+                }
+            }
+            // check scale
+            if (this.scale && split[1]?.length > this.scale) {
+                this.validationErrors.push({ key: 'scale', params: { scale: this.scale } });
+            }
+            // min max
+            if (!NumberComponent.betweenTwoNumbers(val, this.minValue, this.maxValue)) {
+                if (Utils.isEmpty(this.minValue)) {
+                    this.validationErrors.push({ key: 'maxvalue', params: { maxValue: this.maxValue } });
+                }
+                else if (Utils.isEmpty(this.maxValue)) {
+                    this.validationErrors.push({ key: 'minvalue', params: { minValue: this.minValue } });
+                }
+                else {
+                    this.validationErrors.push({ key: 'minmax', params: { minValue: this.minValue, maxValue: this.maxValue } });
+                }
+            }
+            if (!this.validationErrors.length) {
+                this.value = val;
+            }
+        }
+        this.propagateChange(this.value);
+    }
+    // called when the input looses focus
+    format() {
+        if (!this.readonly && typeof this.value === 'number' && this.validationErrors.length === 0) {
+            this.innerValue = this.numberPipe.numberToString(this.value, this.grouping, this.groupPattern, this.scale);
+        }
+    }
+    // called when the input get focus
+    unformat() {
+        if (!this.readonly && typeof this.value === 'number' && this.validationErrors.length === 0) {
+            this.innerValue = this.numberPipe.transform(this.value, false);
+        }
+    }
+    // returns null when valid else the validation object
+    validate() {
+        return this.validationErrors.length ? Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err })) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumberComponent, isStandalone: true, selector: "yuv-number", inputs: { scale: "scale", precision: "precision", grouping: "grouping", groupPattern: "groupPattern", readonly: "readonly", minValue: "minValue", maxValue: "maxValue", classifications: "classifications" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumberComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => NumberComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<input type=\"string\" [(ngModel)]=\"innerValue\" (focus)=\"unformat()\" (blur)=\"format()\" class=\"input-number\"\n  [readonly]=\"readonly\" (ngModelChange)=\"onValueChange($event)\" />\n", styles: [":host{display:block}:host input{width:100%;border:0;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-number', standalone: true, imports: [FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => NumberComponent),
+                            multi: true
+                        }
+                    ], template: "<input type=\"string\" [(ngModel)]=\"innerValue\" (focus)=\"unformat()\" (blur)=\"format()\" class=\"input-number\"\n  [readonly]=\"readonly\" (ngModelChange)=\"onValueChange($event)\" />\n", styles: [":host{display:block}:host input{width:100%;border:0;background-color:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { scale: [{
+                type: Input
+            }], precision: [{
+                type: Input
+            }], grouping: [{
+                type: Input
+            }], groupPattern: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], classifications: [{
+                type: Input
+            }] } });
+
+/**
+ * Creates form input for 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() {
+        /**
+         *  Set to true to group number by pattern
+         */
+        this.grouping = 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)
+         */
+        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 = (_) => { };
+        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
+                });
+            }
+        }
+        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() {
+        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.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() {
+        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 } };
+        }
+        else {
+            err = { numberrange: { valid: false } };
+        }
+        return this.isValid ? null : err;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NumberRangeComponent, isStandalone: true, selector: "yuv-number-range", inputs: { scale: "scale", precision: "precision", grouping: "grouping", pattern: "pattern", readonly: "readonly", classifications: "classifications", minValue: "minValue", maxValue: "maxValue" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumberRangeComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => NumberRangeComponent),
+                multi: true
+            }
+        ], 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{display:block}:host>form{display:flex;align-items:center}:host>form yuv-number{flex:1 1 auto}:host>form yuv-number.first ::ng-deep .input-number{text-align:right}: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: i3.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: NumberRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-number-range', standalone: true, imports: [CommonModule, NumberComponent, YvcDropdownModule, FormsModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberRangeComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => NumberRangeComponent),
+                            multi: true
+                        }
+                    ], template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if(searchOption === 'gtelte'){\n  <yuv-number\n    class=\"first\"\n    [readonly]=\"readonly\"\n    [scale]=\"scale\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValueFrom\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  ></yuv-number>}\n\n  <yvc-dropdown\n    class=\"no-trigger\"\n    [(ngModel)]=\"searchOption\"\n    (ngModelChange)=\"onValueChange()\"\n    [disabled]=\"readonly\"\n    [disableClearButton]=\"true\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [options]=\"availableSearchOptions\"\n  ></yvc-dropdown>\n\n  <yuv-number\n    [scale]=\"scale\"\n    [readonly]=\"readonly\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host{display:block}:host>form{display:flex;align-items:center}:host>form yuv-number{flex:1 1 auto}:host>form yuv-number.first ::ng-deep .input-number{text-align:right}: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: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], classifications: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                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 {
+    constructor() {
+        this.system = inject(SystemService);
+        this.userService = inject(UserService);
+        this.minLength = 2;
+        this.icons = {
+            organizationMulti: YUV_ICONS['group'],
+            organization: YUV_ICONS['user']
+        };
+        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).
+         */
+        this.multiselect = 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
+         */
+        this.withMetadata = input(false);
+        this.userSelect = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        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;
+    }
+    writeValue(value) {
+        if (value) {
+            this.value = value;
+            this.resolveFn(value);
+        }
+        else {
+            this.value = null;
+            this.innerValue = [];
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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);
+                }
+            });
+        }
+        else {
+            this.autocompleteRes = [];
+        }
+    }
+    // returns null when valid else the validation object
+    validate() {
+        return this.isValidInput ? null : { empty: { valid: false } };
+    }
+    propagateValidity(valid = true) {
+        if (this.isValidInput !== valid) {
+            this.isValidInput = valid;
+            this.propagate();
+        }
+    }
+    // handle selection changes to the model
+    onSelect() {
+        if (this.multiselect) {
+            this.value = this.innerValue.map((v) => v.id);
+        }
+        else {
+            // internal autocomplete control is always set to multiselect
+            // so the resolved value is always an array
+            this.innerValue = this.innerValue.slice(-1);
+            this.value = this.innerValue[0].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();
+        }
+        this.propagate();
+    }
+    onAutoCompleteBlur() {
+        this.clearInnerInput();
+    }
+    clearInnerInput() {
+        this.autoCompleteInput.clearInput();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: false, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: false, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userSelect: "userSelect" }, host: { listeners: { "keydown.enter": "onKeydownHandler($event)" }, properties: { "class.inputDisabled": "this._inputDisabled" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OrganizationComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => OrganizationComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "autoCompleteInput", first: true, predicate: ["autocomplete"], descendants: true }], ngImport: i0, template: "<yvc-autocomplete\n  [(ngModel)]=\"innerValue\"\n  #autocomplete\n  (suggestionSelect)=\"onSelect()\"\n  [placeholder]=\"placeholder\"\n  (suggestionUnselect)=\"onUnselect($event)\"\n  (blur)=\"onAutoCompleteBlur()\"\n  [disabled]=\"readonly\"\n  [autocompleteValues]=\"autocompleteRes\"\n  field=\"id\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #autocompleteOptionTemplate let-item>\n    <span class=\"chip\">{{ item.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$1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YvcAutocompleteModule, YvcIconModule, TranslateModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OrganizationComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => OrganizationComponent),
+                            multi: true
+                        }
+                    ], template: "<yvc-autocomplete\n  [(ngModel)]=\"innerValue\"\n  #autocomplete\n  (suggestionSelect)=\"onSelect()\"\n  [placeholder]=\"placeholder\"\n  (suggestionUnselect)=\"onUnselect($event)\"\n  (blur)=\"onAutoCompleteBlur()\"\n  [disabled]=\"readonly\"\n  [autocompleteValues]=\"autocompleteRes\"\n  field=\"id\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #autocompleteOptionTemplate let-item>\n    <span class=\"chip\">{{ item.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: [{
+                type: Input
+            }], situation: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], classifications: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], excludeMe: [{
+                type: Input
+            }], userSelect: [{
+                type: Output
+            }] } });
+
+/**
+ * Creates form input for strings. Based on the input values different kinds of inputs will be generated.
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms.
+ *
+ * @example
+ * <!-- string input validating input to be between 5 and 10 characters -->
+ * <yuv-string [minLength]="5" [maxLength]="10"></yuv-string>
+ *
+ * <!-- string input that only allow digits -->
+ * <yuv-string  [regex]="[0-9]*"></yuv-string>
+ *
+ * <!-- string input rendering a large textarea -->
+ * <yuv-string [rows]="10"></yuv-string>
+ *
+ */
+class StringComponent {
+    constructor() {
+        this.iconsService = inject(IconService);
+        this.elementRef = inject(ElementRef);
+        this.classifiytionIcons = {
+            email: this.iconsService.getIcon(ClassificationPrefix.EMAIL_ICON) || '',
+            url: this.iconsService.getIcon(ClassificationPrefix.URL_ICON) || '',
+            phone: this.iconsService.getIcon(ClassificationPrefix.PHONE_ICON) || ''
+        };
+        // provides all css variables defined by |yuuvis/comonents
+        this.fe = true;
+        /**
+         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
+         */
+        this.multiselect = false;
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = false;
+        /**
+         * Enable autofucus for the input (default: false)
+         */
+        this.autofocus = false;
+        this.valid = false;
+        this.validationErrors = [];
+        this._classifications = [];
+        this.propagateChange = (_) => { };
+    }
+    /**
+     * Additional semantics for the form element. Possible values are
+     * `email` (validates and creates a link to send an email once there
+     * is a valid email address) and `url` (validates and creates a link
+     * to an URL typed into the form element).
+     */
+    set classifications(c) {
+        this._classifications = c;
+        if (c && c.length) {
+            if (c.includes(Classification.STRING_EMAIL)) {
+                this.classify = {
+                    hrefPrefix: ClassificationPrefix.EMAIL,
+                    icon: this.classifiytionIcons.email
+                };
+            }
+            else if (c.includes(Classification.STRING_URL)) {
+                this.classify = {
+                    hrefPrefix: ClassificationPrefix.URL,
+                    icon: this.classifiytionIcons.url
+                };
+            }
+            else if (c.includes(Classification.STRING_PHONE)) {
+                this.classify = {
+                    hrefPrefix: ClassificationPrefix.PHONE,
+                    icon: this.classifiytionIcons.phone
+                };
+            }
+        }
+    }
+    get classifications() {
+        return this._classifications;
+    }
+    propagate() {
+        this.propagateChange(this.value);
+    }
+    writeValue(value) {
+        this.formatedValue = Utils.formatMailTo(value, this.classify?.hrefPrefix === ClassificationPrefix.EMAIL);
+        this.value = value || null;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched() { }
+    onValueChange(val) {
+        this.maxEntryCountIfInvalid = undefined;
+        this.validationErrors = [];
+        if (Utils.isEmpty(val)) {
+            this.value = null;
+            this.propagate();
+            return;
+        }
+        const multiCheck = (check) => !!(this.multiselect ? val : [val]).find((v) => check(v));
+        // validate regular expression
+        if (this.regex && multiCheck((v) => !RegExp(this.regex).test(v))) {
+            this.validationErrors.push({ key: 'regex' });
+        }
+        // validate classification settings
+        if (this.classifications && this.classifications.length) {
+            this.classifications.forEach((c) => {
+                if (multiCheck((v) => !this.validateClassification(v, c))) {
+                    this.validationErrors.push({ key: 'classification' + c });
+                }
+            });
+        }
+        // validate min length
+        if (!Utils.isEmpty(this.minLength) && multiCheck((v) => v.length < this.minLength)) {
+            this.validationErrors.push({ key: 'minlength', params: { minLength: this.minLength } });
+        }
+        // validate max length
+        if (!Utils.isEmpty(this.maxLength) && multiCheck((v) => v.length > this.maxLength)) {
+            this.validationErrors.push({ key: 'maxlength', params: { maxLength: this.maxLength } });
+        }
+        // validate invalid if only whitespaces
+        if (multiCheck((v) => v.length > 0 && !v.trim().length)) {
+            this.validationErrors.push({ key: 'onlyWhitespaces' });
+        }
+        if (this.validationErrors.length && this.multiselect && this.value) {
+            // Setting maxEntryCountIfInvalid to the actual length of the value array to prevent the user to add more entries.
+            this.maxEntryCountIfInvalid = this.value.length;
+        }
+        this.formatedValue = Utils.formatMailTo(val, this.classify?.hrefPrefix === ClassificationPrefix.EMAIL);
+        this.propagate();
+    }
+    onBlur() {
+        if (this.trimValue()) {
+            this.propagate();
+        }
+    }
+    /**
+     * Trims the current value and returns wether or not it has been trimmed
+     */
+    trimValue() {
+        if (this.value) {
+            if (this.multiselect) {
+                const lengthBefore = this.value.join('').length;
+                this.value = this.value.map((v) => v.trim());
+                return this.value.join('').length !== lengthBefore;
+            }
+            else {
+                const lengthBefore = this.value.length;
+                this.value = this.value.trim();
+                return this.value.length !== lengthBefore;
+            }
+        }
+        return false;
+    }
+    validateClassification(string, classification) {
+        if (this.situation === Situation.SEARCH) {
+            return true;
+        }
+        else {
+            let pattern;
+            if (classification === Classification.STRING_EMAIL) {
+                pattern =
+                    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+            }
+            else if (classification === Classification.STRING_URL) {
+                pattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)?([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
+            }
+            else if (classification === Classification.STRING_PHONE) {
+                pattern = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-x\s\./0-9]*$/g;
+            }
+            return pattern ? pattern.test(string) : true;
+        }
+    }
+    /**
+     * returns null when valid else the validation object
+     */
+    validate() {
+        if (this.validationErrors.length) {
+            this.valid = false;
+            return Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
+        }
+        else {
+            this.valid = true;
+            return null;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.autofocus) {
+            if (!this.multiselect) {
+                const el = this.elementRef.nativeElement.querySelector(this.rows && this.rows > 1 ? 'textarea' : 'input');
+                if (el)
+                    el.focus();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, host: { properties: { "class.yvc-form-element": "this.fe" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StringComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => StringComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [(ngModel)]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n}\n@else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <yvc-chips\n    [(ngModel)]=\"value\"\n    [disabled]=\"readonly\"\n    [max]=\"maxEntryCountIfInvalid\"\n    (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{font-family:Roboto;display:flex;flex-flow:row nowrap;align-items:center}:host .p-autocomplete-token-label{display:flex;align-items:center;-webkit-user-select:text;user-select:text}:host .p-autocomplete-token-label .label{padding:0 calc(var(--app-pane-padding) / 4);word-break:break-word}: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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: YvcChipsModule }, { kind: "component", type: i2$3.Chips, selector: "yvc-chips", inputs: ["field", "placeholder", "max", "disabled"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i3$1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, YvcChipsModule, YvcIconModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StringComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => StringComponent),
+                            multi: true
+                        }
+                    ], template: "@if ((!rows || rows <= 1) && !multiselect) {\n  <input type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly\" [(ngModel)]=\"value\" (ngModelChange)=\"onValueChange($event)\" />\n}\n@else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <yvc-chips\n    [(ngModel)]=\"value\"\n    [disabled]=\"readonly\"\n    [max]=\"maxEntryCountIfInvalid\"\n    (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{font-family:Roboto;display:flex;flex-flow:row nowrap;align-items:center}:host .p-autocomplete-token-label{display:flex;align-items:center;-webkit-user-select:text;user-select:text}:host .p-autocomplete-token-label .label{padding:0 calc(var(--app-pane-padding) / 4);word-break:break-word}:host .classify{color:var(--text-color-hint)}:host .classify a{color:var(--text-color-hint);display:block;border-radius:2px}:host .classify a:hover,:host .classify a:focus{background-color:var(--color-accent);color:#fff}:host .classify yvc-icon{width:18px;height:18px;padding:calc(var(--app-pane-padding) / 8)}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;color:var(--text-color-body);border:1px solid var(--yvc-form-element-border-color)}:host yvc-chips{width:100%}:host input{color:var(--text-color-body);padding:0;border:1px solid var(--yvc-form-element-border-color);display:flex;flex-wrap:wrap;align-items:center;width:100%;background:transparent}\n"] }]
+        }], propDecorators: { fe: [{
+                type: HostBinding,
+                args: ['class.yvc-form-element']
+            }], multiselect: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], classifications: [{
+                type: Input
+            }], situation: [{
+                type: Input
+            }], regex: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }] } });
+
+/**
+ * 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']
+            }] } });
+
+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,
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CatalogComponent, DatetimeComponent, DatetimeRangeComponent, FormInputComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, StringComponent, YuvFormsModule };
+//# sourceMappingURL=yuuvis-client-framework-forms.mjs.map