@yuuvis/client-framework 3.0.0 → 3.1.0

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

@@ -1,36 +1,36 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, signal, effect, untracked, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, computed, linkedSignal, viewChild, output, Input, NgModule } from '@angular/core';
+import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, FormBuilder, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormsModule } from '@angular/forms';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import * as i1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { SystemService, TranslateService, Classification, Situation, TranslatePipe, Operator, OperatorLabel, Utils, CatalogService, LocaleNumberPipe, FileSizePipe, IdmService, UserService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
+import { AbstractMatFormField, injectNgControl, FormTranslateService, DialogComponent, ScrollButtonsComponent } from '@yuuvis/client-framework/common';
 import * as i1$3 from '@angular/common';
 import { NgClass, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, signal, input, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, computed, linkedSignal, effect, untracked, DestroyRef, viewChild, output, Input, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormGroup, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/material/menu';
+import * as i1$2 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i3 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { SystemService, Situation, TranslatePipe, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, IdmService, UserService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
 import { YUV_ICONS } from '@yuuvis/client-framework/icons';
 import { MetadataFormFieldComponent, ObjectMetadataElementLabelDirective } from '@yuuvis/client-framework/metadata-form';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
 import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
 import { map, timer, take, of, forkJoin } from 'rxjs';
-import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import { FormTranslateService, DialogComponent, AbstractMatFormField, injectNgControl, ScrollButtonsComponent } from '@yuuvis/client-framework/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { TranslateService as TranslateService$1, TranslatePipe as TranslatePipe$1 } from '@ngx-translate/core';
 import * as i2$1 from '@yuuvis/client-framework/datepicker';
 import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framework/datepicker';
-import * as i1$2 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@yuuvis/client-framework/autocomplete';
+import * as i2$2 from '@yuuvis/client-framework/autocomplete';
 import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
 import { map as map$1, catchError } from 'rxjs/operators';
 import { marker } from '@colsen1991/ngx-translate-extract-marker';
@@ -38,6 +38,112 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i1$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
+class FormUtils {
+    static getErrorState(control) {
+        return control.invalid && (control.dirty || control.touched);
+    }
+}
+
+class CatalogComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#system = inject(SystemService);
+        this.#dRef = inject(DestroyRef);
+        this.translate = inject(TranslateService);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.#optionsEffect = effect(() => {
+            untracked(() => {
+                this.#setOptions(this.options() || [], false);
+            });
+        }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional semantics for the form element.
+         */
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
+        this.#classificationEffect = effect(() => {
+            const cls = this.classifications();
+            untracked(() => {
+                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG);
+                if (ce && ce.options) {
+                    this.#setOptions(ce.options, false);
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : /* istanbul ignore next */ []));
+        /**
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
+         */
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
+        this.ngControl = injectNgControl(this);
+        this.fc = new FormControl(undefined);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #system;
+    #dRef;
+    #optionsEffect;
+    #classificationEffect;
+    #onValueChange(val) {
+        this.value = val;
+        this.propagateChange(this.value);
+    }
+    #setOptions(options, translate) {
+        if (translate) {
+            this._options.set(options.map((o) => ({
+                label: this.translate.instant(o),
+                value: o
+            })));
+        }
+        else {
+            this._options.set(options.map((o) => ({
+                label: o,
+                value: o
+            })));
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        this.fc.setValue(value, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.fc.disable();
+        }
+        else {
+            this.fc.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        if (this.required)
+            this.fc.setValidators(Validators.required);
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = FormUtils.getErrorState(this.fc);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.fc.errors);
+            }
+        });
+        this.fc.updateValueAndValidity();
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
+        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
+
 class EditTableDataComponent {
     constructor() {
         this.#fb = inject(FormBuilder);
@@ -52,7 +158,7 @@ class EditTableDataComponent {
         this.columns = (this.formElement['elements'] || []).map((c) => ({
             ...c,
             propertyType: c.type,
-            _internalType: this.#system.getInternalFormElementType(c.type, c.classifications)
+            _internalType: this.#system.getInternalFormElementType(c.type, c.classifications, c.catalog)
         }));
         this.#elementData = this.#dialogData.elementData || {};
         this.situation = this.#dialogData.situation || Situation.EDIT;
@@ -120,7 +226,7 @@ class EditTableDataComponent {
                 useExisting: forwardRef(() => EditTableDataComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<yuv-dialog [headertitle]=\"(adding ? 'yuv.form.element.data.grid.add.headline' : 'yuv.form.element.data.grid.edit.headline') | translate: { headline: header }\">\n  <main>\n    <div [formGroup]=\"tableForm\">\n      <div class=\"fields\">\n        @for (element of columns; track $index) {\n          <div [attr.data-name]=\"element.name\" class=\"form-field\">\n            <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button ymtButton=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty || !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.object-metadata.button.save' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .fields .form-field:not(:last-child){margin-block-end:var(--ymt-spacing-s)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["formChangedSubject", "field", "situation"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<yuv-dialog [headertitle]=\"(adding ? 'yuv.form.element.data.grid.add.headline' : 'yuv.form.element.data.grid.edit.headline') | translate: { headline: header }\">\n  <main>\n    <div [formGroup]=\"tableForm\">\n      <div class=\"fields\">\n        @for (element of columns; track $index) {\n          <div [attr.data-name]=\"element.name\" class=\"form-field\">\n            <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button ymtButton=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty || !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.object-metadata.button.save' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .fields .form-field:not(:last-child){margin-block-end:var(--ymt-spacing-s)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["formChangedSubject", "field", "situation"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EditTableDataComponent, decorators: [{
             type: Component,
@@ -294,7 +400,7 @@ class DataGridComponent {
                     type: el.type,
                     cell: (element) => ({
                         propertyName: el.name,
-                        rendererType: this.#systemService.getInternalFormElementType(el.type, el.classifications),
+                        rendererType: this.#systemService.getInternalFormElementType(el.type, el.classifications, el.catalog),
                         value: element[el.name],
                         meta: element[el.name]
                     })
@@ -360,7 +466,7 @@ class DataGridComponent {
                 useExisting: forwardRef(() => DataGridComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<fieldset [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"isInvalid\">\n  <legend class=\"ymt-hide-sr\">\n    {{ tableLabel() }}\n    @if (isRequired) {\n      *\n    }\n  </legend>\n  <header class=\"yuv-data-grid__header\">\n    <span\n      [yuvObjectMetadataElementLabel]=\"formFieldContext()\"\n      class=\"yuv-data-grid__header-title label\"\n      [ngClass]=\"{ 'yuv-data-grid__header-title--invalid': isInvalid }\"\n      aria-hidden=\"true\"\n    >\n      {{ tableLabel() }}\n      @if (isRequired) {\n        *\n      }\n    </span>\n\n    @if (!readonly()) {\n      <button ymtIconButton (click)=\"addRow()\" class=\"yuv-data-grid__header-action\" [matTooltip]=\"'yuv.form.element.data.grid.add-row.button.tooltip' | translate\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </header>\n\n  @let displayedCol = displayedColumns();\n  @let displayedColActions = displayedColumnsWithActions();\n  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n      <caption class=\"ymt-hide-sr\">\n        {{\n          tableLabel()\n        }}\n      </caption>\n\n      @for (column of displayedCol; track column) {\n        @if (column.columnDef === 'actions') {\n          <!-- <h1>Actions</h1> -->\n          <ng-container [matColumnDef]=\"column.columnDef\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"></th>\n            <td class=\"yuv-data-grid__cell--editable\" mat-cell *matCellDef=\"let element\">\n              <div class=\"yuv-data-grid__table-actions\">\n                <!-- Only show the button in the last (empty) row -->\n                <button ymtIconButton icon-button-size=\"small\" class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTrigger(element)\" [matTooltip]=\"'yuv.form.element.data.grid.row.button.actions.tooltip' | translate\"  >\n                  <mat-icon>more_vert</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n        } @else {\n          <ng-container [matColumnDef]=\"column.columnDef\">\n            <th mat-header-cell *matHeaderCellDef [attr.aria-label]=\"column.header\" [title]=\"column.header\">{{ column.header }}</th>\n            <td\n              [ngClass]=\"{ 'number-cell': column.type === 'integer' || column.type === 'decimal', 'yuv-data-grid__cell--editable': !readonly() }\"\n              mat-cell\n              *matCellDef=\"let element\"\n            >\n              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n    </table>\n    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"editRow(selectedRow())\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n  <button mat-menu-item (click)=\"removeRow(selectedRow())\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n</mat-menu>\n", styles: [":host{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px;max-width:100%;width:100%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}:host .yuv-data-grid__header-title{transform:scale(var(--mat-mdc-form-field-floating-label-scale, .75))}:host .yuv-data-grid__header-title--invalid{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);align-self:baseline}:host .yuv-data-grid__cell--editable{-webkit-user-select:none;user-select:none}:host .yuv-data-grid__table{overflow:auto;white-space:nowrap}:host .yuv-data-grid__table.small{height:var(--table-size-small)}:host .yuv-data-grid__table.medium{height:var(--table-size-medium)}:host .yuv-data-grid__table.large{height:var(--table-size-large)}:host .yuv-data-grid__table.extra-large{height:var(--table-size-extra-large)}:host .yuv-data-grid__table .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}:host .yuv-data-grid__table-actions{display:flex;align-items:center;justify-content:flex-end}:host.yuv-data-grid{display:block}:host.yuv-data-grid ::ng-deep tr.cdk-row td.number-cell{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: ObjectMetadataElementLabelDirective, selector: "[yuvObjectMetadataElementLabel]", inputs: ["yuvObjectMetadataElementLabel"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<fieldset [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"isInvalid\">\n  <legend class=\"ymt-hide-sr\">\n    {{ tableLabel() }}\n    @if (isRequired) {\n      *\n    }\n  </legend>\n  <header class=\"yuv-data-grid__header\">\n    <span\n      [yuvObjectMetadataElementLabel]=\"formFieldContext()\"\n      class=\"yuv-data-grid__header-title label\"\n      [ngClass]=\"{ 'yuv-data-grid__header-title--invalid': isInvalid }\"\n      aria-hidden=\"true\"\n    >\n      {{ tableLabel() }}\n      @if (isRequired) {\n        *\n      }\n    </span>\n\n    @if (!readonly()) {\n      <button ymtIconButton (click)=\"addRow()\" class=\"yuv-data-grid__header-action\" [matTooltip]=\"'yuv.form.element.data.grid.add-row.button.tooltip' | translate\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </header>\n\n  @let displayedCol = displayedColumns();\n  @let displayedColActions = displayedColumnsWithActions();\n  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n      <caption class=\"ymt-hide-sr\">\n        {{\n          tableLabel()\n        }}\n      </caption>\n\n      @for (column of displayedCol; track column) {\n        @if (column.columnDef === 'actions') {\n          <!-- <h1>Actions</h1> -->\n          <ng-container [matColumnDef]=\"column.columnDef\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"></th>\n            <td class=\"yuv-data-grid__cell--editable\" mat-cell *matCellDef=\"let element\">\n              <div class=\"yuv-data-grid__table-actions\">\n                <!-- Only show the button in the last (empty) row -->\n                <button ymtIconButton icon-button-size=\"small\" class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTrigger(element)\" [matTooltip]=\"'yuv.form.element.data.grid.row.button.actions.tooltip' | translate\"  >\n                  <mat-icon>more_vert</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n        } @else {\n          <ng-container [matColumnDef]=\"column.columnDef\">\n            <th mat-header-cell *matHeaderCellDef [attr.aria-label]=\"column.header\" [title]=\"column.header\">{{ column.header }}</th>\n            <td\n              [ngClass]=\"{ 'number-cell': column.type === 'integer' || column.type === 'decimal', 'yuv-data-grid__cell--editable': !readonly() }\"\n              mat-cell\n              *matCellDef=\"let element\"\n            >\n              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n    </table>\n    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"editRow(selectedRow())\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n  <button mat-menu-item (click)=\"removeRow(selectedRow())\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n</mat-menu>\n", styles: [":host{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px;max-width:100%;width:100%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}:host .yuv-data-grid__header-title{transform:scale(var(--mat-mdc-form-field-floating-label-scale, .75))}:host .yuv-data-grid__header-title--invalid{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);align-self:baseline}:host .yuv-data-grid__cell--editable{-webkit-user-select:none;user-select:none}:host .yuv-data-grid__table{overflow:auto;white-space:nowrap}:host .yuv-data-grid__table.small{height:var(--table-size-small)}:host .yuv-data-grid__table.medium{height:var(--table-size-medium)}:host .yuv-data-grid__table.large{height:var(--table-size-large)}:host .yuv-data-grid__table.extra-large{height:var(--table-size-extra-large)}:host .yuv-data-grid__table .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}:host .yuv-data-grid__table-actions{display:flex;align-items:center;justify-content:flex-end}:host.yuv-data-grid{display:block}:host.yuv-data-grid ::ng-deep tr.cdk-row td.number-cell{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "directive", type: ObjectMetadataElementLabelDirective, selector: "[yuvObjectMetadataElementLabel]", inputs: ["yuvObjectMetadataElementLabel"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -388,12 +494,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     }, template: "<fieldset [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"isInvalid\">\n  <legend class=\"ymt-hide-sr\">\n    {{ tableLabel() }}\n    @if (isRequired) {\n      *\n    }\n  </legend>\n  <header class=\"yuv-data-grid__header\">\n    <span\n      [yuvObjectMetadataElementLabel]=\"formFieldContext()\"\n      class=\"yuv-data-grid__header-title label\"\n      [ngClass]=\"{ 'yuv-data-grid__header-title--invalid': isInvalid }\"\n      aria-hidden=\"true\"\n    >\n      {{ tableLabel() }}\n      @if (isRequired) {\n        *\n      }\n    </span>\n\n    @if (!readonly()) {\n      <button ymtIconButton (click)=\"addRow()\" class=\"yuv-data-grid__header-action\" [matTooltip]=\"'yuv.form.element.data.grid.add-row.button.tooltip' | translate\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </header>\n\n  @let displayedCol = displayedColumns();\n  @let displayedColActions = displayedColumnsWithActions();\n  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n      <caption class=\"ymt-hide-sr\">\n        {{\n          tableLabel()\n        }}\n      </caption>\n\n      @for (column of displayedCol; track column) {\n        @if (column.columnDef === 'actions') {\n          <!-- <h1>Actions</h1> -->\n          <ng-container [matColumnDef]=\"column.columnDef\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"></th>\n            <td class=\"yuv-data-grid__cell--editable\" mat-cell *matCellDef=\"let element\">\n              <div class=\"yuv-data-grid__table-actions\">\n                <!-- Only show the button in the last (empty) row -->\n                <button ymtIconButton icon-button-size=\"small\" class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTrigger(element)\" [matTooltip]=\"'yuv.form.element.data.grid.row.button.actions.tooltip' | translate\"  >\n                  <mat-icon>more_vert</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n        } @else {\n          <ng-container [matColumnDef]=\"column.columnDef\">\n            <th mat-header-cell *matHeaderCellDef [attr.aria-label]=\"column.header\" [title]=\"column.header\">{{ column.header }}</th>\n            <td\n              [ngClass]=\"{ 'number-cell': column.type === 'integer' || column.type === 'decimal', 'yuv-data-grid__cell--editable': !readonly() }\"\n              mat-cell\n              *matCellDef=\"let element\"\n            >\n              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n\n      <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n    </table>\n    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"editRow(selectedRow())\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n  <button mat-menu-item (click)=\"removeRow(selectedRow())\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n</mat-menu>\n", styles: [":host{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px;max-width:100%;width:100%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}:host .yuv-data-grid__header-title{transform:scale(var(--mat-mdc-form-field-floating-label-scale, .75))}:host .yuv-data-grid__header-title--invalid{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);align-self:baseline}:host .yuv-data-grid__cell--editable{-webkit-user-select:none;user-select:none}:host .yuv-data-grid__table{overflow:auto;white-space:nowrap}:host .yuv-data-grid__table.small{height:var(--table-size-small)}:host .yuv-data-grid__table.medium{height:var(--table-size-medium)}:host .yuv-data-grid__table.large{height:var(--table-size-large)}:host .yuv-data-grid__table.extra-large{height:var(--table-size-extra-large)}:host .yuv-data-grid__table .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}:host .yuv-data-grid__table-actions{display:flex;align-items:center;justify-content:flex-end}:host.yuv-data-grid{display:block}:host.yuv-data-grid ::ng-deep tr.cdk-row td.number-cell{text-align:right}\n"] }]
         }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], formElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "formElement", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formFieldContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "formFieldContext", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
-class FormUtils {
-    static getErrorState(control) {
-        return control.invalid && (control.dirty || control.touched);
-    }
-}
-
 class DatetimeComponent extends AbstractMatFormField {
     constructor() {
         super(...arguments);
@@ -502,7 +602,7 @@ class DatetimeComponent extends AbstractMatFormField {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: DatetimeComponent, isStandalone: true, selector: "yuv-datetime", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], viewQueries: [{ propertyName: "pickerCmp", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [formControl]=\"fc\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvDatepickerModule }, { kind: "component", type: i2$1.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: DatetimeComponent, isStandalone: true, selector: "yuv-datetime", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], viewQueries: [{ propertyName: "pickerCmp", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [formControl]=\"fc\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvDatepickerModule }, { kind: "component", type: i2$1.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -666,167 +766,362 @@ class DatetimeRangeComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimeRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimeRangeComponent, isStandalone: true, selector: "yuv-datetime-range", inputs: { withTimeInput: { classPropertyName: "withTimeInput", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeRangeComponent }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime()\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-datetime [withTime]=\"withTime()\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host form yuv-datetime{flex:1 1 auto}:host form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeComponent, selector: "yuv-datetime", inputs: ["locale", "onlyFutureDates", "readonly", "calendar", "withTime"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimeRangeComponent, isStandalone: true, selector: "yuv-datetime-range", inputs: { withTimeInput: { classPropertyName: "withTimeInput", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeRangeComponent }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime()\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-datetime [withTime]=\"withTime()\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host form yuv-datetime{flex:1 1 auto}:host form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeComponent, selector: "yuv-datetime", inputs: ["locale", "onlyFutureDates", "readonly", "calendar", "withTime"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimeRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-datetime-range', standalone: true, imports: [FormsModule, MatDatepickerModule, MatSelectModule, ReactiveFormsModule, DatetimeComponent], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeRangeComponent }], template: "<form [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-datetime [withTime]=\"withTime()\" formControlName=\"dateValueFrom\"></yuv-datetime>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-datetime [withTime]=\"withTime()\" formControlName=\"dateValue\"></yuv-datetime>\n</form>\n", styles: [":host form{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host form yuv-datetime{flex:1 1 auto}:host form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"] }]
         }], propDecorators: { withTimeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], operator: [{ type: i0.Input, args: [{ isSignal: true, alias: "operator", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
 
-var _a;
-/**
- * Creates form input for number values.
- *
- * Implements `ControlValueAccessor` so it can be used within Angular forms.
- *
- * @example
- * <yuv-number [scale]="2"></yuv-number>
- *
- */
-class NumberComponent extends AbstractMatFormField {
+class DynamicCatalogComponent extends AbstractMatFormField {
+    #catalogService;
+    #dRef;
+    #translate;
+    #currentLang;
+    #optionsResource;
     constructor() {
-        super(...arguments);
+        super();
+        this.#catalogService = inject(CatalogService);
         this.#dRef = inject(DestroyRef);
-        this.translate = inject(TranslateService);
-        // innerValue: string | null = null;
-        this.validationErrors = [];
-        this.transformPipe = new LocaleNumberPipe(this.translate);
-        this.innerCtrl = new FormControl(null);
-        this.ngControl = injectNgControl(this);
-        /**
-         * Number of decimal places
-         */
-        this.scale = input(undefined, ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
-        this.#scale = computed(() => Math.min(this.scale() || 0, 30), ...(ngDevMode ? [{ debugName: "#scale" }] : /* istanbul ignore next */ []));
-        /**
-         * Overall amount of digits allowed (including decimal places)
-         */
-        this.precision = input(undefined, ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
-        this.#precision = computed(() => Math.min(this.precision() || 100, 100), ...(ngDevMode ? [{ debugName: "#precision" }] : /* istanbul ignore next */ []));
-        /**
-         *  Set to true to group number by pattern
-         */
-        this.grouping = input(false, ...(ngDevMode ? [{ debugName: "grouping" }] : /* istanbul ignore next */ []));
-        this.#grouping = computed(() => this.grouping() ?? true, ...(ngDevMode ? [{ debugName: "#grouping" }] : /* istanbul ignore next */ []));
-        /**
-         * The pattern to group number value by
-         */
-        this.groupPattern = input(undefined, ...(ngDevMode ? [{ debugName: "groupPattern" }] : /* istanbul ignore next */ []));
-        /**
-         * Will prevent the input from being changed (default: false)
-         */
+        this.#translate = inject(TranslateService);
+        this.catalog = input.required(...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore next */ []));
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.#currentLang = signal(this.#translate.getCurrentLang(), ...(ngDevMode ? [{ debugName: "#currentLang" }] : /* istanbul ignore next */ []));
+        this.#optionsResource = rxResource({
+            params: computed(() => ({ catalog: this.catalog(), locale: this.#currentLang() })),
+            stream: ({ params }) => this.#catalogService.getEntries(params.catalog, { locale: params.locale }).pipe(map((res) => res.entries.map((entry) => ({
+                value: entry.name,
+                label: this.#resolveLabel(entry, params.locale)
+            }))))
+        });
+        this.options = this.#optionsResource.value;
         /**
-         * set minimum input value
-         */
-        this.minValue = input(undefined, ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
-        /**
-         * set maximum input value
-         *
-         */
-        this.maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-        /**
-         * 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)
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation
+         * validation of the form element will be turned off, so you are able to enter
+         * search terms that do not meet the elements validators.
          */
-        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
-        this.#classificationsEffect = effect(() => {
-            const classifications = this.classifications();
-            this.transformPipe =
-                classifications && classifications.includes(Classification.NUMBER_FILESIZE) ? new FileSizePipe(this.translate) : new LocaleNumberPipe(this.translate);
-        }, ...(ngDevMode ? [{ debugName: "#classificationsEffect" }] : /* istanbul ignore next */ []));
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-        this.propagateChange = (_) => { };
-    }
-    #dRef;
-    #scale;
-    #precision;
-    #grouping;
-    #classificationsEffect;
-    static betweenTwoNumbers(val, minVal, maxVal) {
-        const min = !Utils.isEmpty(minVal) ? minVal : -Infinity;
-        const max = !Utils.isEmpty(maxVal) ? maxVal : Infinity;
-        return val >= min && val <= max;
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
+        this.ngControl = injectNgControl(this);
+        this.ctrl = new FormControl(undefined);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/explicit-module-boundary-types
+        this.propagateChange = (fnc) => { };
+        this.#translate.onLangChange.pipe(takeUntilDestroyed()).subscribe((evt) => this.#currentLang.set(evt.lang));
     }
     writeValue(value) {
-        this.value = value != null ? value : null;
-        const innerValue = value != null ? this.transformPipe.numberToString(value, this.#grouping(), this.groupPattern(), this.#scale()) : null;
-        this.innerCtrl.setValue(innerValue, { emitEvent: false });
+        this.value = value;
+        this.ctrl.setValue(value, { emitEvent: false });
     }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+    registerOnChange(fnc) {
+        this.propagateChange = fnc;
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched() { }
     setDisabledState(isDisabled) {
         if (isDisabled) {
-            this.innerCtrl.disable();
+            this.ctrl.disable();
         }
         else {
-            this.innerCtrl.enable();
+            this.ctrl.enable();
         }
         this.disabled = isDisabled;
     }
-    // called when the input looses focus
-    format() {
-        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
-            this.innerCtrl.patchValue(this.transformPipe.numberToString(this.value, this.#grouping(), this.groupPattern(), this.#scale()), { emitEvent: false });
-        }
-    }
-    // called when the input get focus
-    unformat() {
-        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
-            this.innerCtrl.patchValue(this.transformPipe.transform(this.value, false), {
-                emitEvent: false
-            });
-        }
-    }
-    #getValidator() {
-        return (control) => {
-            this.validationErrors = [];
-            if (Utils.isEmpty(control.value))
-                return null;
-            const val = this.transformPipe.stringToNumber(control.value);
-            // general number validation
-            if (isNaN(val) || typeof val !== 'number') {
-                this.validationErrors.push({ key: 'number' });
-            }
-            else {
-                const split = control.value.replaceAll(this.transformPipe.separator, '').split(this.transformPipe.decimalSeparator);
-                // check precision
-                if (this.#precision() !== undefined) {
-                    const prePointDigits = this.#precision() - this.#scale();
-                    if (split[0]?.length > prePointDigits) {
-                        this.validationErrors.push({ key: 'precision', params: { prePointDigits } });
-                    }
-                }
-                // check scale
-                if (this.#scale() && split[1]?.length > this.#scale()) {
-                    this.validationErrors.push({ key: 'scale', params: { scale: this.#scale() } });
-                }
-                // min max
-                if (!_a.betweenTwoNumbers(val, this.minValue(), this.maxValue())) {
-                    if (Utils.isEmpty(this.minValue())) {
-                        this.validationErrors.push({ key: 'maxvalue', params: { maxValue: this.maxValue() } });
-                    }
-                    else if (Utils.isEmpty(this.maxValue())) {
-                        this.validationErrors.push({ key: 'minvalue', params: { minValue: this.minValue() } });
-                    }
-                    else {
-                        this.validationErrors.push({ key: 'minmax', params: { minValue: this.minValue(), maxValue: this.maxValue() } });
-                    }
-                }
-            }
-            const e = Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
-            return this.validationErrors.length ? e : null;
-        };
-    }
     ngOnInit() {
-        // set up validators once all inputs are set
-        const validators = [this.#getValidator()];
         if (this.required)
-            validators.push(Validators.required);
+            this.ctrl.setValidators(Validators.required);
+        this.ctrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
+            this.errorState = FormUtils.getErrorState(this.ctrl);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.ctrl.errors);
+            }
+        });
+        this.ctrl.updateValueAndValidity();
+        this.ctrl.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((value) => this.#onValueChange(value));
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #onValueChange(val) {
+        this.value = val;
+        this.propagateChange(this.value);
+    }
+    #resolveLabel(entry, locale) {
+        const locs = entry.localizations;
+        return locs.find((loc) => loc.locale === locale)?.label || locs[0]?.label || entry.name;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicCatalogComponent, isStandalone: true, selector: "yuv-dynamic-catalog", inputs: { catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DynamicCatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"ctrl\">\n  @for (o of options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-dynamic-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: DynamicCatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"ctrl\">\n  @for (o of options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
+        }], ctorParameters: () => [], propDecorators: { catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
+
+/**
+ * Form element for selecting one or multiple i18n catalog values.
+ * Having a classification of `i18n:catalog[one, two, three]` configured on the metadata field
+ * will automatically populate the options from the catalog. The options will be translated
+ * using the catalogs static values adding a prefix, the property name an the value itself.
+ * E.g. for property name `status` and option value `open` the label key will be `catalog:status:open_label`.
+ */
+class I18nCatalogComponent extends AbstractMatFormField {
+    #system;
+    #dRef;
+    #optionsEffect;
+    #classificationEffect;
+    constructor() {
+        super();
+        this.#system = inject(SystemService);
+        this.#dRef = inject(DestroyRef);
+        this.translate = inject(TranslateService);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.propertyName = input(undefined, ...(ngDevMode ? [{ debugName: "propertyName" }] : /* istanbul ignore next */ []));
+        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.#optionsEffect = effect(() => {
+            untracked(() => {
+                this.#setOptions(this.options());
+            });
+        }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional semantics for the form element.
+         */
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
+        this.#classificationEffect = effect(() => {
+            const cls = this.classifications();
+            untracked(() => {
+                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG_I18N);
+                if (ce && ce.options) {
+                    this.#setOptions(ce.options);
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : /* istanbul ignore next */ []));
+        /**
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
+         */
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
+        this.ngControl = injectNgControl(this);
+        this.fc = new FormControl(undefined);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
+            // re-apply options to trigger translation
+            this.#setOptions(this.options());
+        });
+    }
+    #onValueChange(val) {
+        this.value = val;
+        this.propagateChange(this.value);
+    }
+    #setOptions(options) {
+        this._options.set(options.map((o) => ({
+            label: this.#translateOption(o),
+            value: o
+        })));
+    }
+    #translateOption(option) {
+        // labelkey: 'catalog:status:open_label' for option 'open'
+        // This will be derived fom a prefix the property name if available and this option itself
+        return this.#system.getLocalizedLabel(`catalog:${this.propertyName() || ''}:${option}`) || option;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.fc.setValue(value, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.fc.disable();
+        }
+        else {
+            this.fc.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        if (this.required)
+            this.fc.setValidators(Validators.required);
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = FormUtils.getErrorState(this.fc);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.fc.errors);
+            }
+        });
+        this.fc.updateValueAndValidity();
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: I18nCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: I18nCatalogComponent, isStandalone: true, selector: "yuv-i18n-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: I18nCatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: I18nCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-i18n-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: I18nCatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>" }]
+        }], ctorParameters: () => [], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], propertyName: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
+
+var _a;
+/**
+ * Creates form input for number values.
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms.
+ *
+ * @example
+ * <yuv-number [scale]="2"></yuv-number>
+ *
+ */
+class NumberComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
+        this.translate = inject(TranslateService);
+        // innerValue: string | null = null;
+        this.validationErrors = [];
+        this.transformPipe = new LocaleNumberPipe(this.translate);
+        this.innerCtrl = new FormControl(null);
+        this.ngControl = injectNgControl(this);
+        /**
+         * Number of decimal places
+         */
+        this.scale = input(undefined, ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+        this.#scale = computed(() => Math.min(this.scale() || 0, 30), ...(ngDevMode ? [{ debugName: "#scale" }] : /* istanbul ignore next */ []));
+        /**
+         * Overall amount of digits allowed (including decimal places)
+         */
+        this.precision = input(undefined, ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+        this.#precision = computed(() => Math.min(this.precision() || 100, 100), ...(ngDevMode ? [{ debugName: "#precision" }] : /* istanbul ignore next */ []));
+        /**
+         *  Set to true to group number by pattern
+         */
+        this.grouping = input(false, ...(ngDevMode ? [{ debugName: "grouping" }] : /* istanbul ignore next */ []));
+        this.#grouping = computed(() => this.grouping() ?? true, ...(ngDevMode ? [{ debugName: "#grouping" }] : /* istanbul ignore next */ []));
+        /**
+         * The pattern to group number value by
+         */
+        this.groupPattern = input(undefined, ...(ngDevMode ? [{ debugName: "groupPattern" }] : /* istanbul ignore next */ []));
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * set minimum input value
+         */
+        this.minValue = input(undefined, ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /**
+         * set maximum input value
+         *
+         */
+        this.maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /**
+         * classification property adds some semantics to the value of this component.
+         * If you provide a value of `filesize` numbers typed into the control will be
+         * handled like file sizes (calculates differnt units)
+         */
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
+        this.#classificationsEffect = effect(() => {
+            const classifications = this.classifications();
+            this.transformPipe =
+                classifications && classifications.includes(Classification.NUMBER_FILESIZE) ? new FileSizePipe(this.translate) : new LocaleNumberPipe(this.translate);
+        }, ...(ngDevMode ? [{ debugName: "#classificationsEffect" }] : /* istanbul ignore next */ []));
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #dRef;
+    #scale;
+    #precision;
+    #grouping;
+    #classificationsEffect;
+    static betweenTwoNumbers(val, minVal, maxVal) {
+        const min = !Utils.isEmpty(minVal) ? minVal : -Infinity;
+        const max = !Utils.isEmpty(maxVal) ? maxVal : Infinity;
+        return val >= min && val <= max;
+    }
+    writeValue(value) {
+        this.value = value != null ? value : null;
+        const innerValue = value != null ? this.transformPipe.numberToString(value, this.#grouping(), this.groupPattern(), this.#scale()) : null;
+        this.innerCtrl.setValue(innerValue, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.innerCtrl.disable();
+        }
+        else {
+            this.innerCtrl.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    // called when the input looses focus
+    format() {
+        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
+            this.innerCtrl.patchValue(this.transformPipe.numberToString(this.value, this.#grouping(), this.groupPattern(), this.#scale()), { emitEvent: false });
+        }
+    }
+    // called when the input get focus
+    unformat() {
+        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
+            this.innerCtrl.patchValue(this.transformPipe.transform(this.value, false), {
+                emitEvent: false
+            });
+        }
+    }
+    #getValidator() {
+        return (control) => {
+            this.validationErrors = [];
+            if (Utils.isEmpty(control.value))
+                return null;
+            const val = this.transformPipe.stringToNumber(control.value);
+            // general number validation
+            if (isNaN(val) || typeof val !== 'number') {
+                this.validationErrors.push({ key: 'number' });
+            }
+            else {
+                const split = control.value.replaceAll(this.transformPipe.separator, '').split(this.transformPipe.decimalSeparator);
+                // check precision
+                if (this.#precision() !== undefined) {
+                    const prePointDigits = this.#precision() - this.#scale();
+                    if (split[0]?.length > prePointDigits) {
+                        this.validationErrors.push({ key: 'precision', params: { prePointDigits } });
+                    }
+                }
+                // check scale
+                if (this.#scale() && split[1]?.length > this.#scale()) {
+                    this.validationErrors.push({ key: 'scale', params: { scale: this.#scale() } });
+                }
+                // min max
+                if (!_a.betweenTwoNumbers(val, this.minValue(), this.maxValue())) {
+                    if (Utils.isEmpty(this.minValue())) {
+                        this.validationErrors.push({ key: 'maxvalue', params: { maxValue: this.maxValue() } });
+                    }
+                    else if (Utils.isEmpty(this.maxValue())) {
+                        this.validationErrors.push({ key: 'minvalue', params: { minValue: this.minValue() } });
+                    }
+                    else {
+                        this.validationErrors.push({ key: 'minmax', params: { minValue: this.minValue(), maxValue: this.maxValue() } });
+                    }
+                }
+            }
+            const e = Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
+            return this.validationErrors.length ? e : null;
+        };
+    }
+    ngOnInit() {
+        // set up validators once all inputs are set
+        const validators = [this.#getValidator()];
+        if (this.required)
+            validators.push(Validators.required);
         this.innerCtrl.setValidators(validators);
         this.innerCtrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
             this.errorState = FormUtils.getErrorState(this.innerCtrl);
@@ -854,7 +1149,7 @@ class NumberComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NumberComponent, isStandalone: true, selector: "yuv-number", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, groupPattern: { classPropertyName: "groupPattern", publicName: "groupPattern", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: NumberComponent }], usesInheritance: true, ngImport: i0, template: '<input type="string" [formControl]="innerCtrl" (focus)="unformat()" (blur)="format()" [readonly]="readonly()" />', isInline: true, styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NumberComponent, isStandalone: true, selector: "yuv-number", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, groupPattern: { classPropertyName: "groupPattern", publicName: "groupPattern", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: NumberComponent }], usesInheritance: true, ngImport: i0, template: '<input type="string" [formControl]="innerCtrl" (focus)="unformat()" (blur)="format()" [readonly]="readonly()" />', isInline: true, styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 _a = NumberComponent;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberComponent, decorators: [{
@@ -997,74 +1292,230 @@ class NumberRangeComponent extends AbstractMatFormField {
                     secondValue: undefined
                 };
         }
-        this.propagateChange(this.value);
+        this.propagateChange(this.value);
+    }
+    #getValidator() {
+        return (control) => {
+            let err;
+            const operator = control.get('operator')?.value;
+            const firstValue = Number(control.get('numberValueFrom')?.value);
+            const secondValue = Number(control.get('numberValue')?.value);
+            const singleValueOperators = new Set([Operator.EQUAL]);
+            const rangeOperators = new Set([Operator.INTERVAL_INCLUDE_BOTH]);
+            if (this.situation() === Situation.SEARCH)
+                return null;
+            if (singleValueOperators.has(operator)) {
+                return { number: { valid: false } };
+            }
+            else if (rangeOperators.has(operator)) {
+                if (firstValue && secondValue) {
+                    // make sure that on ranges, the first value is earlier than the last
+                    this.isValid = firstValue < secondValue;
+                    if (this.isValid)
+                        return null;
+                    return { numberrangeorder: { valid: false } };
+                }
+                else {
+                    return { numberrange: { valid: false } };
+                }
+            }
+            return null;
+        };
+    }
+    // returns null when valid else the validation object
+    validate() {
+        let err;
+        const operator = this.rangeForm.value.operator;
+        if (operator === Operator.EQUAL) {
+            err = { number: { valid: false } };
+        }
+        else if (operator === Operator.INTERVAL_INCLUDE_BOTH && this.value?.firstValue && this.value?.secondValue) {
+            // make sure that on ranges, the first value is earlier than the last
+            this.isValid = this.value.firstValue < this.value.secondValue;
+            err = { numberrangeorder: { valid: false } };
+        }
+        else {
+            err = { numberrange: { valid: false } };
+        }
+        return this.isValid ? null : err;
+    }
+    ngOnInit() {
+        this.rangeForm.setValidators(this.#getValidator());
+        this.rangeForm.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = FormUtils.getErrorState(this.rangeForm);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.rangeForm.errors);
+            }
+        });
+        this.rangeForm.updateValueAndValidity();
+        this.rangeForm.valueChanges.subscribe(() => this.#onValueChange());
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NumberRangeComponent, isStandalone: true, selector: "yuv-number-range", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], usesInheritance: true, ngImport: i0, template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly()\"\n      [scale]=\"scale()\"\n      [precision]=\"precision()\"\n      [grouping]=\"grouping()\"\n      [groupPattern]=\"pattern()\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications()\"\n      [minValue]=\"minValue()\"\n      [maxValue]=\"maxValue()\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale()\"\n    [readonly]=\"readonly()\"\n    [precision]=\"precision()\"\n    [grouping]=\"grouping()\"\n    [groupPattern]=\"pattern()\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications()\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host>form yuv-number{flex:1 1 auto}:host>form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"], dependencies: [{ kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-number-range', standalone: true, imports: [NumberComponent, MatSelectModule, FormsModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly()\"\n      [scale]=\"scale()\"\n      [precision]=\"precision()\"\n      [grouping]=\"grouping()\"\n      [groupPattern]=\"pattern()\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications()\"\n      [minValue]=\"minValue()\"\n      [maxValue]=\"maxValue()\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale()\"\n    [readonly]=\"readonly()\"\n    [precision]=\"precision()\"\n    [grouping]=\"grouping()\"\n    [groupPattern]=\"pattern()\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications()\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host>form yuv-number{flex:1 1 auto}:host>form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"] }]
+        }], propDecorators: { scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
+
+/**
+ * Creates form input for organization set values. An organization set is
+ * either a user or a role. This control will emit a stringified JSON object of
+ * a OrganizationSetEntry object.
+ *
+ * ```json
+ * {
+ *   "id:organization:set": [
+ *     "{\"id\":\"YUUVIS_AI_PREDICT\",\"title\":\"YUUVIS_AI_PREDICT\",\"type\":\"role\"}"
+ *   ]
+ * }
+ * ```
+ */
+class OrganizationSetComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#system = inject(SystemService);
+        this.#idmService = inject(IdmService);
+        this.#dRef = inject(DestroyRef);
+        /**
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
+         */
+        this.situation = input(undefined, ...(ngDevMode ? [{ debugName: "situation" }] : /* istanbul ignore next */ []));
+        /**
+         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
+         */
+        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : /* istanbul ignore next */ []));
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * 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, ...(ngDevMode ? [{ debugName: "withMetadata" }] : /* istanbul ignore next */ []));
+        /**
+         * Minimum length of the autocomplete input before a query is sent to the server.
+         */
+        this.autocompleteMinLength = input(2, ...(ngDevMode ? [{ debugName: "autocompleteMinLength" }] : /* istanbul ignore next */ []));
+        this.classifications = input(undefined, ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
+        this.types = input(undefined, ...(ngDevMode ? [{ debugName: "types" }] : /* istanbul ignore next */ []));
+        this.#targetTypes = linkedSignal(() => {
+            const c = this.classifications();
+            const types = this.types();
+            if (c?.length) {
+                const classifications = this.#system.getClassifications(c);
+                return classifications.has(Classification.STRING_ORGANIZATION_SET)
+                    ? classifications.get(Classification.STRING_ORGANIZATION_SET).options
+                    : [];
+            }
+            else if (types) {
+                return types;
+            }
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "#targetTypes" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.acFormControl = new FormControl(undefined);
+        this.ngControl = injectNgControl(this);
+        this.innerValue = [];
+        this.autocompleteRes = [];
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #system;
+    #idmService;
+    #dRef;
+    #targetTypes;
+    writeValue(value) {
+        const val = Array.isArray(value)
+            ? value.map((v) => (typeof v === 'string' ? JSON.parse(v) : v))
+            : value
+                ? [JSON.parse(value)]
+                : [];
+        this.innerValue = val;
+        this.value = val.map((v) => JSON.stringify(v));
+        if (!this.multiselect) {
+            this.value = this.value[0] || null;
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.acFormControl.disable();
+        }
+        else {
+            this.acFormControl.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    propagate() {
+        this.value = this.#getPropagateValue();
+        this.propagateChange(this.value);
+    }
+    #getPropagateValue() {
+        if (this.multiselect()) {
+            return this.innerValue.map((v) => JSON.stringify(v));
+        }
+        else if (this.innerValue.length) {
+            return JSON.stringify(this.innerValue[0]);
+        }
+        else
+            return undefined;
     }
-    #getValidator() {
-        return (control) => {
-            let err;
-            const operator = control.get('operator')?.value;
-            const firstValue = Number(control.get('numberValueFrom')?.value);
-            const secondValue = Number(control.get('numberValue')?.value);
-            const singleValueOperators = new Set([Operator.EQUAL]);
-            const rangeOperators = new Set([Operator.INTERVAL_INCLUDE_BOTH]);
-            if (this.situation() === Situation.SEARCH)
-                return null;
-            if (singleValueOperators.has(operator)) {
-                return { number: { valid: false } };
-            }
-            else if (rangeOperators.has(operator)) {
-                if (firstValue && secondValue) {
-                    // make sure that on ranges, the first value is earlier than the last
-                    this.isValid = firstValue < secondValue;
-                    if (this.isValid)
-                        return null;
-                    return { numberrangeorder: { valid: false } };
-                }
-                else {
-                    return { numberrange: { valid: false } };
+    autocompleteFn(query) {
+        if (query.length >= this.autocompleteMinLength()) {
+            this.#idmService.queryOrganizationEntity(query, this.#targetTypes()).subscribe({
+                next: (entries) => {
+                    this.autocompleteRes = entries
+                        .filter((e) => !this.innerValue?.some((value) => value.id === e.id))
+                        .map((o) => ({
+                        label: o.title,
+                        value: o
+                    }));
+                },
+                error: (e) => {
+                    this.autocompleteRes = [];
                 }
-            }
-            return null;
-        };
-    }
-    // returns null when valid else the validation object
-    validate() {
-        let err;
-        const operator = this.rangeForm.value.operator;
-        if (operator === Operator.EQUAL) {
-            err = { number: { valid: false } };
-        }
-        else if (operator === Operator.INTERVAL_INCLUDE_BOTH && this.value?.firstValue && this.value?.secondValue) {
-            // make sure that on ranges, the first value is earlier than the last
-            this.isValid = this.value.firstValue < this.value.secondValue;
-            err = { numberrangeorder: { valid: false } };
+            });
         }
         else {
-            err = { numberrange: { valid: false } };
+            this.autocompleteRes = [];
         }
-        return this.isValid ? null : err;
     }
     ngOnInit() {
-        this.rangeForm.setValidators(this.#getValidator());
-        this.rangeForm.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
-            this.errorState = FormUtils.getErrorState(this.rangeForm);
+        if (this.required)
+            this.acFormControl.setValidators(Validators.required);
+        this.acFormControl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = FormUtils.getErrorState(this.acFormControl);
             if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.rangeForm.errors);
+                this.ngControl.control.setErrors(this.acFormControl.errors);
             }
         });
