@yuuvis/client-framework 2.1.12 → 2.1.13

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

@@ -118,7 +118,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\n            @let errorsGroup = errorMessage();\n            @if (errorsGroup && tableForm.errors) {\n              <div class=\"err-msg\">\n                @for (errors of errorsGroup; track $index) {\n                  @for (error of errors; track $index) {\n                    {{ error[element.name] }}\n                  }\n                }\n              </div>\n            }\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.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}: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: ["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 \n            [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n\n            @let errorsGroup = errorMessage();\n            @if (errorsGroup && tableForm.errors) {\n              <div class=\"err-msg\">\n                @for (errors of errorsGroup; track $index) {\n                  @for (error of errors; track $index) {\n                    {{ error[element.name] }}\n                  }\n                }\n              </div>\n            }\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.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}: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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EditTableDataComponent, decorators: [{
             type: Component,
@@ -138,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                             useExisting: forwardRef(() => EditTableDataComponent),
                             multi: true
                         }
-                    ], 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\n            @let errorsGroup = errorMessage();\n            @if (errorsGroup && tableForm.errors) {\n              <div class=\"err-msg\">\n                @for (errors of errorsGroup; track $index) {\n                  @for (error of errors; track $index) {\n                    {{ error[element.name] }}\n                  }\n                }\n              </div>\n            }\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.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"] }]
+                    ], 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 \n            [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n\n            @let errorsGroup = errorMessage();\n            @if (errorsGroup && tableForm.errors) {\n              <div class=\"err-msg\">\n                @for (errors of errorsGroup; track $index) {\n                  @for (error of errors; track $index) {\n                    {{ error[element.name] }}\n                  }\n                }\n              </div>\n            }\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.form.element.data.grid.edit' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"] }]
         }] });
 
 var DataGridSizeType;
@@ -338,8 +338,8 @@ class DatetimeComponent extends AbstractMatFormField {
          * Enables setting time as well (default: false)
          */
         this.withTime = input(false);
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-        this.propagateChange = (fn) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.validationChange = () => { };
     }
@@ -357,10 +357,18 @@ class DatetimeComponent extends AbstractMatFormField {
     writeValue(value) {
         if (typeof value === 'string') {
             value = new Date(value);
-            this.propagateChange(value);
+            this.#propagate(value);
         }
         this.value = value || null;
     }
+    #propagate(value) {
+        let propagateValue = value;
+        if (propagateValue && !this.withTime()) {
+            // returns a string in the format 'yyyy-MM-dd' like expected for resolution date
+            propagateValue = `${propagateValue.getFullYear()}-${(propagateValue.getMonth() + 1).toString().padStart(2, '0')}-${propagateValue.getDate().toString().padStart(2, '0')}`;
+        }
+        this.propagateChange(propagateValue);
+    }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
@@ -370,7 +378,7 @@ class DatetimeComponent extends AbstractMatFormField {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched() { }
     onValueChange(e) {
-        this.propagateChange(e);
+        this.#propagate(e);
     }
     ngOnInit() {
         this.focusHandled.set(true);
@@ -693,7 +701,10 @@ class NumberComponent extends AbstractMatFormField {
     }
     ngOnInit() {
         // set up validators once all inputs are set
-        this.innerCtrl.setValidators(this.#getValidator());
+        const validators = [this.#getValidator()];
+        if (this.required)
+            validators.push(Validators.required);
+        this.innerCtrl.setValidators(validators);
         this.innerCtrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
             this.errorState = this.innerCtrl.invalid;
             if (this.ngControl?.control) {
@@ -932,6 +943,7 @@ class OrganizationComponent extends AbstractMatFormField {
         super(...arguments);
         this.#system = inject(SystemService);
         this.#userService = inject(UserService);
+        this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
         this.minLength = 2;
         this.busy = signal(false);
@@ -966,6 +978,7 @@ class OrganizationComponent extends AbstractMatFormField {
     }
     #system;
     #userService;
+    #dRef;
     set innerValue(iv) {
         this._innerValue = iv || [];
     }
@@ -1048,6 +1061,7 @@ class OrganizationComponent extends AbstractMatFormField {
                 value: u
             }));
             this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
+            this.acFormControl.updateValueAndValidity();
         });
     }
     autocompleteFn(query) {
@@ -1080,6 +1094,15 @@ class OrganizationComponent extends AbstractMatFormField {
         }
     }
     ngOnInit() {
+        if (this.required)
+            this.acFormControl.setValidators(Validators.required);
+        this.acFormControl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.acFormControl.invalid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.acFormControl.errors);
+            }
+        });
+        this.acFormControl.updateValueAndValidity();
         this.acFormControl.valueChanges.subscribe((v) => {
             if (!Array.isArray(v))
                 v = v ? [v] : [];
@@ -1091,13 +1114,11 @@ class OrganizationComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", 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: false, 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  [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.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n      {{ item.value.user.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</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: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc"] }, { 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.1.0", version: "19.2.12", 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: false, 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  (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.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n      {{ item.value.user.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</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"] }, { 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.12", 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  [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.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n      {{ item.value.user.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</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  (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.user.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n      {{ item.value.user.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</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: { classifications: [{
                 type: Input
             }] } });
@@ -1120,6 +1141,7 @@ class OrganizationSetComponent extends AbstractMatFormField {
         super(...arguments);
         this.#system = inject(SystemService);
         this.#idmService = inject(IdmService);
+        this.#dRef = inject(DestroyRef);
         this.types = input(undefined);
         this.#typesEffect = effect(() => {
             const types = this.types();
@@ -1160,6 +1182,7 @@ class OrganizationSetComponent extends AbstractMatFormField {
     }
     #system;
     #idmService;
+    #dRef;
     #typesEffect;
     #targetTypes;
     set classifications(c) {
@@ -1220,6 +1243,15 @@ class OrganizationSetComponent extends AbstractMatFormField {
         }
     }
     ngOnInit() {
+        if (this.required)
+            this.acFormControl.setValidators(Validators.required);
+        this.acFormControl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.acFormControl.invalid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.acFormControl.errors);
+            }
+        });
+        this.acFormControl.updateValueAndValidity();
         this.acFormControl.valueChanges.subscribe((v) => {
             if (!Array.isArray(v))
                 v = v ? [v] : [];
@@ -1752,7 +1784,10 @@ class StringComponent extends AbstractMatFormField {
         };
     }
     ngOnInit() {
-        this.fc.setValidators(this.#getValidator());
+        const validators = [this.#getValidator()];
+        if (this.required)
+            validators.push(Validators.required);
+        this.fc.setValidators(validators);
         this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
             this.errorState = this.fc.invalid;
             if (this.ngControl?.control) {
@@ -1849,6 +1884,15 @@ class CatalogComponent extends AbstractMatFormField {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
     ngOnInit() {
+        if (this.required)
+            this.fc.setValidators(Validators.required);
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = this.fc.invalid;
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.fc.errors);
+            }
+        });
+        this.fc.updateValueAndValidity();
         this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
     }
     ngOnDestroy() {