@yuuvis/client-framework 0.7.3 → 0.8.0

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

@@ -1,20 +1,20 @@
 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 { forwardRef, Component, Input, inject, input, EventEmitter, ViewChild, HostListener, HostBinding, Output, ElementRef, Renderer2, ViewEncapsulation, NgModule, output, effect, signal } 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 { Classification, OperatorLabel, Operator, Situation, FileSizePipe, LocaleNumberPipe, Utils, SystemService, UserService, YuvUser, TranslateModule, ClassificationPrefix, TranslateService as TranslateService$1, 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$1 from '@angular/common';
+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 * as i3$1 from '@yuuvis/components/icon';
+import * as i3 from '@yuuvis/components/icon';
 import { YvcIconModule } from '@yuuvis/components/icon';
 import { of, forkJoin } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -23,6 +23,9 @@ 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import { YvcOverlayRef, YvcOverlayService } from '@yuuvis/components/overlay';
 
 /**
  * Component rendering a simple catalog as form element.
@@ -105,7 +108,7 @@ class CatalogComponent {
                 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"] }] }); }
+        ], ngImport: i0, template: "<yvc-dropdown [multiple]=\"multiselect\" [options]=\"_options\" [(ngModel)]=\"value\" (ngModelChange)=\"onChange($event)\"  [filter]=\"filter\"\n  [disabled]=\"readonly\"></yvc-dropdown>\n", styles: [":host{display:block}:host ::ng-deep .p-checkbox{flex-shrink:0}:host ::ng-deep .p-multiselect-item{white-space:normal;min-width:33ch}:host ::ng-deep .p-overlay{max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogComponent, decorators: [{
             type: Component,
@@ -265,36 +268,34 @@ class DatetimeRangeComponent {
             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
-                        };
+                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.value = !this._isValid
+                ? // {
+                    //   operator: this.searchOption,
+                    //   firstValue: undefined,
+                    //   secondValue: undefined
+                    // }
+                    undefined
+                : {
+                    operator: this.searchOption,
+                    firstValue: dateValue,
+                    secondValue: undefined
+                };
         }
         this.propagateChange(this.value);
     }
@@ -325,13 +326,13 @@ class DatetimeRangeComponent {
                 };
             }
         }
-        return this._isValid ? null : err;
+        return this.situation === Situation.SEARCH || this._isValid ? null : err;
     }
     ngOnInit() {
         this.rangeForm.valueChanges.subscribe(() => this.onValueChange());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DatetimeRangeComponent, isStandalone: true, selector: "yuv-datetime-range", inputs: { withTime: "withTime", readonly: "readonly", operator: "operator" }, providers: [
+    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),
@@ -342,7 +343,7 @@ class DatetimeRangeComponent {
                 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"] }] }); }
+        ], 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,
@@ -357,13 +358,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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"] }]
+                    ], 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
             }] } });
 
 /**
@@ -520,7 +523,7 @@ class NumberComponent {
                 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"] }] }); }
+        ], ngImport: i0, template: "<input type=\"string\" [(ngModel)]=\"innerValue\" (focus)=\"unformat()\" (blur)=\"format()\" class=\"input-number\"\n  [readonly]=\"readonly\" (ngModelChange)=\"onValueChange($event)\" />\n", styles: [":host{display:flex}:host input{width:100%;border:0;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
@@ -535,7 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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"] }]
+                    ], template: "<input type=\"string\" [(ngModel)]=\"innerValue\" (focus)=\"unformat()\" (blur)=\"format()\" class=\"input-number\"\n  [readonly]=\"readonly\" (ngModelChange)=\"onValueChange($event)\" />\n", styles: [":host{display:flex}:host input{width:100%;border:0;background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { scale: [{
                 type: Input
             }], precision: [{
@@ -687,7 +690,7 @@ class NumberRangeComponent {
                 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"] }] }); }
+        ], 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: NumberRangeComponent, decorators: [{
             type: Component,
@@ -702,7 +705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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"] }]
+                    ], 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: [{
@@ -930,7 +933,7 @@ class OrganizationComponent {
                 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" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
@@ -1055,6 +1058,9 @@ class StringComponent {
         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;
     }
@@ -1103,6 +1109,10 @@ class StringComponent {
         this.propagate();
     }
     onBlur() {
+        if (this.multiselect) {
+            // add on blur
+            this.value.push('');
+        }
         if (this.trimValue()) {
             this.propagate();
         }
@@ -1178,7 +1188,7 @@ class StringComponent {
                 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"] }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StringComponent, decorators: [{
             type: Component,
@@ -1193,7 +1203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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"] }]
+                    ], 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']
@@ -1347,9 +1357,294 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class DateRangePickerComponent {
+    constructor() {
+        this.#oRef = inject(YvcOverlayRef);
+        this.#fb = inject(FormBuilder);
+        this.form = this.#fb.group({
+            range: this.#fb.control(this.#oRef.data.range, Validators.required)
+        });
+        this.range = input(this.#oRef.data.range);
+        this.rangeChange = output();
+        this.#rangeEffect = effect(() => {
+            const range = this.range();
+            this.form.patchValue({ range });
+        });
+    }
+    #oRef;
+    #fb;
+    #rangeEffect;
+    apply() {
+        this.rangeChange.emit(this.form.value.range || undefined);
+        this.#oRef?.close(this.form.value.range);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DateRangePickerComponent, isStandalone: true, selector: "yuv-date-range-picker", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n  <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n  <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n  <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host{--form-element-border-color: transparent;--yvc-form-element-border-color: transparent}:host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--app-pane-padding);padding:var(--app-pane-padding)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--text-color-hint);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator", "situation"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-date-range-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule, DatetimeRangeComponent], template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n  <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n  <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n  <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host{--form-element-border-color: transparent;--yvc-form-element-border-color: transparent}:host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--app-pane-padding);padding:var(--app-pane-padding)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--text-color-hint);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"] }]
+        }] });
+
+// marker for extracting translations for the available date range options
+marker('yuv.form.element.range-select-date.option.any');
+marker('yuv.form.element.range-select-date.option.today');
+marker('yuv.form.element.range-select-date.option.yesterday');
+marker('yuv.form.element.range-select-date.option.thisWeek');
+marker('yuv.form.element.range-select-date.option.lastWeek');
+marker('yuv.form.element.range-select-date.option.thisMonth');
+marker('yuv.form.element.range-select-date.option.lastMonth');
+marker('yuv.form.element.range-select-date.option.thisYear');
+marker('yuv.form.element.range-select-date.option.lastYear');
+marker('yuv.form.element.range-select-date.option.custom');
+/**
+ * Component for selecting a date range based on pre-defined ranges like
+ * 'today', 'this week', 'this month', etc.
+ * It also allows to pick a custom date range.
+ */
+class RangeSelectDateComponent {
+    #overlay;
+    #fb;
+    #ANY_OPTION;
+    #CUSTOM_OPTION;
+    #customDateRange;
+    constructor() {
+        this.translate = inject(TranslateService$1);
+        this.#overlay = inject(YvcOverlayService);
+        this.#fb = inject(FormBuilder);
+        this.#ANY_OPTION = 'any';
+        this.#CUSTOM_OPTION = 'custom';
+        this.dateOptions = signal([]);
+        this.innerForm = this.#fb.nonNullable.group({
+            range: [this.#ANY_OPTION]
+        });
+        /**
+         * Range values to be used in the dropdown.
+         */
+        this.ranges = input(['today', 'yesterday', 'thisWeek', 'thisMonth', 'thisYear']);
+        /**
+         * Whether to show the custom date range option.
+         */
+        this.customRange = input(true);
+        // ControlValueAccessor implementation
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe((_) => this.#setupOptions());
+        this.#setupOptions();
+        this.innerForm.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.#onFormValueChange(v));
+    }
+    #onFormValueChange(v) {
+        if (v.range === this.#CUSTOM_OPTION) {
+            if (!this.#customDateRange || this.dateOptions().find((o) => o.value === this.#CUSTOM_OPTION)?.label === this.#customDateRangeToString())
+                this.#openCustomRangeDialog();
+            else
+                this.propagateChange({
+                    rangeValue: this.#customDateRange,
+                    label: this.#customDateRangeToString()
+                });
+        }
+        else {
+            const { start, end } = SearchUtils.dateRangeStartEnd(v.range);
+            this.propagateChange(v.range !== this.#ANY_OPTION
+                ? {
+                    rangeValue: { operator: Operator.INTERVAL_INCLUDE_BOTH, firstValue: start, secondValue: end },
+                    label: this.translate.instant(`yuv.form.element.range-select-date.option.${v.range}`)
+                }
+                : undefined);
+            this.#customDateRange = undefined;
+            this.#setupOptions();
+        }
+    }
+    #openCustomRangeDialog() {
+        // open date range picker
+        const o = this.#overlay.open(DateRangePickerComponent, {
+            range: this.#customDateRange
+        });
+        o.afterClosed$.subscribe((res) => {
+            this.#customDateRange = res.data;
+            if (!res.data) {
+                this.innerForm.patchValue({ range: this.#ANY_OPTION });
+                this.#setupOptions();
+            }
+            else {
+                this.#onFormValueChange(this.innerForm.value);
+                this.#setupOptions(this.#customDateRangeToString());
+                setTimeout(() => {
+                    this.innerForm.patchValue({ range: this.#CUSTOM_OPTION }, {
+                        emitEvent: false
+                    });
+                });
+            }
+        });
+    }
+    #setupOptions(custom) {
+        const options = this.ranges().map((value) => ({
+            label: this.translate.instant(`yuv.form.element.range-select-date.option.${value}`),
+            value
+        }));
+        if (this.customRange())
+            options.push({
+                label: custom || this.translate.instant('yuv.form.element.range-select-date.option.custom'),
+                value: this.#CUSTOM_OPTION
+            });
+        this.dateOptions.set([
+            {
+                label: this.translate.instant('yuv.form.element.range-select-date.option.any'),
+                value: this.#ANY_OPTION
+            },
+            ...options
+        ]);
+    }
+    #customDateRangeToString() {
+        if (!this.#customDateRange)
+            return undefined;
+        const dp = new LocaleDatePipe(this.translate);
+        switch (this.#customDateRange.operator) {
+            case Operator.EQUAL: {
+                return dp.transform(this.#customDateRange.firstValue, 'shortDate');
+            }
+            case Operator.GREATER_OR_EQUAL: {
+                return `${OperatorLabel.GREATER_OR_EQUAL} ${dp.transform(this.#customDateRange.firstValue, 'shortDate')}`;
+            }
+            case Operator.LESS_OR_EQUAL: {
+                return `${OperatorLabel.LESS_OR_EQUAL} ${dp.transform(this.#customDateRange.firstValue, 'shortDate')}`;
+            }
+            case Operator.INTERVAL_INCLUDE_BOTH: {
+                return `${dp.transform(this.#customDateRange.firstValue, 'shortDate')} ${OperatorLabel.INTERVAL_INCLUDE_BOTH} ${dp.transform(this.#customDateRange.secondValue, 'shortDate')}`;
+            }
+        }
+        return undefined;
+    }
+    writeValue(value) {
+        if (value?.rangeValue?.operator && value?.rangeValue?.firstValue) {
+            const dr = SearchUtils.getMatchingDateRange(value.rangeValue);
+            if (dr) {
+                this.innerForm.patchValue({ range: dr });
+            }
+            else {
+                this.#customDateRange = value.rangeValue;
+                this.innerForm.patchValue({ range: this.#CUSTOM_OPTION });
+            }
+        }
+        else {
+            this.innerForm.patchValue({ range: this.#ANY_OPTION });
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: RangeSelectDateComponent, isStandalone: true, selector: "yuv-range-select-date", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, customRange: { classPropertyName: "customRange", publicName: "customRange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RangeSelectDateComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"dateOptions()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-range-select-date', standalone: true, imports: [CommonModule, YvcDropdownModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RangeSelectDateComponent),
+                            multi: true
+                        }
+                    ], template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"dateOptions()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"] }]
+        }], ctorParameters: () => [] });
+
+// marker for extracting translations for the available filesize range options
+marker('yuv.form.element.range-select-filesize.option.any');
+marker('yuv.form.element.range-select-filesize.option.small');
+marker('yuv.form.element.range-select-filesize.option.medium');
+marker('yuv.form.element.range-select-filesize.option.large');
+marker('yuv.form.element.range-select-filesize.option.verylarge');
+/**
+ * Component for selecting a range of filesizes based on pre-defined ranges like
+ * 'today', 'this week', 'this month', etc.
+ */
+class RangeSelectFilesizeComponent {
+    #fb;
+    #ANY_OPTION;
+    constructor() {
+        this.translate = inject(TranslateService);
+        this.#fb = inject(FormBuilder);
+        this.#ANY_OPTION = 'any';
+        this.options = signal([]);
+        this.innerForm = this.#fb.nonNullable.group({
+            range: [this.#ANY_OPTION]
+        });
+        /**
+         * Range values to be used in the dropdown.
+         */
+        this.ranges = input(['small', 'medium', 'large', 'verylarge']);
+        // ControlValueAccessor implementation
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe((_) => this.#setupOptions());
+        this.#setupOptions();
+        this.innerForm.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.#onFormValueChange(v));
+    }
+    #onFormValueChange(v) {
+        const rangeValue = v.range !== this.#ANY_OPTION ? SearchUtils.filesizeRangeToRangeValue(v.range) : undefined;
+        const res = rangeValue && {
+            rangeValue,
+            label: this.translate.instant(`yuv.form.element.range-select-filesize.option.${v.range}`)
+        };
+        this.propagateChange(res);
+    }
+    #setupOptions() {
+        const options = this.ranges().map((value) => ({
+            label: this.translate.instant(`yuv.form.element.range-select-filesize.option.${value}`),
+            value
+        }));
+        this.options.set([
+            {
+                label: this.translate.instant('yuv.form.element.range-select-filesize.option.any'),
+                value: this.#ANY_OPTION
+            },
+            ...options
+        ]);
+    }
+    writeValue(value) {
+        const patch = { range: this.#ANY_OPTION };
+        if (value?.rangeValue?.operator && value?.rangeValue?.firstValue) {
+            const range = SearchUtils.getMatchingFilesizeRange(value.rangeValue);
+            if (range)
+                patch.range = range;
+        }
+        this.innerForm.patchValue(patch);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectFilesizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: RangeSelectFilesizeComponent, isStandalone: true, selector: "yuv-range-select-filesize", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RangeSelectFilesizeComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"options()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>\n", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcDropdownModule }, { kind: "component", type: i1$1.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeSelectFilesizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-range-select-filesize', standalone: true, imports: [CommonModule, YvcDropdownModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RangeSelectFilesizeComponent),
+                            multi: true
+                        }
+                    ], template: "<form [formGroup]=\"innerForm\">\n    <yvc-dropdown formControlName=\"range\" [options]=\"options()\" [disableClearButton]=\"true\"></yvc-dropdown>\n</form>\n", styles: [":host form{display:flex}:host form yvc-dropdown{flex:1;outline-offset:0px;color:currentColor}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DatetimeComponent, DatetimeRangeComponent, FormInputComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, DatetimeComponent, DatetimeRangeComponent, FormInputComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map