@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.0

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

@@ -1,21 +1,20 @@
-import * as i1$2 from '@angular/common';
-import { CommonModule, NgClass } from '@angular/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, Input, output, NgModule } 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 i3 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/menu';
+import * as i1$1 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i4 from '@angular/material/table';
+import * as i3 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i5 from '@angular/material/tooltip';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@yuuvis/client-core';
-import { SystemService, Situation, TranslateModule, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, IdmService, UserService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
+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';
@@ -26,17 +25,17 @@ import { FormTranslateService, DialogComponent, AbstractMatFormField, injectNgCo
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
-import { TranslateService as TranslateService$1, TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
-import * as i2$2 from '@yuuvis/client-framework/datepicker';
+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$1 from '@angular/material/select';
+import * as i1$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$1 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';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i1$3 from '@angular/material/chips';
+import * as i1$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
 class EditTableDataComponent {
@@ -46,9 +45,9 @@ class EditTableDataComponent {
         this.#errorMessage = inject(FormTranslateService);
         this.#dialogData = inject(MAT_DIALOG_DATA);
         this.#dialogRef = inject((MatDialogRef));
-        this.errorMessage = signal(null);
+        this.errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
         this.tableForm = this.#fb.group({});
-        this.isInnerTableForm = input(true);
+        this.isInnerTableForm = input(true, ...(ngDevMode ? [{ debugName: "isInnerTableForm" }] : []));
         this.formElement = this.#dialogData.formElement || {};
         this.columns = (this.formElement['elements'] || []).map((c) => ({
             ...c,
@@ -84,7 +83,9 @@ class EditTableDataComponent {
         this.tableForm.valueChanges.subscribe((v) => {
             this.errorMessage.set(this.tableForm.errors
                 ? Object.keys(this.tableForm.errors).map((key) => this.tableForm.errors && this.tableForm.errors[key]
-                    ? Object.keys(this.tableForm.errors[key]).map((k) => ({ [key]: this.#errorMessage.getErrorLabel(k, key) }))
+                    ? Object.keys(this.tableForm.errors[key]).map((k) => ({
+                        [key]: this.#errorMessage.getErrorLabel(k, key)
+                    }))
                     : null)
                 : null);
         });
@@ -112,26 +113,25 @@ class EditTableDataComponent {
             return Object.keys(errors).length ? errors : null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditTableDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: EditTableDataComponent, isStandalone: true, selector: "yuv-edit-table-data", inputs: { isInnerTableForm: { classPropertyName: "isInnerTableForm", publicName: "isInnerTableForm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EditTableDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: EditTableDataComponent, isStandalone: true, selector: "yuv-edit-table-data", inputs: { isInnerTableForm: { classPropertyName: "isInnerTableForm", publicName: "isInnerTableForm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EditTableDataComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<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: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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: "19.2.20", ngImport: i0, type: EditTableDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EditTableDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-edit-table-data', standalone: true, imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         DialogComponent,
                         MatDialogModule,
                         MatButtonModule,
                         MatFormFieldModule,
                         MetadataFormFieldComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         YmtButtonDirective
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -140,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             multi: true
                         }
                     ], 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"] }]
-        }] });
+        }], propDecorators: { isInnerTableForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInnerTableForm", required: false }] }] } });
 
 var DataGridSizeType;
 (function (DataGridSizeType) {
@@ -159,21 +159,23 @@ class DataGridComponent {
         this.translate = inject(TranslateService);
         this.#cdRef = inject(ChangeDetectorRef);
         this.el = inject((ElementRef));
-        this.situation = input(Situation.EDIT);
-        this.formElement = input(undefined);
-        this.mappedFormElement = signal(undefined);
-        this.formControl = input(undefined);
-        this.classifications = input([]);
-        this.readonly = input(false);
+        this.situation = input(Situation.EDIT, ...(ngDevMode ? [{ debugName: "situation" }] : []));
+        this.formElement = input(undefined, ...(ngDevMode ? [{ debugName: "formElement" }] : []));
+        this.mappedFormElement = signal(undefined, ...(ngDevMode ? [{ debugName: "mappedFormElement" }] : []));
+        this.formControl = input(undefined, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         // context to also apply form labels state (e.g. dirty, error) to the data grid label
-        this.formFieldContext = input();
-        this.size = input(DataGridSizeType.AUTO);
-        this.dataSource = signal([]);
+        this.formFieldContext = input(...(ngDevMode ? [undefined, { debugName: "formFieldContext" }] : []));
+        this.size = input(DataGridSizeType.AUTO, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.dataSource = signal([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         this.tableLabel = computed(() => {
             const formElement = this.formElement();
-            return formElement ? this.#systemService.getLocalizedResource(`${formElement['name']}_label`) : formElement && formElement['label'];
-        });
-        this.selectedRow = signal(null);
+            return formElement
+                ? this.#systemService.getLocalizedResource(`${formElement['name']}_label`)
+                : formElement && formElement['label'];
+        }, ...(ngDevMode ? [{ debugName: "tableLabel" }] : []));
+        this.selectedRow = signal(null, ...(ngDevMode ? [{ debugName: "selectedRow" }] : []));
         this.isRequired = false;
         this.isInvalid = false;
         this.initalTableUpdate = true;
@@ -181,21 +183,30 @@ class DataGridComponent {
             add: YUV_ICONS.add,
             more: YUV_ICONS.more
         };
-        this.displayedColumnsWithActions = linkedSignal({
-            source: this.readonly,
-            computation: (readonly, previous) => {
-                if (readonly) {
-                    const idx = (previous?.value || []).findIndex((c) => c === 'actions');
-                    if (idx && idx > -1)
-                        (previous?.value || []).splice(idx, 1);
+        this.displayedColumnsWithActions = linkedSignal(...(ngDevMode ? [{ debugName: "displayedColumnsWithActions", source: this.readonly,
+                computation: (readonly, previous) => {
+                    if (readonly) {
+                        const idx = (previous?.value || []).findIndex((c) => c === 'actions');
+                        if (idx && idx > -1)
+                            (previous?.value || []).splice(idx, 1);
+                    }
+                    return previous ? previous.value : [];
+                } }] : [{
+                source: this.readonly,
+                computation: (readonly, previous) => {
+                    if (readonly) {
+                        const idx = (previous?.value || []).findIndex((c) => c === 'actions');
+                        if (idx && idx > -1)
+                            (previous?.value || []).splice(idx, 1);
+                    }
+                    return previous ? previous.value : [];
                 }
-                return previous ? previous.value : [];
-            }
-        });
-        this.displayedColumns = linkedSignal({
-            source: this.readonly,
-            computation: (readonly, previous) => (readonly ? (previous?.value || []).filter((c) => c.columnDef !== 'actions') : previous?.value || [])
-        });
+            }]));
+        this.displayedColumns = linkedSignal(...(ngDevMode ? [{ debugName: "displayedColumns", source: this.readonly,
+                computation: (readonly, previous) => readonly ? (previous?.value || []).filter((c) => c.columnDef !== 'actions') : previous?.value || [] }] : [{
+                source: this.readonly,
+                computation: (readonly, previous) => readonly ? (previous?.value || []).filter((c) => c.columnDef !== 'actions') : previous?.value || []
+            }]));
         this.#loadData = effect(() => {
             const formElement = this.formElement();
             // if the form element is created from the ObjectTypeField it contains 'columnDefinitions' instead of 'elements'
@@ -224,12 +235,12 @@ class DataGridComponent {
                 return row;
             });
             untracked(() => formElement && this.#updateTable(elements, data));
-        });
+        }, ...(ngDevMode ? [{ debugName: "#loadData" }] : []));
         this.#sourceData = effect(() => {
             const dataSource = this.dataSource();
             !this.initalTableUpdate && this.writeValue(dataSource.filter((row) => !row.isAddRow));
             this.initalTableUpdate = false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "#sourceData" }] : []));
         this.propagateChange = () => { };
         this.onTouched = () => { };
     }
@@ -264,7 +275,7 @@ class DataGridComponent {
         this.selectedRow.set(element);
         this.#openEditOverlay(element).subscribe((result) => {
             if (result) {
-                const updatedData = this.dataSource().map((item) => (JSON.stringify(item) === JSON.stringify(element) ? result : item));
+                const updatedData = this.dataSource().map((item) => JSON.stringify(item) === JSON.stringify(element) ? result : item);
                 const formElement = this.mappedFormElement();
                 formElement && this.#updateTable(formElement['elements'], [...updatedData]);
             }
@@ -350,8 +361,8 @@ class DataGridComponent {
             return;
         this.onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DataGridComponent, isStandalone: true, selector: "yuv-data-grid", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, formElement: { classPropertyName: "formElement", publicName: "formElement", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, formFieldContext: { classPropertyName: "formFieldContext", publicName: "formFieldContext", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, classAttribute: "yuv-data-grid" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DataGridComponent, isStandalone: true, selector: "yuv-data-grid", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, formElement: { classPropertyName: "formElement", publicName: "formElement", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, formFieldContext: { classPropertyName: "formFieldContext", publicName: "formFieldContext", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, classAttribute: "yuv-data-grid" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DataGridComponent),
@@ -362,11 +373,18 @@ 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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$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: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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"] }], 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$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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-data-grid', standalone: true, imports: [NgClass, TranslateModule, ...MATERIAL, RendererDirective, ObjectMetadataElementLabelDirective, YmtIconButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'yuv-data-grid', standalone: true, imports: [
+                        NgClass,
+                        TranslatePipe,
+                        ...MATERIAL,
+                        RendererDirective,
+                        ObjectMetadataElementLabelDirective,
+                        YmtIconButtonDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DataGridComponent),
@@ -381,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         class: 'yuv-data-grid',
                         '(focusout)': 'onHostFocusOut($event)'
                     }, 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) {
@@ -397,27 +415,27 @@ class DatetimeComponent extends AbstractMatFormField {
         this.pickerCmp = viewChild.required(DatepickerComponent);
         this.ngControl = injectNgControl(this);
         this.fc = new FormControl(null);
-        this._locale = signal(this.translate.currentLang);
-        this.locale = input(this.translate.currentLang);
+        this._locale = signal(this.translate.getCurrentLang(), ...(ngDevMode ? [{ debugName: "_locale" }] : []));
+        this.locale = input(this.translate.getCurrentLang(), ...(ngDevMode ? [{ debugName: "locale" }] : []));
         this.#localeEffect = effect(() => {
-            this._locale.set(this.locale() || this.translate.currentLang);
-        });
+            this._locale.set(this.locale() || this.translate.getCurrentLang());
+        }, ...(ngDevMode ? [{ debugName: "#localeEffect" }] : []));
         /**
          * Whether or not to allow only values in the future (default: false)
          */
-        this.onlyFutureDates = input(false);
+        this.onlyFutureDates = input(false, ...(ngDevMode ? [{ debugName: "onlyFutureDates" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = input(false);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         /**
          * Whether to show the calendar icon that opens the date picker calendar (default: true)
          */
-        this.calendar = input(true);
+        this.calendar = input(true, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
         /**
          * Enables setting time as well (default: false)
          */
-        this.withTime = input(false);
+        this.withTime = input(false, ...(ngDevMode ? [{ debugName: "withTime" }] : []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
@@ -496,13 +514,13 @@ class DatetimeComponent extends AbstractMatFormField {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", 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$2.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", 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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-datetime', standalone: true, imports: [ReactiveFormsModule, YuvDatepickerModule, MatInputModule, MatDatepickerModule], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [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"] }]
-        }] });
+        }], propDecorators: { pickerCmp: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DatepickerComponent), { isSignal: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], onlyFutureDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyFutureDates", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }] } });
 
 class DatetimeRangeComponent extends AbstractMatFormField {
     constructor() {
@@ -511,17 +529,17 @@ class DatetimeRangeComponent extends AbstractMatFormField {
         /**
          * Enables setting time as well (default: false)
          */
-        this.withTimeInput = input(false, { alias: 'withTime' });
-        this.withTime = linkedSignal(this.withTimeInput);
+        this.withTimeInput = input(false, ...(ngDevMode ? [{ debugName: "withTimeInput", alias: 'withTime' }] : [{ alias: 'withTime' }]));
+        this.withTime = linkedSignal(this.withTimeInput, ...(ngDevMode ? [{ debugName: "withTime" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = input(false);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         // TODO: this should be set by the form and not by the consumer of the component,
         // otherwise there would be two sources of truth for the situation (one in the form and one in the component)
         // also not used!!!!
-        this.operator = input(Operator.EQUAL);
-        this.situation = input();
+        this.operator = input(Operator.EQUAL, ...(ngDevMode ? [{ debugName: "operator" }] : []));
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : []));
         this._isValid = true;
         this.ngControl = injectNgControl(this);
         // options for search situation
@@ -660,13 +678,13 @@ class DatetimeRangeComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatetimeRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatetimeRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimeComponent, selector: "yuv-datetime", inputs: ["locale", "onlyFutureDates", "readonly", "calendar", "withTime"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatetimeRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatetimeRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-datetime-range', standalone: true, imports: [CommonModule, 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"] }]
-        }] });
+            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;
 /**
@@ -691,46 +709,46 @@ class NumberComponent extends AbstractMatFormField {
         /**
          * Number of decimal places
          */
-        this.scale = input(undefined);
-        this.#scale = computed(() => Math.min(this.scale() || 0, 30));
+        this.scale = input(undefined, ...(ngDevMode ? [{ debugName: "scale" }] : []));
+        this.#scale = computed(() => Math.min(this.scale() || 0, 30), ...(ngDevMode ? [{ debugName: "#scale" }] : []));
         /**
          * Overall amount of digits allowed (including decimal places)
          */
-        this.precision = input(undefined);
-        this.#precision = computed(() => Math.min(this.precision() || 100, 100));
+        this.precision = input(undefined, ...(ngDevMode ? [{ debugName: "precision" }] : []));
+        this.#precision = computed(() => Math.min(this.precision() || 100, 100), ...(ngDevMode ? [{ debugName: "#precision" }] : []));
         /**
          *  Set to true to group number by pattern
          */
-        this.grouping = input(false);
-        this.#grouping = computed(() => this.grouping() ?? true);
+        this.grouping = input(false, ...(ngDevMode ? [{ debugName: "grouping" }] : []));
+        this.#grouping = computed(() => this.grouping() ?? true, ...(ngDevMode ? [{ debugName: "#grouping" }] : []));
         /**
          * The pattern to group number value by
          */
-        this.groupPattern = input(undefined);
+        this.groupPattern = input(undefined, ...(ngDevMode ? [{ debugName: "groupPattern" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = input(false);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         /**
          * set minimum input value
          */
-        this.minValue = input(undefined);
+        this.minValue = input(undefined, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
         /**
          * set maximum input value
          *
          */
-        this.maxValue = input(undefined);
+        this.maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
         /**
          * classification property adds some semantics to the value of this component.
          * If you provide a value of `filesize` numbers typed into the control will be
          * handled like file sizes (calculates differnt units)
          */
-        this.classifications = input([]);
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : []));
         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" }] : []));
         // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
@@ -848,14 +866,14 @@ class NumberComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: NumberComponent, isStandalone: true, selector: "yuv-number", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, groupPattern: { classPropertyName: "groupPattern", publicName: "groupPattern", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: NumberComponent }], usesInheritance: true, ngImport: i0, template: '<input type="string" [formControl]="innerCtrl" (focus)="unformat()" (blur)="format()" [readonly]="readonly()" />', isInline: true, styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 _a = NumberComponent;
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-number', standalone: true, imports: [ReactiveFormsModule], template: '<input type="string" [formControl]="innerCtrl" (focus)="unformat()" (blur)="format()" [readonly]="readonly()" />', providers: [{ provide: MatFormFieldControl, useExisting: NumberComponent }], styles: [":host{display:flex}:host input{width:100%;border:0;outline:0;background:transparent}\n"] }]
-        }] });
+        }], 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 }] }], groupPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPattern", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }] } });
 
 /**
  * Creates form input for ranges of numeric values.
@@ -870,21 +888,42 @@ class NumberRangeComponent extends AbstractMatFormField {
     constructor() {
         super(...arguments);
         this.#dRef = inject(DestroyRef);
+        /**
+         * Number of decimal places
+         */
+        this.scale = input(undefined, ...(ngDevMode ? [{ debugName: "scale" }] : []));
+        /**
+         * Overall amount of digits allowed (including decimal places)
+         */
+        this.precision = input(undefined, ...(ngDevMode ? [{ debugName: "precision" }] : []));
         /**
          *  Set to true to group number by pattern
          */
-        this.grouping = false;
+        this.grouping = input(false, ...(ngDevMode ? [{ debugName: "grouping" }] : []));
+        /**
+         * The pattern to group number value by
+         */
+        this.pattern = input(undefined, ...(ngDevMode ? [{ debugName: "pattern" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = false;
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         /**
          * classification property adds some semantics to the value of this component.
          * If you provide a value of `filesize` numbers typed into the control will be
          * handled like file sizes (calculates differnt units)
          */
-        this.classifications = [];
-        this.situation = input(Situation.EDIT);
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : []));
+        /**
+         * set minimum input value
+         */
+        this.minValue = input(undefined, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
+        /**
+         * set maximum input value
+         *
+         */
+        this.maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
+        this.situation = input(Situation.EDIT, ...(ngDevMode ? [{ debugName: "situation" }] : []));
         this.isValid = true;
         this.ngControl = injectNgControl(this);
         // options for search situation
@@ -895,7 +934,10 @@ class NumberRangeComponent extends AbstractMatFormField {
             { label: OperatorLabel.INTERVAL_INCLUDE_BOTH, value: Operator.INTERVAL_INCLUDE_BOTH }
         ];
         this.rangeForm = new FormGroup({
-            numberValue: new FormControl(undefined, { nonNullable: true, validators: [Validators.required] }),
+            numberValue: new FormControl(undefined, {
+                nonNullable: true,
+                validators: [Validators.required]
+            }),
             operator: new FormControl(this.availableSearchOptions[1].value, { nonNullable: true }),
             numberValueFrom: new FormControl(undefined, { nonNullable: true })
         });
@@ -939,7 +981,10 @@ class NumberRangeComponent extends AbstractMatFormField {
         this.isValid = this.rangeForm.valid;
         const operator = this.rangeForm.value.operator;
         if (operator === Operator.INTERVAL_INCLUDE_BOTH) {
-            this.isValid = this.rangeForm.valid && this.rangeForm.value.numberValueFrom != null && this.rangeForm.value.numberValue != null;
+            this.isValid =
+                this.rangeForm.valid &&
+                    this.rangeForm.value.numberValueFrom != null &&
+                    this.rangeForm.value.numberValue != null;
             this.value = !this.isValid
                 ? {
                     operator,
@@ -1026,29 +1071,13 @@ class NumberRangeComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NumberRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: NumberRangeComponent, isStandalone: true, selector: "yuv-number-range", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: false, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: false, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: false, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, 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: "ngmodule", type: CommonModule }, { kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NumberRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NumberRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NumberRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-number-range', standalone: true, imports: [CommonModule, NumberComponent, MatSelectModule, FormsModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: NumberRangeComponent }], template: "<form class=\"yuv-number-range\" [formGroup]=\"rangeForm\">\n  @if (rangeForm.value.operator === 'gtelte') {\n    <yuv-number\n      class=\"first\"\n      [readonly]=\"readonly\"\n      [scale]=\"scale\"\n      [precision]=\"precision\"\n      [grouping]=\"grouping\"\n      [groupPattern]=\"pattern\"\n      formControlName=\"numberValueFrom\"\n      [classifications]=\"classifications\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n    ></yuv-number>\n  }\n\n  <mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" formControlName=\"operator\" [disabled]=\"readonly\">\n    @for (o of availableSearchOptions; track $index) {\n      <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n    }\n  </mat-select>\n\n  <yuv-number\n    [scale]=\"scale\"\n    [readonly]=\"readonly\"\n    [precision]=\"precision\"\n    [grouping]=\"grouping\"\n    [groupPattern]=\"pattern\"\n    formControlName=\"numberValue\"\n    [classifications]=\"classifications\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n  >\n  </yuv-number>\n</form>\n", styles: [":host>form{display:inline-flex;flex-flow:row nowrap;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: Input
-            }], precision: [{
-                type: Input
-            }], grouping: [{
-                type: Input
-            }], pattern: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], classifications: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }] } });
+            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 }] }] } });
 
 const mapOrganizationNode = (innerValue) => map$1((node) => node
     .filter((e) => !innerValue?.some((value) => value?.id === e.id))
@@ -1075,7 +1104,7 @@ class OrganizationComponent extends AbstractMatFormField {
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
         this.minLength = 2;
-        this.busy = signal(false);
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
         this.acFormControl = new FormControl(undefined);
         this.ngControl = injectNgControl(this);
         this._innerValue = [];
@@ -1083,11 +1112,11 @@ class OrganizationComponent extends AbstractMatFormField {
         /**
          * 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);
+        this.situation = input(undefined, ...(ngDevMode ? [{ debugName: "situation" }] : []));
         /**
          * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
          */
-        this.multiselect = input(false);
+        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
         /**
          * Additional semantics for the form element.
          */
@@ -1101,8 +1130,8 @@ class OrganizationComponent extends AbstractMatFormField {
                 }
             }
             return Classification.STRING_ORGANIZATION;
-        });
-        this.classifications = input(undefined);
+        }, ...(ngDevMode ? [{ debugName: "#organizationType" }] : []));
+        this.classifications = input(undefined, ...(ngDevMode ? [{ debugName: "classifications" }] : []));
         this.#filterRoles = computed(() => {
             const t = this.#organizationType();
             const c = this.classifications();
