@yuuvis/client-framework 3.16.0 → 3.17.0

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

@@ -6,7 +6,7 @@ import { FormControl, Validators, ReactiveFormsModule, FormBuilder, NG_VALUE_ACC
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
 import * as i1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import { SystemService, TranslateService, Classification, TranslatePipe, Situation, Operator, OperatorLabel, Utils, CatalogService, LocaleNumberPipe, FileSizePipe, IdmService, UserService, SearchUtils, LocaleDatePipe, SearchService, DmsService, ObjectConfigService, DmsObject, BaseObjectTypeField, ClassificationPrefix } from '@yuuvis/client-core';
+import { SystemService, TranslateService, Classification, TranslatePipe, Situation, Operator, OperatorLabel, Utils, CatalogService, LocaleNumberPipe, FileSizePipe, IdmService, UserService, AppCacheService, FREE_TEXT_OPTION, USER_ID_REGEX, STORAGE_ROLES_KEY, SearchUtils, LocaleDatePipe, SearchService, DmsService, ObjectConfigService, DmsObject, BaseObjectTypeField, ClassificationPrefix } from '@yuuvis/client-core';
 import { AbstractMatFormField, injectNgControl, FormTranslateService, DialogComponent, ScrollButtonsComponent } from '@yuuvis/client-framework/common';
 import * as i1$3 from '@angular/common';
 import { NgClass, CommonModule } from '@angular/common';
@@ -32,9 +32,9 @@ import * as i2$1 from '@yuuvis/client-framework/datepicker';
 import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framework/datepicker';
 import * as i2$2 from '@yuuvis/client-framework/autocomplete';
 import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
-import { map as map$1, catchError } from 'rxjs/operators';
-import { ShellService } from '@yuuvis/client-shell-core';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { map as map$1, switchMap, catchError } from 'rxjs/operators';
+import { ShellService } from '@yuuvis/client-shell-core';
 import * as i1$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
@@ -292,7 +292,6 @@ class DataGridComponent {
         this.selectedRow = signal(null, ...(ngDevMode ? [{ debugName: "selectedRow" }] : /* istanbul ignore next */ []));
         this.isRequired = false;
         this.isInvalid = false;
-        this.initalTableUpdate = true;
         this.icons = {
             add: YUV_ICONS.add,
             more: YUV_ICONS.more
@@ -310,38 +309,13 @@ class DataGridComponent {
             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'
-            // therefore we need to map them here for proper table rendering
-            if (formElement && formElement['columnDefinitions']) {
-                // map columnDefinitions to elements for table rendering
-                formElement['elements'] = formElement['columnDefinitions'].map((colDef) => ({
-                    ...colDef,
-                    name: colDef.id,
-                    label: this.#systemService.getLocalizedLabel(colDef.id) || colDef.id,
-                    type: colDef.propertyType
-                }));
-            }
+            const elements = this.#resolveElements(formElement);
             this.mappedFormElement.set(formElement);
-            const elements = formElement ? formElement['elements'] || [] : [];
-            let data = formElement ? formElement['value'] || [] : [];
-            const columns = elements.map((e) => e.name || e.id);
-            data = data.map((row) => {
-                if (Array.isArray(row)) {
-                    const obj = {};
-                    for (let i = 0; i < columns.length; i++) {
-                        obj[columns[i]] = row[i];
-                    }
-                    return obj;
-                }
-                return row;
-            });
+            const data = this.#toRowObjects(formElement ? formElement['value'] || [] : [], elements);
+            // rendering only — the value already lives in the form model, so a (re)bind
+            // of the formElement input must never propagate back or dirty the control
             untracked(() => formElement && this.#updateTable(elements, data));
         }, ...(ngDevMode ? [{ debugName: "#loadData" }] : /* istanbul ignore next */ []));
-        this.#sourceData = effect(() => {
-            const dataSource = this.dataSource();
-            !this.initalTableUpdate && this.writeValue(dataSource.filter((row) => !row.isAddRow));
-            this.initalTableUpdate = false;
-        }, ...(ngDevMode ? [{ debugName: "#sourceData" }] : /* istanbul ignore next */ []));
         this.propagateChange = () => { };
         this.onTouched = () => { };
     }