-        this.rangeForm.updateValueAndValidity();
-        this.rangeForm.valueChanges.subscribe(() => this.#onValueChange());
+        this.acFormControl.updateValueAndValidity();
+        this.acFormControl.valueChanges.subscribe((v) => {
+            if (!Array.isArray(v))
+                v = v ? [v] : [];
+            this.innerValue = v.map((i) => i.value);
+            this.propagate();
+        });
     }
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NumberRangeComponent, isStandalone: true, selector: "yuv-number-range", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], usesInheritance: true, ngImport: i0, template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly()\"\n      [scale]=\"scale()\"\n      [precision]=\"precision()\"\n      [grouping]=\"grouping()\"\n      [groupPattern]=\"pattern()\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications()\"\n      [minValue]=\"minValue()\"\n      [maxValue]=\"maxValue()\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale()\"\n    [readonly]=\"readonly()\"\n    [precision]=\"precision()\"\n    [grouping]=\"grouping()\"\n    [groupPattern]=\"pattern()\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications()\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host>form yuv-number{flex:1 1 auto}:host>form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"], dependencies: [{ kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: OrganizationSetComponent, isStandalone: true, selector: "yuv-organization-set", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null }, autocompleteMinLength: { classPropertyName: "autocompleteMinLength", publicName: "autocompleteMinLength", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationSetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-number-range', standalone: true, imports: [NumberComponent, MatSelectModule, FormsModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly()\"\n      [scale]=\"scale()\"\n      [precision]=\"precision()\"\n      [grouping]=\"grouping()\"\n      [groupPattern]=\"pattern()\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications()\"\n      [minValue]=\"minValue()\"\n      [maxValue]=\"maxValue()\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly()\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale()\"\n    [readonly]=\"readonly()\"\n    [precision]=\"precision()\"\n    [grouping]=\"grouping()\"\n    [groupPattern]=\"pattern()\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications()\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:var(--ymt-spacing-s)}:host>form yuv-number{flex:1 1 auto}:host>form mat-select{padding:0;width:calc(2ch + 1em);border-radius:2px}\n"] }]
-        }], propDecorators: { scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
+            args: [{ selector: 'yuv-organization-set', imports: [FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslatePipe$1], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
+        }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], withMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "withMetadata", required: false }] }], autocompleteMinLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMinLength", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }] } });
 
 const mapOrganizationNode = (innerValue) => map$1((node) => node
     .filter((e) => !innerValue?.some((value) => value?.id === e.id))
@@ -1246,193 +1697,29 @@ class OrganizationComponent extends AbstractMatFormField {
         return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
     }
     #getMetadataString(value) {
-        try {
-            if (Array.isArray(value)) {
-                return value.map((v) => JSON.parse(v));
-            }
-            else {
-                return JSON.parse(value);
-            }
-        }
-        catch (e) {
-            return undefined;
-        }
-    }
-    autocompleteFn(query) {
-        if (query.length >= this.minLength) {
-            this.busy.set(true);
-            (this.#organizationType() === Classification.STRING_ORGANIZATION
-                ? this.#resolveOrganization(query, this.excludeMe(), this.#filterRoles())
-                : this.#resolveOrganizationSet(query, this.#filterRoles())).subscribe({
-                next: (res) => {
-                    this.busy.set(false);
-                    this.autocompleteRes = res;
-                },
-                error: () => this.busy.set(false)
-            });
-        }
-        else {
-            this.autocompleteRes = [];
-        }
-    }
-    ngOnInit() {
-        if (this.required)
-            this.acFormControl.setValidators(Validators.required);
-        this.acFormControl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
-            this.errorState = FormUtils.getErrorState(this.acFormControl);
-            if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.acFormControl.errors);
-            }
-        });
-        this.acFormControl.updateValueAndValidity({ emitEvent: false });
-        this.acFormControl.valueChanges.subscribe((v) => {
-            if (!Array.isArray(v))
-                v = v ? [v] : [];
-            this.innerValue = v.map((i) => i.value);
-            this.propagate();
-        });
-    }
-    ngOnDestroy() {
-        super.onNgOnDestroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-organization', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        YuvAutocompleteModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        TranslatePipe
-                    ], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
-        }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], excludeMe: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeMe", required: false }] }], withMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "withMetadata", required: false }] }] } });
-
-/**
- * Creates form input for organization set values. An organization set is
- * either a user or a role. This control will emit a stringified JSON object of
- * a OrganizationSetEntry object.
- *
- * ```json
- * {
- *   "id:organization:set": [
- *     "{\"id\":\"YUUVIS_AI_PREDICT\",\"title\":\"YUUVIS_AI_PREDICT\",\"type\":\"role\"}"
- *   ]
- * }
- * ```
- */
-class OrganizationSetComponent extends AbstractMatFormField {
-    constructor() {
-        super(...arguments);
-        this.#system = inject(SystemService);
-        this.#idmService = inject(IdmService);
-        this.#dRef = inject(DestroyRef);
-        /**
-         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
-         */
-        this.situation = input(undefined, ...(ngDevMode ? [{ debugName: "situation" }] : /* istanbul ignore next */ []));
-        /**
-         * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
-         */
-        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : /* istanbul ignore next */ []));
-        /**
-         * Will prevent the input from being changed (default: false)
-         */
-        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-        /**
-         * 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, ...(ngDevMode ? [{ debugName: "withMetadata" }] : /* istanbul ignore next */ []));
-        /**
-         * Minimum length of the autocomplete input before a query is sent to the server.
-         */
-        this.autocompleteMinLength = input(2, ...(ngDevMode ? [{ debugName: "autocompleteMinLength" }] : /* istanbul ignore next */ []));
-        this.classifications = input(undefined, ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
-        this.types = input(undefined, ...(ngDevMode ? [{ debugName: "types" }] : /* istanbul ignore next */ []));
-        this.#targetTypes = linkedSignal(() => {
-            const c = this.classifications();
-            const types = this.types();
-            if (c?.length) {
-                const classifications = this.#system.getClassifications(c);
-                return classifications.has(Classification.STRING_ORGANIZATION_SET)
-                    ? classifications.get(Classification.STRING_ORGANIZATION_SET).options
-                    : [];
-            }
-            else if (types) {
-                return types;
-            }
-            return [];
-        }, ...(ngDevMode ? [{ debugName: "#targetTypes" }] : /* istanbul ignore next */ []));
-        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-        this.acFormControl = new FormControl(undefined);
-        this.ngControl = injectNgControl(this);
-        this.innerValue = [];
-        this.autocompleteRes = [];
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.propagateChange = (_) => { };
-    }
-    #system;
-    #idmService;
-    #dRef;
-    #targetTypes;
-    writeValue(value) {
-        const val = Array.isArray(value)
-            ? value.map((v) => (typeof v === 'string' ? JSON.parse(v) : v))
-            : value
-                ? [JSON.parse(value)]
-                : [];
-        this.innerValue = val;
-        this.value = val.map((v) => JSON.stringify(v));
-        if (!this.multiselect) {
-            this.value = this.value[0] || null;
-        }
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.acFormControl.disable();
-        }
-        else {
-            this.acFormControl.enable();
-        }
-        this.disabled = isDisabled;
-    }
-    propagate() {
-        this.value = this.#getPropagateValue();
-        this.propagateChange(this.value);
-    }
-    #getPropagateValue() {
-        if (this.multiselect()) {
-            return this.innerValue.map((v) => JSON.stringify(v));
-        }
-        else if (this.innerValue.length) {
-            return JSON.stringify(this.innerValue[0]);
+        try {
+            if (Array.isArray(value)) {
+                return value.map((v) => JSON.parse(v));
+            }
+            else {
+                return JSON.parse(value);
+            }
         }
-        else
+        catch (e) {
             return undefined;
+        }
     }
     autocompleteFn(query) {
-        if (query.length >= this.autocompleteMinLength()) {
-            this.#idmService.queryOrganizationEntity(query, this.#targetTypes()).subscribe({
-                next: (entries) => {
-                    this.autocompleteRes = entries
-                        .filter((e) => !this.innerValue?.some((value) => value.id === e.id))
-                        .map((o) => ({
-                        label: o.title,
-                        value: o
-                    }));
+        if (query.length >= this.minLength) {
+            this.busy.set(true);
+            (this.#organizationType() === Classification.STRING_ORGANIZATION
+                ? this.#resolveOrganization(query, this.excludeMe(), this.#filterRoles())
+                : this.#resolveOrganizationSet(query, this.#filterRoles())).subscribe({
+                next: (res) => {
+                    this.busy.set(false);
+                    this.autocompleteRes = res;
                 },
-                error: (e) => {
-                    this.autocompleteRes = [];
-                }
+                error: () => this.busy.set(false)
             });
         }
         else {
@@ -1448,7 +1735,7 @@ class OrganizationSetComponent extends AbstractMatFormField {
                 this.ngControl.control.setErrors(this.acFormControl.errors);
             }
         });
-        this.acFormControl.updateValueAndValidity();
+        this.acFormControl.updateValueAndValidity({ emitEvent: false });
         this.acFormControl.valueChanges.subscribe((v) => {
             if (!Array.isArray(v))
                 v = v ? [v] : [];
@@ -1459,13 +1746,21 @@ class OrganizationSetComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: OrganizationSetComponent, isStandalone: true, selector: "yuv-organization-set", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null }, autocompleteMinLength: { classPropertyName: "autocompleteMinLength", publicName: "autocompleteMinLength", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization-set', imports: [FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslatePipe$1], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
-        }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], withMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "withMetadata", required: false }] }], autocompleteMinLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMinLength", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }] } });
+            args: [{ selector: 'yuv-organization', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        YuvAutocompleteModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        TranslatePipe
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
+        }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], excludeMe: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeMe", required: false }] }], withMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "withMetadata", required: false }] }] } });
 
 class DateRangePickerComponent {
     constructor() {
@@ -1495,7 +1790,7 @@ class DateRangePickerComponent {
         this.#dialogRef.close(this.form.value.range);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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: "<yuv-dialog [headertitel]=\"'yuv.form.element.range-select-date.custom.overlay.title' | translate\">\n  <main>\n    <form id=\"date-range-picker-form\" [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n      <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n    </form>\n  </main>\n  <footer>\n    <button form=\"date-range-picker-form\" ymtButton=\"primary\" [disabled]=\"form.invalid\">\n      {{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--ymt-spacing-m);padding:var(--ymt-spacing-m)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--ymt-text-color-subtle);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator", "situation"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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: "<yuv-dialog [headertitel]=\"'yuv.form.element.range-select-date.custom.overlay.title' | translate\">\n  <main>\n    <form id=\"date-range-picker-form\" [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n      <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n    </form>\n  </main>\n  <footer>\n    <button form=\"date-range-picker-form\" ymtButton=\"primary\" [disabled]=\"form.invalid\">\n      {{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--ymt-spacing-m);padding:var(--ymt-spacing-m)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--ymt-text-color-subtle);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator", "situation"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -1666,7 +1961,7 @@ class RangeSelectDateComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RangeSelectDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RangeSelectDateComponent, isStandalone: true, selector: "yuv-range-select-date", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, customRange: { classPropertyName: "customRange", publicName: "customRange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RangeSelectDateComponent, isStandalone: true, selector: "yuv-range-select-date", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, customRange: { classPropertyName: "customRange", publicName: "customRange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RangeSelectDateComponent, decorators: [{
             type: Component,
@@ -1749,7 +2044,7 @@ class RangeSelectFilesizeComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RangeSelectFilesizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RangeSelectFilesizeComponent, isStandalone: true, selector: "yuv-range-select-filesize", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RangeSelectFilesizeComponent, isStandalone: true, selector: "yuv-range-select-filesize", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RangeSelectFilesizeComponent, decorators: [{
             type: Component,
@@ -2032,7 +2327,7 @@ class StringComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.readonly": "readonly()" } }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect()) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly()\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect()) {\n  <!-- single line input with multiselect-->\n  <yuv-scroll-buttons>\n    <mat-chip-grid #chipGrid [formControl]=\"fc\">\n      @for (v of value; track v) {\n        <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n          {{ v }}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n      <input\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        [matChipInputAddOnBlur]=\"true\"\n        (matChipInputTokenEnd)=\"chipsAdd($event)\"\n      />\n    </mat-chip-grid>\n  </yuv-scroll-buttons>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly()\" [formControl]=\"fc\"></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect() || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){min-width:0}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}:host.readonly .classify{pointer-events:all}:host .classify a{color:var(--ymt-text-color-subtle);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ScrollButtonsComponent, selector: "yuv-scroll-buttons", inputs: ["scrollAmount"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.readonly": "readonly()" } }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect()) {\n  <input matInput type=\"text\" (blur)=\"onBlur()\" [readonly]=\"readonly()\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect()) {\n  <!-- single line input with multiselect-->\n  <yuv-scroll-buttons>\n    <mat-chip-grid #chipGrid [formControl]=\"fc\">\n      @for (v of value; track v) {\n        <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n          {{ v }}\n          <button matChipRemove>\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n      <input\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        [matChipInputAddOnBlur]=\"true\"\n        (matChipInputTokenEnd)=\"chipsAdd($event)\"\n      />\n    </mat-chip-grid>\n  </yuv-scroll-buttons>\n} @else if (rows && rows > 1) {\n  <!-- multi line text inputs -->\n  <textarea matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly()\" [formControl]=\"fc\"></textarea>\n}\n\n@if (classify) {\n  <div class=\"classify\">\n    @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect() || value.length <= 1)) {\n      <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n        <mat-icon>{{ classify.icon }}</mat-icon>\n      </a>\n    } @else {\n      <mat-icon>{{ classify.icon }}</mat-icon>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){min-width:0}:host mat-chip-grid{flex:1}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}:host.readonly .classify{pointer-events:all}:host .classify a{color:var(--ymt-text-color-subtle);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ScrollButtonsComponent, selector: "yuv-scroll-buttons", inputs: ["scrollAmount"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StringComponent, decorators: [{
             type: Component,
@@ -2045,215 +2340,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], regex: [{ type: i0.Input, args: [{ isSignal: true, alias: "regex", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 
-class CatalogComponent extends AbstractMatFormField {
-    constructor() {
-        super(...arguments);
-        this.#system = inject(SystemService);
-        this.#dRef = inject(DestroyRef);
-        this.translate = inject(TranslateService);
-        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.#optionsEffect = effect(() => {
-            untracked(() => {
-                this.#setOptions(this.options() || [], false);
-            });
-        }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Additional semantics for the form element.
-         */
-        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
-        this.#classificationEffect = effect(() => {
-            const cls = this.classifications();
-            untracked(() => {
-                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG);
-                if (ce && ce.options) {
-                    this.#setOptions(ce.options, false);
-                }
-            });
-        }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
-         */
-        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
-        this.ngControl = injectNgControl(this);
-        this.fc = new FormControl(undefined);
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.propagateChange = (_) => { };
-    }
-    #system;
-    #dRef;
-    #optionsEffect;
-    #classificationEffect;
-    #onValueChange(val) {
-        this.value = val;
-        this.propagateChange(this.value);
-    }
-    #setOptions(options, translate) {
-        if (translate) {
-            this._options.set(options.map((o) => ({
-                label: this.translate.instant(o),
-                value: o
-            })));
-        }
-        else {
-            this._options.set(options.map((o) => ({
-                label: o,
-                value: o
-            })));
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-        this.fc.setValue(value, { emitEvent: false });
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.fc.disable();
-        }
-        else {
-            this.fc.enable();
-        }
-        this.disabled = isDisabled;
-    }
-    ngOnInit() {
-        if (this.required)
-            this.fc.setValidators(Validators.required);
-        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
-            this.errorState = FormUtils.getErrorState(this.fc);
-            if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.fc.errors);
-            }
-        });
-        this.fc.updateValueAndValidity();
-        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
-    }
-    ngOnDestroy() {
-        super.onNgOnDestroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CatalogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
-        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
-
-/**
- * Form element for selecting one or multiple i18n catalog values.
- * Having a classification of `i18n:catalog[one, two, three]` configured on the metadata field
- * will automatically populate the options from the catalog. The options will be translated
- * using the catalogs static values adding a prefix, the property name an the value itself.
- * E.g. for property name `status` and option value `open` the label key will be `catalog:status:open_label`.
- */
-class I18nCatalogComponent extends AbstractMatFormField {
-    #system;
-    #dRef;
-    #optionsEffect;
-    #classificationEffect;
-    constructor() {
-        super();
-        this.#system = inject(SystemService);
-        this.#dRef = inject(DestroyRef);
-        this.translate = inject(TranslateService);
-        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        this.propertyName = input(undefined, ...(ngDevMode ? [{ debugName: "propertyName" }] : /* istanbul ignore next */ []));
-        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.#optionsEffect = effect(() => {
-            untracked(() => {
-                this.#setOptions(this.options());
-            });
-        }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Additional semantics for the form element.
-         */
-        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
-        this.#classificationEffect = effect(() => {
-            const cls = this.classifications();
-            untracked(() => {
-                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG_I18N);
-                if (ce && ce.options) {
-                    this.#setOptions(ce.options);
-                }
-            });
-        }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
-         */
-        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
-        this.ngControl = injectNgControl(this);
-        this.fc = new FormControl(undefined);
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.propagateChange = (_) => { };
-        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
-            // re-apply options to trigger translation
-            this.#setOptions(this.options());
-        });
-    }
-    #onValueChange(val) {
-        this.value = val;
-        this.propagateChange(this.value);
-    }
-    #setOptions(options) {
-        this._options.set(options.map((o) => ({
-            label: this.#translateOption(o),
-            value: o
-        })));
-    }
-    #translateOption(option) {
-        // labelkey: 'catalog:status:open_label' for option 'open'
-        // This will be derived fom a prefix the property name if available and this option itself
-        return this.#system.getLocalizedLabel(`catalog:${this.propertyName() || ''}:${option}`) || option;
-    }
-    writeValue(value) {
-        this.value = value;
-        this.fc.setValue(value, { emitEvent: false });
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.fc.disable();
-        }
-        else {
-            this.fc.enable();
-        }
-        this.disabled = isDisabled;
-    }
-    ngOnInit() {
-        if (this.required)
-            this.fc.setValidators(Validators.required);
-        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
-            this.errorState = FormUtils.getErrorState(this.fc);
-            if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.fc.errors);
-            }
-        });
-        this.fc.updateValueAndValidity();
-        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
-    }
-    ngOnDestroy() {
-        super.onNgOnDestroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: I18nCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: I18nCatalogComponent, isStandalone: true, selector: "yuv-i18n-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: I18nCatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: I18nCatalogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-i18n-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: I18nCatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>" }]
-        }], ctorParameters: () => [], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], propertyName: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
-
 const formElementCmps = [
     StringComponent,
     NumberComponent,
@@ -2263,6 +2349,7 @@ const formElementCmps = [
     OrganizationComponent,
     StringComponent,
     CatalogComponent,
+    DynamicCatalogComponent,
     I18nCatalogComponent
 ];
 /**
@@ -2278,6 +2365,7 @@ class YuvFormsModule {
             OrganizationComponent,
             StringComponent,
             CatalogComponent,
+            DynamicCatalogComponent,
             I18nCatalogComponent], exports: [StringComponent,
             NumberComponent,
             NumberRangeComponent,
@@ -2286,6 +2374,7 @@ class YuvFormsModule {
             OrganizationComponent,
             StringComponent,
             CatalogComponent,
+            DynamicCatalogComponent,
             I18nCatalogComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvFormsModule, imports: [formElementCmps] }); }
 }
@@ -2301,5 +2390,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map