@yuuvis/client-framework 2.4.4 → 2.5.1

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

@@ -13,7 +13,7 @@ import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i2 from '@yuuvis/client-core';
-import { SystemService, Situation, TranslateModule, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, UserService, IdmService, YuvUser, SearchUtils, LocaleDatePipe, ClassificationPrefix } 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 { YUV_ICONS } from '@yuuvis/client-framework/icons';
 import { MetadataFormFieldComponent, ObjectMetadataElementLabelDirective } from '@yuuvis/client-framework/metadata-form';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
@@ -119,7 +119,7 @@ class EditTableDataComponent {
                 useExisting: forwardRef(() => EditTableDataComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'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: ["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 [headertitel]=\"'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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditTableDataComponent, decorators: [{
             type: Component,
@@ -197,7 +197,17 @@ class DataGridComponent {
         });
         this.#loadData = effect(() => {
             const formElement = this.formElement();
-            untracked(() => formElement && this.#updateTable(formElement['elements'], formElement['value'] || []));
+            const elements = formElement ? formElement['elements'] : [];
+            let data = formElement ? formElement['value'] || [] : [];
+            const columns = elements.map((e) => e.name);
+            data = data.map((row) => {
+                const obj = {};
+                for (let i = 0; i < columns.length; i++) {
+                    obj[columns[i]] = row[i];
+                }
+                return obj;
+            });
+            untracked(() => formElement && this.#updateTable(elements, data));
         });
         this.#sourceData = effect(() => {
             const dataSource = this.dataSource();
@@ -285,6 +295,7 @@ class DataGridComponent {
         }
         const displayedColumns = [...this.displayedColumns().map((col) => col.columnDef)];
         this.displayedColumnsWithActions.set(displayedColumns);
+        const cleandColumns = displayedColumns.filter((col) => col !== 'actions');
         this.dataSource.set(data);
     }
     writeValue(obj) {
@@ -999,16 +1010,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
-// function mapOrginationNode<T extends { id: string; title: string }, U extends { user: { id: string } }>(node: T[], innerValue: U[]) {
-//   return node
-//     .filter((e) => !innerValue?.some((value) => value.user.id === e.id))
-//     .map((user) => ({ label: user.title, value: { user, state: {} } }) as AutocompleteItem);
-// }
-const mapOrginationNode = (innerValue) => map$1((node) => node
-    .filter((e) => !innerValue?.some((value) => value.user.id === e.id))
-    .map((user) => ({ label: user.title, value: { user, state: {} } })));
+const mapOrganizationNode = (innerValue) => map$1((node) => node
+    .filter((e) => !innerValue?.some((value) => value?.id === e.id))
+    .map((e) => ({
+    label: e.title,
+    value: {
+        id: e.id,
+        title: e.title,
+        type: 'user' in e ? 'user' : 'role'
+    }
+})));
 /**
- * Creates form input for organisation values.
+ * Creates form input for organization values.
  *
  * @example
  * <yuv-organization [multiselect]="true"></yuv-organization>
@@ -1017,8 +1030,8 @@ class OrganizationComponent extends AbstractMatFormField {
     constructor() {
         super(...arguments);
         this.#system = inject(SystemService);
-        this.#userService = inject(UserService);
         this.#idmService = inject(IdmService);
+        this.#userService = inject(UserService);
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
         this.minLength = 2;
@@ -1038,25 +1051,31 @@ class OrganizationComponent extends AbstractMatFormField {
         /**
          * Additional semantics for the form element.
          */
-        this.#organizationType = Classification.STRING_ORGANIZATION;
+        // #organizationType: Classification = Classification.STRING_ORGANIZATION;
+        this.#organizationType = computed(() => {
+            const c = this.classifications();
+            if (c?.length) {
+                const classifications = this.#system.getClassifications(c);
+                if (classifications.has(Classification.STRING_ORGANIZATION_SET)) {
+                    return Classification.STRING_ORGANIZATION_SET;
+                }
+            }
+            return Classification.STRING_ORGANIZATION;
+        });
         this.classifications = input(undefined);
         this.#filterRoles = computed(() => {
+            const t = this.#organizationType();
             const c = this.classifications();
             if (c?.length) {
                 const classifications = this.#system.getClassifications(c);
-                if (classifications.has(Classification.STRING_ORGANIZATION)) {
-                    this.#organizationType = Classification.STRING_ORGANIZATION;
+                if (t === Classification.STRING_ORGANIZATION) {
                     return classifications.get(Classification.STRING_ORGANIZATION).options;
                 }
-                else if (classifications.has(Classification.STRING_ORGANIZATION_SET)) {
-                    this.#organizationType = Classification.STRING_ORGANIZATION_SET;
+                else if (t === Classification.STRING_ORGANIZATION_SET) {
                     return classifications.get(Classification.STRING_ORGANIZATION_SET).options;
                 }
-                return [];
-            }
-            else {
-                return [];
             }
+            return [];
         });
         /**
          * Will prevent the input from being changed (default: false)
@@ -1075,8 +1094,8 @@ class OrganizationComponent extends AbstractMatFormField {
         this.propagateChange = (_) => { };
     }
     #system;
-    #userService;
     #idmService;
+    #userService;
     #dRef;
     set innerValue(iv) {
         this._innerValue = iv || [];
@@ -1087,13 +1106,14 @@ class OrganizationComponent extends AbstractMatFormField {
     /**
      * Additional semantics for the form element.
      */
+    // #organizationType: Classification = Classification.STRING_ORGANIZATION;
     #organizationType;
     #filterRoles;
     writeValue(value) {
-        if (this.#organizationType === Classification.STRING_ORGANIZATION) {
+        if (this.#organizationType() === Classification.STRING_ORGANIZATION) {
             if (value) {
                 this.value = value;
-                this.resolveFn(value);
+                this.resolveFn(Array.isArray(value) ? value : [value]);
             }
             else {
                 this.value = null;
@@ -1101,12 +1121,8 @@ class OrganizationComponent extends AbstractMatFormField {
             }
         }
         else {
-            const val = Array.isArray(value) ? value.map((v) => (typeof v === 'string' ? JSON.parse(v) : v)) : value ? [JSON.parse(value)] : [];
-            this.innerValue = val;
-            this.value = val.map((v) => JSON.stringify(v));
-            if (!this.multiselect) {
-                this.value = this.value[0] || null;
-            }
+            this.value = value;
+            this.resolveFn(Array.isArray(value) ? value : [value]);
         }
     }
     registerOnChange(fn) {
@@ -1127,52 +1143,54 @@ class OrganizationComponent extends AbstractMatFormField {
         }
     }
     #getPropagateValue() {
-        const value = this.innerValue.map((v) => (this.withMetadata() ? { id: v.user.id, title: v.user.title } : v.user.id));
+        const value = this.innerValue.map((v) => (this.withMetadata() ? { id: v.id, title: v.title } : v.id));
         return this.multiselect() ? value : value[0];
     }
     resolveFn(value) {
-        const obs = (value instanceof Array ? value : [value]).map((v) => {
-            const valueID = typeof v === 'string' ? v : v.id;
-            const match = this.innerValue.find((iv) => iv.user.id === valueID);
-            return match
-                ? of(match)
-                : this.#userService.getUserById(valueID).pipe(map$1((res) => ({
-                    user: res,
-                    state: {}
-                })), catchError((e) => {
-                    const user = new YuvUser({ id: typeof v === 'string' ? v : v.id });
-                    user.title = typeof v === 'string' ? v : v.title;
-                    return of({
-                        user,
-                        state: {
-                            notFound: e.status === 404
-                        },
-                        titleString: e.status === 404 ? this.translate.instant('yuv.form.element.organization.user.not-found') : undefined
-                    });
-                }));
-        });
-        return forkJoin(obs).subscribe((data) => {
+        // 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) => {
             this.innerValue = data;
-            const mapped = this.innerValue.map((u) => ({
-                label: u.user.title,
-                value: u
+            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 });
         });
     }