@@ -349,7 +323,36 @@ class DataGridComponent {
     #systemService;
     #cdRef;
     #loadData;
-    #sourceData;
+    // if the form element is created from the ObjectTypeField it contains 'columnDefinitions' instead of 'elements'
+    // therefore we need to map them here for proper table rendering
+    #resolveElements(formElement) {
+        if (!formElement)
+            return [];
+        if (formElement['columnDefinitions']) {
+            formElement['elements'] = formElement['columnDefinitions'].map((colDef) => ({
+                ...colDef,
+                name: colDef.id,
+                label: this.#systemService.getLocalizedLabel(colDef.id) || colDef.id,
+                type: colDef.propertyType
+            }));
+        }
+        return formElement['elements'] || [];
+    }
+    // table values may arrive as 2D arrays ([[a, b], ...]); map them to row objects
+    // keyed by the column names so the table can render them
+    #toRowObjects(data, elements) {
+        const columns = elements.map((e) => e.name || e.id);
+        return data.map((row) => {
+            if (Array.isArray(row)) {
+                const obj = {};
+                for (let i = 0; i < columns.length; i++) {
+                    obj[columns[i]] = row[i];
+                }
+                return obj;
+            }
+            return row;
+        });
+    }
     #openEditOverlay(elementData, adding = false) {
         return this.#dialog
             .open(EditTableDataComponent, {
@@ -378,7 +381,10 @@ class DataGridComponent {
             if (result) {
                 const updatedData = this.dataSource().map((item) => JSON.stringify(item) === JSON.stringify(element) ? result : item);
                 const formElement = this.mappedFormElement();
-                formElement && this.#updateTable(formElement['elements'], [...updatedData]);
+                if (formElement) {
+                    this.#updateTable(formElement['elements'], [...updatedData]);
+                    this.#propagateRows();
+                }
             }
             this.selectedRow.set(null);
         });
@@ -390,14 +396,29 @@ class DataGridComponent {
             if (result) {
                 data.push(result);
                 const formElement = this.mappedFormElement();
-                formElement && this.#updateTable(formElement['elements'], data);
+                if (formElement) {
+                    this.#updateTable(formElement['elements'], data);
+                    this.#propagateRows();
+                }
             }
         });
     }
     removeRow(element) {
         const updatedData = this.dataSource().filter((item) => JSON.stringify(item) !== JSON.stringify(element));
         const formElement = this.mappedFormElement();
-        formElement && this.#updateTable(formElement['elements'], updatedData);
+        if (formElement) {
+            this.#updateTable(formElement['elements'], updatedData);
+            this.#propagateRows();
+        }
+    }
+    /**
+     * View → model, called from user-edit paths only (add/edit/remove row).
+     * The propagated value shape is the rendered one: an array of row objects
+     * keyed by column name ([{col1: a, col2: b}, ...]) — the same shape
+     * ObjectFormService.extractFormData() reads from the control.
+     */
+    #propagateRows() {
+        this.propagateChange(this.dataSource().filter((row) => !row.isAddRow));
     }
     #updateTable(elements, data = []) {
         if (elements.length > 0) {
@@ -425,8 +446,15 @@ class DataGridComponent {
         this.displayedColumnsWithActions.set(displayedColumns);
         this.dataSource.set(data);
     }
+    /**
+     * Model → view only. Renders the incoming value (row objects or 2D arrays,
+     * which are converted via the column definitions) into the table. Never
+     * propagates back to the model — programmatic writes (setValue/patchValue/
+     * reset) and rebinds must not change the control's value or dirty state.
+     */
     writeValue(obj) {
-        this.propagateChange(obj);
+        const elements = this.#resolveElements(this.formElement());
+        this.#updateTable(elements, this.#toRowObjects(Array.isArray(obj) ? obj : [], elements));
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -438,9 +466,6 @@ class DataGridComponent {
     setDisabledState(isDisabled) {
         // console.log('setDisabledState: ', isDisabled);
     }
-    onValueChange(e) {
-        this.propagateChange(e);
-    }
     validate(control) {
         //Has to be delayed here because form init in object-form.component is also delayed
         timer(300)
@@ -1598,28 +1623,28 @@ class OrganizationSetComponent extends AbstractMatFormField {
             return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: OrganizationSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "separatorKeys", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: OrganizationSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-organization-set', imports: [FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslatePipe$1], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
         }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], withMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "withMetadata", required: false }] }], autocompleteMinLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMinLength", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }] } });
 