@@ -1116,20 +1145,20 @@ class OrganizationComponent extends AbstractMatFormField {
                 }
             }
             return [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "#filterRoles" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = input(false);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         /**
          * Whether or not to exclude the current user from autocomplete result
          */
-        this.excludeMe = input(false);
+        this.excludeMe = input(false, ...(ngDevMode ? [{ debugName: "excludeMe" }] : []));
         /**
          * Whether or not the emitted value should be an object containing id and title
          * or, if set to false only the ID
          */
-        this.withMetadata = input(false);
+        this.withMetadata = input(false, ...(ngDevMode ? [{ debugName: "withMetadata" }] : []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
@@ -1184,7 +1213,7 @@ class OrganizationComponent extends AbstractMatFormField {
         this.disabled = isDisabled;
     }
     #getPropagateValue() {
-        const value = this.innerValue.map((v) => (this.withMetadata() ? JSON.stringify({ id: v.id, title: v.title, type: v.type }) : v.id));
+        const value = this.innerValue.map((v) => this.withMetadata() ? JSON.stringify({ id: v.id, title: v.title, type: v.type }) : v.id);
         return this.multiselect() ? value : value[0];
     }
     resolveFn(value) {
@@ -1232,7 +1261,7 @@ class OrganizationComponent extends AbstractMatFormField {
     #getMetadataString(value) {
         try {
             if (Array.isArray(value)) {
-                return value.map(v => JSON.parse(v));
+                return value.map((v) => JSON.parse(v));
             }
             else {
                 return JSON.parse(value);
@@ -1279,13 +1308,21 @@ class OrganizationComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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$2.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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: "19.2.20", ngImport: i0, type: OrganizationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslateModule], 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"] }]
-        }] });
+            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
@@ -1309,26 +1346,26 @@ class OrganizationSetComponent extends AbstractMatFormField {
         /**
          * 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);
+        this.situation = input(undefined, ...(ngDevMode ? [{ debugName: "situation" }] : []));
         /**
          * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
          */
-        this.multiselect = input(false);
+        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = input(false);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         /**
          * Whether or not the emitted value should be an object containing id and title
          * or, if set to false only the ID
          */
-        this.withMetadata = input(false);
+        this.withMetadata = input(false, ...(ngDevMode ? [{ debugName: "withMetadata" }] : []));
         /**
          * Minimum length of the autocomplete input before a query is sent to the server.
          */
-        this.autocompleteMinLength = input(2);
-        this.classifications = input(undefined);
-        this.types = input(undefined);
+        this.autocompleteMinLength = input(2, ...(ngDevMode ? [{ debugName: "autocompleteMinLength" }] : []));
+        this.classifications = input(undefined, ...(ngDevMode ? [{ debugName: "classifications" }] : []));
+        this.types = input(undefined, ...(ngDevMode ? [{ debugName: "types" }] : []));
         this.#targetTypes = linkedSignal(() => {
             const c = this.classifications();
             const types = this.types();
@@ -1342,8 +1379,8 @@ class OrganizationSetComponent extends AbstractMatFormField {
                 return types;
             }
             return [];
-        });
-        this.busy = signal(false);
+        }, ...(ngDevMode ? [{ debugName: "#targetTypes" }] : []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
         this.acFormControl = new FormControl(undefined);
         this.ngControl = injectNgControl(this);
         this.innerValue = [];
@@ -1435,21 +1472,13 @@ class OrganizationSetComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OrganizationSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", 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: CommonModule }, { 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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OrganizationSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OrganizationSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OrganizationSetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization-set', imports: [
-                        CommonModule,
-                        FormsModule,
-                        YuvAutocompleteModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        TranslateModule$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"] }]
-        }] });
+            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 }] }] } });
 
 class DateRangePickerComponent {
     constructor() {
@@ -1459,7 +1488,7 @@ class DateRangePickerComponent {
         this.form = this.#fb.group({
             range: this.#fb.control(this.#dialogData.range)
         });
-        this.range = input(this.#dialogData.range);
+        this.range = input(this.#dialogData.range, ...(ngDevMode ? [{ debugName: "range" }] : []));
         this.rangeChange = output();
         this.#rangeEffect = effect(() => {
             const range = this.range();
@@ -1468,7 +1497,7 @@ class DateRangePickerComponent {
                 return;
             }
             this.form.patchValue({ range });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#rangeEffect" }] : []));
     }
     #fb;
     #dialogData;
@@ -1478,13 +1507,13 @@ class DateRangePickerComponent {
         this.rangeChange.emit(this.form.value.range || undefined);
         this.#dialogRef.close(this.form.value.range);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", 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: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", 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],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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-date-range-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule, DatetimeRangeComponent, YmtButtonDirective, DialogComponent], 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"] }]
-        }] });
+            args: [{ selector: 'yuv-date-range-picker', standalone: true, imports: [ReactiveFormsModule, TranslatePipe, DatetimeRangeComponent, YmtButtonDirective, DialogComponent], 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"] }]
+        }], propDecorators: { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
 
 // marker for extracting translations for the available date range options
 marker('yuv.form.element.range-select-date.option.any');
@@ -1516,7 +1545,7 @@ class RangeSelectDateComponent extends AbstractMatFormField {
         this.#dialog = inject(MatDialog);
         this.#ANY_OPTION = 'any';
         this.#CUSTOM_OPTION = 'custom';
-        this.options = signal([]);
+        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.fc = new FormControl(this.#ANY_OPTION, {
             nonNullable: true
         });
@@ -1524,11 +1553,11 @@ class RangeSelectDateComponent extends AbstractMatFormField {
         /**
          * Range values to be used in the dropdown.
          */
-        this.ranges = input(['today', 'yesterday', 'thisWeek', 'thisMonth', 'thisYear']);
+        this.ranges = input(['today', 'yesterday', 'thisWeek', 'thisMonth', 'thisYear'], ...(ngDevMode ? [{ debugName: "ranges" }] : []));
         /**
          * Whether to show the custom date range option.
          */
-        this.customRange = input(true);
+        this.customRange = input(true, ...(ngDevMode ? [{ debugName: "customRange" }] : []));
         // ControlValueAccessor implementation
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
@@ -1649,13 +1678,13 @@ class RangeSelectDateComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RangeSelectDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RangeSelectDateComponent, isStandalone: true, selector: "yuv-range-select-date", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, customRange: { classPropertyName: "customRange", publicName: "customRange", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RangeSelectDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RangeSelectDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RangeSelectDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-range-select-date', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'yuv-range-select-date', standalone: true, imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectDateComponent }], template: "<mat-select [formControl]=\"fc\" [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }], customRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRange", required: false }] }] } });
 
 // marker for extracting translations for the available filesize range options
 marker('yuv.form.element.range-select-filesize.option.any');
@@ -1676,7 +1705,7 @@ class RangeSelectFilesizeComponent extends AbstractMatFormField {
         super();
         this.translate = inject(TranslateService$1);
         this.#ANY_OPTION = 'any';
-        this.options = signal([]);
+        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.fc = new FormControl(this.#ANY_OPTION, {
             nonNullable: true
         });
@@ -1684,7 +1713,7 @@ class RangeSelectFilesizeComponent extends AbstractMatFormField {
         /**
          * Range values to be used in the dropdown.
          */
-        this.ranges = input(['small', 'medium', 'large', 'verylarge']);
+        this.ranges = input(['small', 'medium', 'large', 'verylarge'], ...(ngDevMode ? [{ debugName: "ranges" }] : []));
         // ControlValueAccessor implementation
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
@@ -1732,13 +1761,13 @@ class RangeSelectFilesizeComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RangeSelectFilesizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RangeSelectFilesizeComponent, isStandalone: true, selector: "yuv-range-select-filesize", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RangeSelectFilesizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RangeSelectFilesizeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RangeSelectFilesizeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-range-select-filesize', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'yuv-range-select-filesize', standalone: true, imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }] } });
 
 /**
  * Creates form input for strings. Based on the input values different kinds of inputs will be generated.
@@ -1771,15 +1800,31 @@ class StringComponent extends AbstractMatFormField {
         /**
          * Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).
          */
-        this.multiselect = false;
+        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
         /**
          * Will prevent the input from being changed (default: false)
          */
-        this.readonly = false;
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         /**
          * Enable autofucus for the input (default: false)
          */
-        this.autofocus = false;
+        this.autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
+        /**
+         * 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" }] : []));
+        /**
+         * Regular expression to validate the input value against
+         */
+        this.regex = input(undefined, ...(ngDevMode ? [{ debugName: "regex" }] : []));
+        /**
+         * Minimal number of characters
+         */
+        this.minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : []));
+        /**
+         * Maximum number of characters
+         */
+        this.maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
         this.valid = false;
         this.validationErrors = [];
         this.#classifications = [];
@@ -1905,7 +1950,7 @@ class StringComponent extends AbstractMatFormField {
         }
     }
     validateClassification(string, classification) {
-        if (this.situation === Situation.SEARCH) {
+        if (this.situation() === Situation.SEARCH) {
             return true;
         }
         else {
@@ -1930,9 +1975,9 @@ class StringComponent extends AbstractMatFormField {
             const val = control.value;
             if (!val)
                 return null;
-            const multiCheck = (check) => !!(this.multiselect ? val : [val]).find((v) => check(v));
+            const multiCheck = (check) => !!(this.multiselect() ? val : [val]).find((v) => check(v));
             // validate regular expression
-            if (this.regex && multiCheck((v) => !RegExp(this.regex).test(v))) {
+            if (this.regex() && multiCheck((v) => !RegExp(this.regex()).test(v))) {
                 this.validationErrors.push({ key: 'regex' });
             }
             // validate classification settings
@@ -1945,19 +1990,21 @@ class StringComponent extends AbstractMatFormField {
             }
             // validate min length
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            if (!Utils.isEmpty(this.minLength) && multiCheck((v) => v.length < this.minLength)) {
-                this.validationErrors.push({ key: 'minlength', params: { minLength: this.minLength } });
+            const minLength = this.minLength();
+            if (!Utils.isEmpty(minLength) && multiCheck((v) => v.length < this.minLength())) {
+                this.validationErrors.push({ key: 'minlength', params: { minLength: minLength } });
             }
             // validate max length
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            if (!Utils.isEmpty(this.maxLength) && multiCheck((v) => v.length > this.maxLength)) {
-                this.validationErrors.push({ key: 'maxlength', params: { maxLength: this.maxLength } });
+            const maxLength = this.maxLength();
+            if (!Utils.isEmpty(maxLength) && multiCheck((v) => v.length > this.maxLength())) {
+                this.validationErrors.push({ key: 'maxlength', params: { maxLength: maxLength } });
             }
             // validate invalid if only whitespaces
             if (multiCheck((v) => v.length > 0 && !v.trim().length)) {
                 this.validationErrors.push({ key: 'onlyWhitespaces' });
             }
-            if (this.validationErrors.length && this.multiselect && this.value) {
+            if (this.validationErrors.length && this.multiselect() && this.value) {
                 // Setting maxEntryCountIfInvalid to the actual length of the value array to prevent the user to add more entries.
                 this.maxEntryCountIfInvalid = this.value.length;
             }
@@ -1986,8 +2033,8 @@ class StringComponent extends AbstractMatFormField {
         this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
     }
     ngAfterViewInit() {
-        if (this.autofocus) {
-            if (!this.multiselect) {
+        if (this.autofocus()) {
+            if (!this.multiselect()) {
                 const el = this.#elRef.nativeElement.querySelector(this.rows && this.rows > 1 ? 'textarea' : 'input');
                 if (el)
                     el.focus();
@@ -1997,33 +2044,19 @@ class StringComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, host: { properties: { "class.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: CommonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule, ScrollButtonsComponent], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], host: {
-                        '[class.readonly]': 'readonly'
-                    }, 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"] }]
-        }], propDecorators: { multiselect: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], readonly: [{
+            args: [{ selector: 'yuv-string', standalone: true, imports: [MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule, ScrollButtonsComponent], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], host: {
+                        '[class.readonly]': 'readonly()'
+                    }, 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"] }]
+        }], propDecorators: { multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], rows: [{
                 type: Input
-            }], autofocus: [{
+            }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], classifications: [{
                 type: Input
-            }], classifications: [{
-                type: Input
-            }], situation: [{
-                type: Input
-            }], regex: [{
-                type: Input
-            }], minLength: [{
-                type: Input
-            }], maxLength: [{
-                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() {
@@ -2031,19 +2064,19 @@ class CatalogComponent extends AbstractMatFormField {
         this.#system = inject(SystemService);
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
-        this.readonly = input(false);
-        this.multiple = input(false);
-        this._options = signal([]);
-        this.options = input([]);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.#optionsEffect = effect(() => {
             untracked(() => {
                 this.#setOptions(this.options() || [], false);
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : []));
         /**
          * Additional semantics for the form element.
          */
-        this.classifications = input([]);
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : []));
         this.#classificationEffect = effect(() => {
             const cls = this.classifications();
             untracked(() => {
@@ -2052,11 +2085,11 @@ class CatalogComponent extends AbstractMatFormField {
                     this.#setOptions(ce.options, false);
                 }
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : []));
         /**
          * 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();
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : []));
         this.ngControl = injectNgControl(this);
         this.fc = new FormControl(undefined);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -2117,13 +2150,13 @@ class CatalogComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: "19.2.20", ngImport: i0, type: CatalogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CatalogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-catalog', imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
-        }] });
+            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.
@@ -2142,20 +2175,20 @@ class I18nCatalogComponent extends AbstractMatFormField {
         this.#system = inject(SystemService);
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
-        this.readonly = input(false);
-        this.multiple = input(false);
-        this.propertyName = input(undefined);
-        this._options = signal([]);
-        this.options = input([]);
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.propertyName = input(undefined, ...(ngDevMode ? [{ debugName: "propertyName" }] : []));
+        this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.#optionsEffect = effect(() => {
             untracked(() => {
                 this.#setOptions(this.options());
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : []));
         /**
          * Additional semantics for the form element.
          */
-        this.classifications = input([]);
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : []));
         this.#classificationEffect = effect(() => {
             const cls = this.classifications();
             untracked(() => {
@@ -2164,11 +2197,11 @@ class I18nCatalogComponent extends AbstractMatFormField {
                     this.#setOptions(ce.options);
                 }
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : []));
         /**
          * 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();
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : []));
         this.ngControl = injectNgControl(this);
         this.fc = new FormControl(undefined);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -2226,13 +2259,13 @@ class I18nCatalogComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: I18nCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: I18nCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: "19.2.20", ngImport: i0, type: I18nCatalogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: I18nCatalogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-i18n-catalog', imports: [CommonModule, 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: () => [] });
+            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,
@@ -2249,8 +2282,8 @@ const formElementCmps = [
  * Module for the forms library.
  */
 class YuvFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuvFormsModule, imports: [StringComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvFormsModule, imports: [StringComponent,
             NumberComponent,
             NumberRangeComponent,
             DatetimeComponent,
@@ -2267,9 +2300,9 @@ class YuvFormsModule {
             StringComponent,
             CatalogComponent,
             I18nCatalogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvFormsModule, imports: [formElementCmps] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvFormsModule, imports: [formElementCmps] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...formElementCmps],