-    #resolveOrgination(query, excludeMe, filterRoles) {
-        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrginationNode(this.innerValue), catchError(() => of([])));
+    #resolveOrganization(query, excludeMe, filterRoles) {
+        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
     }
-    #resolveOrginationSet(query, filterRoles) {
-        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrginationNode(this.innerValue), catchError(() => of([])));
+    #resolveOrganizationSet(query, filterRoles) {
+        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
     }
     autocompleteFn(query) {
         if (query.length >= this.minLength) {
             this.busy.set(true);
-            (this.#organizationType === Classification.STRING_ORGANIZATION
-                ? this.#resolveOrgination(query, this.excludeMe(), this.#filterRoles())
-                : this.#resolveOrginationSet(query, this.#filterRoles())).subscribe({
+            (this.#organizationType() === Classification.STRING_ORGANIZATION
+                ? this.#resolveOrganization(query, this.excludeMe(), this.#filterRoles())
+                : this.#resolveOrganizationSet(query, this.#filterRoles())).subscribe({
                 next: (res) => {
                     this.busy.set(false);
                     this.autocompleteRes = res;
@@ -1205,11 +1223,11 @@ class OrganizationComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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.user) {\n      <span class=\"chip\">{{ item.value.user.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value.user) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.user.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: i4$1.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: i4$1.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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.user) {\n      <span class=\"chip\">{{ item.value.user.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value.user) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.user.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, 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"] }]
         }] });
 
 /**
@@ -1391,7 +1409,7 @@ class DateRangePickerComponent {
         this.#dialogRef.close(this.form.value.range);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", 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: ["headertitel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -1946,7 +1964,7 @@ class CatalogComponent extends AbstractMatFormField {
         this.options = input([]);
         this.#optionsEffect = effect(() => {
             untracked(() => {
-                this._options.set(this.options() || []);
+                this.#setOptions(this.options() || [], false);
             });
         });
         /**
@@ -1957,14 +1975,9 @@ class CatalogComponent extends AbstractMatFormField {
             const cls = this.classifications();
             untracked(() => {
                 const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG);
-                const ceTranslate = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG_I18N);
                 if (ce && ce.options) {
                     this.#setOptions(ce.options, false);
                 }
-                // i18n catalog
-                if (ceTranslate && ceTranslate.options) {
-                    this.#setOptions(ceTranslate.options, true);
-                }
             });
         });
         /**
@@ -1986,14 +1999,21 @@ class CatalogComponent extends AbstractMatFormField {
     }
     #setOptions(options, translate) {
         if (translate) {
-            this._options.set(options.map((o) => this.translate.instant(o)));
+            this._options.set(options.map((o) => ({
+                label: this.translate.instant(o),
+                value: o
+            })));
         }
         else {
-            this._options.set(options);
+            this._options.set(options.map((o) => ({
+                label: o,
+                value: o
+            })));
         }
     }
     writeValue(value) {
         this.value = value;
+        this.fc.setValue(value, { emitEvent: false });
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -2024,11 +2044,11 @@ class CatalogComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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\">{{ o }}</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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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\">{{ o }}</mat-option>\n  }\n</mat-select>\n" }]
+            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" }]
         }] });
 
 /**
@@ -2101,6 +2121,7 @@ class I18nCatalogComponent extends AbstractMatFormField {
     }
     writeValue(value) {
         this.value = value;
+        this.fc.setValue(value, { emitEvent: false });
     }
     registerOnChange(fn) {
         this.propagateChange = fn;