-const mapOrganizationNode = (innerValue) => map$1((node) => node
-    .filter((e) => !innerValue?.some((value) => value?.id === e.id))
-    .map((e) => ({
-    label: e.title,
+const mapOrganizationNode = (innerValue) => map$1((nodes) => nodes
+    .filter((node) => !innerValue?.some((value) => value?.id === node.id))
+    .map((node) => ({
+    label: node.title,
     value: {
-        id: e.id,
-        title: e.title,
-        type: 'user' in e ? 'user' : 'role'
+        id: node.id,
+        title: node.title,
+        type: 'user' in node ? 'user' : 'role'
     }
 })));
 /**
  * Creates form input for organization values.
  *
  * @example
- * <yuv-organization [multiselect]="true"></yuv-organization>
+ * <yuv-organization [multiselect]="true" />
  */
 class OrganizationComponent extends AbstractMatFormField {
     constructor() {
@@ -1627,16 +1652,24 @@ class OrganizationComponent extends AbstractMatFormField {
         this.#system = inject(SystemService);
         this.#idmService = inject(IdmService);
         this.#userService = inject(UserService);
+        this.#appCache = inject(AppCacheService);
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
         this.minLength = 2;
         this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        /**
+         * ENTER only — organization titles contain commas (`Lastname, Firstname (username)`),
+         * so committing free text on COMMA would split a typed name into two chips.
+         */
+        this.separatorKeys = [ENTER];
         this.acFormControl = new FormControl(undefined);
         this.ngControl = injectNgControl(this);
         this._innerValue = [];
         this.autocompleteRes = [];
         /**
-         * 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.
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`.
+         * In search situation validation of the form element will be turned off,
+         * so you are able to enter search terms that do not meet the elements validators.
          */
         this.situation = input(undefined, ...(ngDevMode ? [{ debugName: "situation" }] : /* istanbul ignore next */ []));
         /**
@@ -1648,9 +1681,9 @@ class OrganizationComponent extends AbstractMatFormField {
          */
         // #organizationType: Classification = Classification.STRING_ORGANIZATION;
         this.#organizationType = computed(() => {
-            const c = this.classifications();
-            if (c?.length) {
-                const classifications = this.#system.getClassifications(c);
+            const classificationsInput = this.classifications();
+            if (classificationsInput?.length) {
+                const classifications = this.#system.getClassifications(classificationsInput);
                 if (classifications.has(Classification.STRING_ORGANIZATION_SET)) {
                     return Classification.STRING_ORGANIZATION_SET;
                 }
@@ -1658,20 +1691,26 @@ class OrganizationComponent extends AbstractMatFormField {
             return Classification.STRING_ORGANIZATION;
         }, ...(ngDevMode ? [{ debugName: "#organizationType" }] : /* istanbul ignore next */ []));
         this.classifications = input(undefined, ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
-        this.#filterRoles = computed(() => {
-            const t = this.#organizationType();
-            const c = this.classifications();
-            if (c?.length) {
-                const classifications = this.#system.getClassifications(c);
-                if (t === Classification.STRING_ORGANIZATION) {
+        /**
+         * Options of the organization classification, e.g. `['user', 'role']` for
+         * `id:organization:set[user,role]`.
+         */
+        this.#classificationOptions = computed(() => {
+            const orgaType = this.#organizationType();
+            const classificationsInput = this.classifications();
+            if (classificationsInput?.length) {
+                const classifications = this.#system.getClassifications(classificationsInput);
+                if (orgaType === Classification.STRING_ORGANIZATION) {
                     return classifications.get(Classification.STRING_ORGANIZATION).options;
                 }
-                else if (t === Classification.STRING_ORGANIZATION_SET) {
+                else if (orgaType === Classification.STRING_ORGANIZATION_SET) {
                     return classifications.get(Classification.STRING_ORGANIZATION_SET).options;
                 }
             }
             return [];
-        }, ...(ngDevMode ? [{ debugName: "#filterRoles" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "#classificationOptions" }] : /* istanbul ignore next */ []));
+        // The free text option is not a role — it must not end up in the /idm/users role filter.
+        this.#filterRoles = computed(() => this.#classificationOptions().filter((opt) => opt !== FREE_TEXT_OPTION), ...(ngDevMode ? [{ debugName: "#filterRoles" }] : /* istanbul ignore next */ []));
         /**
          * Will prevent the input from being changed (default: false)
          */
@@ -1685,15 +1724,23 @@ class OrganizationComponent extends AbstractMatFormField {
          * or, if set to false only the ID
          */
         this.withMetadata = input(false, ...(ngDevMode ? [{ debugName: "withMetadata" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether or not values that the autocomplete cannot resolve may be entered as free
+         * text (default: false). Can also be enabled per field through the `freeText` option
+         * of the organization classification, e.g. `id:organization[freeText]`.
+         */
+        this.allowFreeText = input(false, ...(ngDevMode ? [{ debugName: "allowFreeText" }] : /* istanbul ignore next */ []));
+        this.freeText = computed(() => this.allowFreeText() || this.#classificationOptions().includes(FREE_TEXT_OPTION), ...(ngDevMode ? [{ debugName: "freeText" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
     #system;
     #idmService;
     #userService;
+    #appCache;
     #dRef;
-    set innerValue(iv) {
-        this._innerValue = iv || [];
+    set innerValue(iValue) {
+        this._innerValue = iValue || [];
     }
     get innerValue() {
         return this._innerValue;
@@ -1703,6 +1750,12 @@ class OrganizationComponent extends AbstractMatFormField {
      */
     // #organizationType: Classification = Classification.STRING_ORGANIZATION;
     #organizationType;
+    /**
+     * Options of the organization classification, e.g. `['user', 'role']` for
+     * `id:organization:set[user,role]`.
+     */
+    #classificationOptions;
+    // The free text option is not a role — it must not end up in the /idm/users role filter.
     #filterRoles;
     writeValue(value) {
         this.value = value;
@@ -1725,10 +1778,6 @@ class OrganizationComponent extends AbstractMatFormField {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    propagate() {
-        this.value = this.#getPropagateValue();
-        this.propagateChange(this.value);
-    }
     setDisabledState(isDisabled) {
         if (isDisabled) {
             this.acFormControl.disable();
@@ -1738,65 +1787,16 @@ 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);
-        return this.multiselect() ? value : value[0];
-    }
     resolveFn(value) {
-        // check if entry is a user
-        const userRegExp = new RegExp('^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$');
-        const tasks = value.map((v) => v.match(userRegExp)
-            ? this.#idmService.getUserById(v).pipe(map$1((res) => {
-                return res
-                    ? {
-                        id: res.id,
-                        title: res.title,
-                        type: 'user'
-                    }
-                    : {
-                        id: v,
-                        title: v,
-                        type: 'user',
-                        notFound: true
-                    };
-            }))
-            : of({
-                id: v,
-                title: v,
-                type: 'role'
-            }));
-        forkJoin(tasks).subscribe((data) => {
+        // Free text and role names are both plain strings on the wire, so telling them apart
+        // requires the role catalog. Only load it when free text is actually enabled.
+        const roleNames$ = this.freeText() ? this.#roleNames() : of(null);
+        roleNames$
+            .pipe(switchMap((roleNames) => forkJoin(value.map((v) => this.#resolveEntry(v, roleNames)))), takeUntilDestroyed(this.#dRef))
+            .subscribe((data) => {
             this.#updateAutocompleteControl(data);
         });
     }
-    #updateAutocompleteControl(data) {
-        this.innerValue = data;
-        const mapped = this.innerValue.map((n) => ({
-            label: n.title,
-            value: n
-        }));
-        this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
-        this.acFormControl.updateValueAndValidity({ emitEvent: false });
-    }
-    #resolveOrganization(query, excludeMe, filterRoles) {
-        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
-    }
-    #resolveOrganizationSet(query, filterRoles) {
-        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
-    }
-    #getMetadataString(value) {
-        try {
-            if (Array.isArray(value)) {
-                return value.map((v) => JSON.parse(v));
-            }
-            else {
-                return JSON.parse(value);
-            }
-        }
-        catch (e) {
-            return undefined;
-        }
-    }
     autocompleteFn(query) {
         if (query.length >= this.minLength) {
             this.busy.set(true);
@@ -1824,18 +1824,126 @@ class OrganizationComponent extends AbstractMatFormField {
             }
         });
         this.acFormControl.updateValueAndValidity({ emitEvent: false });
-        this.acFormControl.valueChanges.subscribe((v) => {
+        this.acFormControl.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
             if (!Array.isArray(v))
                 v = v ? [v] : [];
-            this.innerValue = v.map((i) => i.value);
+            this.innerValue = v.map((i) => this.#toNode(i));
             this.propagate();
         });
     }
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
+    #resolveEntry(value, roleNames) {
+        // check if entry is a user
+        if (USER_ID_REGEX.test(value)) {
+            return this.#idmService.getUserById(value).pipe(map$1((res) => {
+                return res
+                    ? {
+                        id: res.id,
+                        title: res.title,
+                        type: 'user'
+                    }
+                    : {
+                        id: value,
+                        title: value,
+                        type: 'user',
+                        notFound: true
+                    };
+            }));
+        }
+        // Roles are a closed set, so a value the catalog does not know can only have been typed.
+        if (roleNames && !roleNames.includes(value)) {
+            return of({
+                id: value,
+                title: value,
+                type: 'text'
+            });
+        }
+        return of({
+            id: value,
+            title: value,
+            type: 'role'
+        });
+    }
+    /**
+     * Role names from the shared cache, falling back to IDM. Mirrors the organization
+     * renderer so both sides partition stored values identically and share one request.
+     */
+    #roleNames() {
+        return this.#appCache.getItem(STORAGE_ROLES_KEY).pipe(switchMap((cachedRoles) => cachedRoles
+            ? of(cachedRoles)
+            : this.#idmService.getRoles().pipe(
+            // Only persist when the backend actually returned something — caching an
+            // empty array would mask later successful fetches.
+            switchMap((roles) => roles.length ? this.#appCache.setItem(STORAGE_ROLES_KEY, roles).pipe(map$1(() => roles)) : of(roles)))), map$1((roles) => roles.map((role) => role.name)), catchError(() => of([])));
+    }
+    #getPropagateValue() {
+        const value = this.innerValue.map((v) => this.withMetadata()
+            ? // `text` is a client-side distinction only — the stored value stays a plain string and
+                // the metadata `type` keeps its existing vocabulary, so no consumer sees a new value.
+                // Trade-off: in metadata mode free text is not marked as such again after a reload.
+                JSON.stringify({ id: v.id, title: v.title, type: v.type === 'text' ? 'role' : v.type })
+            : v.id);
+        return this.multiselect() ? value : value[0];
+    }
+    /**
+     * The autocomplete emits free text as a raw string instead of a node, so it has to be
+     * lifted back into an {@link OrganizationNode} before it reaches the form control value.
+     */
+    #toNode(item) {
+        return typeof item.value === 'string'
+            ? { id: item.value, title: item.value, type: 'text' }
+            : item.value;
+    }
+    #updateAutocompleteControl(data) {
+        this.innerValue = data;
+        const freeTextHint = this.translate.instant('yuv.form.element.organization.freetext.tooltip');
+        const mapped = this.innerValue.map((iVal) => ({
+            label: iVal.title,
+            value: iVal,
+            // Marks stored free text as such again, so the chip looks the same before and after reload.
+            custom: iVal.type === 'text',
+            hint: iVal.type === 'text' ? freeTextHint : undefined
+        }));
+        this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
+        this.acFormControl.updateValueAndValidity({ emitEvent: false });
+    }
+    #resolveOrganization(query, excludeMe, filterRoles) {
+        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
+    }
+    #resolveOrganizationSet(query, filterRoles) {
+        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
+    }
+    #getMetadataString(value) {
+        try {
+            if (Array.isArray(value)) {
+                const parsed = value.map((val) => JSON.parse(val));
+                return parsed.every((entry) => this.#isMetadata(entry)) ? parsed : undefined;
+            }
+            else {
+                const parsed = JSON.parse(value);
+                return this.#isMetadata(parsed) ? parsed : undefined;
+            }
+        }
+        catch (error) {
+            return undefined;
+        }
+    }
+    /**
+     * Guards against plain values that happen to be valid JSON — free text like `42`, `true`
+     * or `[1,2]` would otherwise be mistaken for metadata and yield a chip without id/title.
+     * Deliberately permissive about the id's runtime type so real metadata is never rejected.
+     */
+    #isMetadata(parsed) {
+        return !!parsed && typeof parsed === 'object' && !Array.isArray(parsed) && 'id' in parsed;
+    }
+    propagate() {
+        this.value = this.#getPropagateValue();
+        this.propagateChange(this.value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", 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]=\"!freeText()\"\n  [distinctValues]=\"true\"\n  [separatorKeys]=\"separatorKeys\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "separatorKeys", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
@@ -1847,8 +1955,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         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 }] }] } });
+                    ], 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]=\"!freeText()\"\n  [distinctValues]=\"true\"\n  [separatorKeys]=\"separatorKeys\"\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 }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: false }] }] } });
 
 class DateRangePickerComponent {
     constructor() {
@@ -2402,7 +2510,7 @@ class ReferenceComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ReferenceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ReferenceComponent, isStandalone: true, selector: "yuv-reference", 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 }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxSuggestions: { classPropertyName: "maxSuggestions", publicName: "maxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: ReferenceComponent }], 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  [minLength]=\"minChars()\"\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=\"option\">{{ 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\" [class.notFound]=\"item.value.notFound\" [matTooltip]=\"item.value.title\">\n        {{ item.value.title || '...' }}\n        @if (canOpen(item.value)) {\n          <mat-icon\n            class=\"open ymt-icon--size-s\"\n            (click)=\"open(item.value); $event.stopPropagation()\"\n            [matTooltip]=\"'yuv.form.element.reference.open.title' | translate\"\n          >\n            open_in_new\n          </mat-icon>\n        }\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.reference.classify.icon.title' | translate\">link</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip{display:inline-flex;align-items:center;gap:.25em}:host .chip .open{cursor:pointer;color:var(--ymt-text-color-subtle)}:host .chip .open:hover{color:var(--ymt-primary)}: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:var(--ymt-on-danger-container);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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ReferenceComponent, isStandalone: true, selector: "yuv-reference", 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 }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxSuggestions: { classPropertyName: "maxSuggestions", publicName: "maxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: ReferenceComponent }], 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  [minLength]=\"minChars()\"\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=\"option\">{{ 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\" [class.notFound]=\"item.value.notFound\" [matTooltip]=\"item.value.title\">\n        {{ item.value.title || '...' }}\n        @if (canOpen(item.value)) {\n          <mat-icon\n            class=\"open ymt-icon--size-s\"\n            (click)=\"open(item.value); $event.stopPropagation()\"\n            [matTooltip]=\"'yuv.form.element.reference.open.title' | translate\"\n          >\n            open_in_new\n          </mat-icon>\n        }\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.reference.classify.icon.title' | translate\">link</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip{display:inline-flex;align-items:center;gap:.25em}:host .chip .open{cursor:pointer;color:var(--ymt-text-color-subtle)}:host .chip .open:hover{color:var(--ymt-primary)}: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:var(--ymt-on-danger-container);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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "separatorKeys", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ReferenceComponent, decorators: [{
             type: Component,