@yuuvis/client-framework 3.22.1 → 3.24.0

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, signal, effect, untracked, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, computed, linkedSignal, viewChild, output, Input, NgModule } from '@angular/core';
+import { inject, DestroyRef, input, signal, effect, untracked, Component, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ElementRef, computed, linkedSignal, viewChild, output, Input, NgModule } from '@angular/core';
 import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, FormBuilder, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormsModule } from '@angular/forms';
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
 import * as i1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import { SystemService, TranslateService, Classification, TranslatePipe, Situation, Utils, Operator, OperatorLabel, 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 { SystemService, TranslateService, Classification, TranslatePipe, Situation, ObjectFormControl, Utils, Operator, OperatorLabel, 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';
+import { CommonModule, NgClass } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i2 from '@angular/material/icon';
@@ -42,6 +42,15 @@ class FormUtils {
     static getErrorState(control) {
         return control.invalid && (control.dirty || control.touched);
     }
+    /**
+     * Writes the errors of a form element's inner control onto the hosting control without
+     * dropping the host's own validation result (e.g. `required` set up by the surrounding form).
+     * `host.setErrors(inner.errors)` alone would wipe those whenever the inner control is valid.
+     */
+    static mergeInnerErrors(host, inner) {
+        const ownErrors = host.validator ? host.validator(host) : null;
+        host.setErrors(ownErrors || inner.errors ? { ...ownErrors, ...inner.errors } : null);
+    }
 }
 
 class CatalogComponent extends AbstractMatFormField {
@@ -152,30 +161,254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'yuv-catalog', imports: [MatSelectModule, ReactiveFormsModule, TranslatePipe], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"formCtrl\">\n  @if (!multiple() && !required) {\n    <mat-option [value]=\"null\">{{ 'yuv.form.element.catalog.option.none' | translate }}</mat-option>\n  }\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
         }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
 
+const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+/**
+ * Form input for a color value. Renders a hex text input alongside a native color picker
+ * swatch; both stay in sync. The value is a hex color string (e.g. `#2A70AC`).
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms and Material form
+ * fields.
+ *
+ * @example
+ * <mat-form-field>
+ *   <mat-label>Primary color</mat-label>
+ *   <yuv-color formControlName="primaryColor"></yuv-color>
+ * </mat-form-field>
+ */
+class ColorComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
+        /** the color swatch (native `<input type="color">`, always a full 6-digit hex) */
+        this.colorFc = new FormControl('#000000', { nonNullable: true });
+        /** the editable hex text input (source of truth for the value) */
+        this.textFc = new FormControl(null);
+        this.ngControl = injectNgControl(this);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #dRef;
+    writeValue(value) {
+        this.value = value;
+        this.textFc.setValue(value ?? null, { emitEvent: false });
+        if (value && HEX_PATTERN.test(value)) {
+            this.colorFc.setValue(value, { emitEvent: false });
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.colorFc.disable();
+            this.textFc.disable();
+        }
+        else {
+            this.colorFc.enable();
+            this.textFc.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        const validators = [(control) => this.#hexValidator(control.value)];
+        if (this.required)
+            validators.push(() => (this.value ? null : { required: true }));
+        this.textFc.setValidators(validators);
+        this.textFc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
+            this.errorState = FormUtils.getErrorState(this.textFc);
+            this.ngControl?.control?.setErrors(this.textFc.errors);
+        });
+        // hex text drives the value; keep the swatch in sync when the text is a valid hex
+        this.textFc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            const hex = v?.trim() || null;
+            this.value = hex;
+            if (hex && HEX_PATTERN.test(hex)) {
+                this.colorFc.setValue(hex, { emitEvent: false });
+            }
+            this.propagateChange(hex);
+        });
+        // swatch changes update the hex text (which re-propagates)
+        this.colorFc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.textFc.setValue(v);
+        });
+        this.textFc.updateValueAndValidity();
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    #hexValidator(value) {
+        if (!value)
+            return null;
+        return HEX_PATTERN.test(value.trim()) ? null : { color: { valid: false } };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: ColorComponent, isStandalone: true, selector: "yuv-color", providers: [{ provide: MatFormFieldControl, useExisting: ColorComponent }], usesInheritance: true, ngImport: i0, template: "<span class=\"yuv-color\">\n  <label class=\"yuv-color__swatch\" [style.background-color]=\"colorFc.value\">\n    <input type=\"color\" [formControl]=\"colorFc\" aria-hidden=\"true\" tabindex=\"-1\" />\n  </label>\n  <input class=\"yuv-color__hex\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [formControl]=\"textFc\" />\n</span>\n", styles: [".yuv-color{display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);width:100%;margin-block-start:var(--ymt-spacing-xs)}.yuv-color__swatch{position:relative;flex:0 0 auto;inline-size:var(--ymt-sizing-m);block-size:var(--ymt-sizing-m);border-radius:var(--ymt-corner-xs);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);overflow:hidden;cursor:pointer;outline:2px solid currentColor;outline-offset:-1px}.yuv-color__swatch input[type=color]{position:absolute;inset:0;inline-size:100%;block-size:100%;padding:0;border:none;opacity:0;cursor:pointer}.yuv-color__hex{flex:1 1 auto;min-inline-size:0;border:none;outline:none;background:transparent;color:var(--ymt-text-color);font:var(--ymt-font-body)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-color', standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: ColorComponent }], template: "<span class=\"yuv-color\">\n  <label class=\"yuv-color__swatch\" [style.background-color]=\"colorFc.value\">\n    <input type=\"color\" [formControl]=\"colorFc\" aria-hidden=\"true\" tabindex=\"-1\" />\n  </label>\n  <input class=\"yuv-color__hex\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [formControl]=\"textFc\" />\n</span>\n", styles: [".yuv-color{display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);width:100%;margin-block-start:var(--ymt-spacing-xs)}.yuv-color__swatch{position:relative;flex:0 0 auto;inline-size:var(--ymt-sizing-m);block-size:var(--ymt-sizing-m);border-radius:var(--ymt-corner-xs);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);overflow:hidden;cursor:pointer;outline:2px solid currentColor;outline-offset:-1px}.yuv-color__swatch input[type=color]{position:absolute;inset:0;inline-size:100%;block-size:100%;padding:0;border:none;opacity:0;cursor:pointer}.yuv-color__hex{flex:1 1 auto;min-inline-size:0;border:none;outline:none;background:transparent;color:var(--ymt-text-color);font:var(--ymt-font-body)}\n"] }]
+        }] });
+
+/**
+ * @ignore
+ * Scripting element for one cell of the table row that is being edited. Mirrors the
+ * properties form scripts know from the elements of `scope.model`, but applies changes
+ * to the controls of the row editing dialog instead of the object form.
+ */
+class TableRowScopeElement {
+    constructor(element, onChange) {
+        this.element = element;
+        this.onChange = onChange;
+        if (this.element['value'] === undefined) {
+            this.element['value'] = null;
+        }
+    }
+    /**
+     * Called when the user changed the cell value. Triggers the elements `onchange` callback
+     * with the element itself and the rows model (siblings), like form scripts get it for table rows.
+     */
+    update(value, rowModel) {
+        const newValue = value === undefined || value === '' ? null : value;
+        if (JSON.stringify(this.element['value']) === JSON.stringify(newValue))
+            return;
+        this.element['value'] = newValue;
+        const onchange = this.onchange;
+        if (typeof onchange === 'function') {
+            try {
+                onchange(this, rowModel);
+            }
+            catch (err) {
+                console.error(`Error in form script onchange of table column '${this.name}'`, err);
+            }
+        }
+    }
+    set value(value) {
+        if (JSON.stringify(this.element['value']) === JSON.stringify(value))
+            return;
+        this.element['value'] = value;
+        this.onChange(this.name, { name: 'value', newValue: value });
+    }
+    get value() {
+        return this.element['value'];
+    }
+    set required(required) {
+        this.element['required'] = required;
+        this.onChange(this.name, { name: 'required', newValue: required });
+    }
+    get required() {
+        return !!this.element['required'];
+    }
+    set readonly(readonly) {
+        this.element['readonly'] = readonly;
+        this.onChange(this.name, { name: 'readonly', newValue: readonly });
+    }
+    get readonly() {
+        return !!this.element['readonly'];
+    }
+    set error(error) {
+        this.element['error'] = error;
+        this.onChange(this.name, { name: 'error', newValue: error });
+    }
+    get error() {
+        return this.element['error'] || null;
+    }
+    set onchange(onchange) {
+        this.element['onchange'] = onchange;
+    }
+    get onchange() {
+        return this.element['onchange'] || null;
+    }
+    get name() {
+        return this.element.name;
+    }
+    get label() {
+        return this.element['label'];
+    }
+    get description() {
+        return this.element['description'];
+    }
+    get type() {
+        return this.element['type'];
+    }
+    get classifications() {
+        return this.element['classifications'];
+    }
+    get scale() {
+        return this.element['scale'];
+    }
+    get precision() {
+        return this.element['precision'];
+    }
+}
+
 class EditTableDataComponent {
     constructor() {
         this.#fb = inject(FormBuilder);
         this.#system = inject(SystemService);
         this.#errorMessage = inject(FormTranslateService);
+        this.#destroyRef = inject(DestroyRef);
+        this.#cdRef = inject(ChangeDetectorRef);
         this.#dialogData = inject(MAT_DIALOG_DATA);
         this.#dialogRef = inject((MatDialogRef));
         this.errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
         this.tableForm = this.#fb.group({});
         this.isInnerTableForm = input(true, ...(ngDevMode ? [{ debugName: "isInnerTableForm" }] : /* istanbul ignore next */ []));
         this.formElement = this.#dialogData.formElement || {};
-        this.columns = (this.formElement['elements'] || []).map((c) => ({
+        this.columns = signal((this.formElement['elements'] || []).map((c) => ({
             ...c,
             propertyType: c.type,
             _internalType: this.#system.getInternalFormElementType(c.type, c.classifications, c.catalog)
-        }));
+        })), ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.#elementData = this.#dialogData.elementData || {};
         this.situation = this.#dialogData.situation || Situation.EDIT;
         this.header = this.#dialogData.label || '';
         this.adding = this.#dialogData.adding;
+        // may be disabled by the tables 'onrowedit' form script callback
+        this.saveEnabled = signal(true, ...(ngDevMode ? [{ debugName: "saveEnabled" }] : /* istanbul ignore next */ []));
+        this.#onRowScriptingChange = (name, change) => {
+            const control = this.tableForm.get(name);
+            if (!control)
+                return;
+            switch (change.name) {
+                case 'value': {
+                    control.setValue(change.newValue);
+                    control.markAsDirty();
+                    break;
+                }
+                case 'required': {
+                    this.#updateColumn(control, { required: !!change.newValue });
+                    control.setValidators(this.#getValidators(control._eoFormElement));
+                    control.markAsTouched();
+                    control.updateValueAndValidity();
+                    break;
+                }
+                case 'readonly': {
+                    this.#updateColumn(control, { readonly: !!change.newValue });
+                    if (change.newValue) {
+                        control.disable();
+                    }
+                    else {
+                        control.enable();
+                    }
+                    break;
+                }
+                case 'error': {
+                    control._eoFormElement.error = change.newValue;
+                    control.markAsTouched();
+                    control.updateValueAndValidity();
+                    break;
+                }
+            }
+            this.#cdRef.markForCheck();
+        };
     }
     #fb;
     #system;
     #errorMessage;
+    #destroyRef;
+    #cdRef;
     #dialogData;
     #dialogRef;
     #elementData;
@@ -185,16 +418,32 @@ class EditTableDataComponent {
     submit() {
         const data = this.tableForm.getRawValue();
         Object.keys(data).forEach((key) => (data[key] === '' || data[key] === undefined) && (data[key] = null));
-        if (this.tableForm.valid && this.#dialogRef)
+        if (this.tableForm.valid && this.saveEnabled() && this.#dialogRef)
             this.#dialogRef.close(data);
     }
     ngOnInit() {
-        Object.values(this.formElement['elements']).forEach((element) => {
-            return this.tableForm.addControl(element.name, this.#fb.control({ value: '', disabled: element.readonly }, element.required ? Validators.required : null));
+        this.#initFormControls();
+        this.#initErrorMessages();
+        this.#initRowScripting();
+    }
+    /**
+     * Adds one control per table column to the row form and fills it with the data of the row being edited.
+     */
+    #initFormControls() {
+        this.columns().forEach((column) => {
+            const control = new ObjectFormControl({ value: '', disabled: column.readonly });
+            control._eoFormElement = column;
+            control.setValidators(this.#getValidators(column));
+            this.tableForm.addControl(column.name, control);
         });
         this.tableForm.setValidators(this.#globalErrorValidator());
         this.#elementData && this.tableForm.patchValue(this.#elementData);
-        this.tableForm.valueChanges.subscribe((v) => {
+    }
+    /**
+     * Keeps the error messages shown by the dialog in sync with the errors of the row form.
+     */
+    #initErrorMessages() {
+        this.tableForm.valueChanges.subscribe(() => {
             this.errorMessage.set(this.tableForm.errors
                 ? Object.keys(this.tableForm.errors).map((key) => this.tableForm.errors && this.tableForm.errors[key]
                     ? Object.keys(this.tableForm.errors[key]).map((k) => ({
@@ -204,6 +453,57 @@ class EditTableDataComponent {
                 : null);
         });
     }
+    /**
+     * Runs the 'onrowedit' callback the table form element provides (see `TableRowEditSupport`),
+     * e.g. registered by a form script. The callback gets the table element and a 'row' object
+     * whose model provides access to the cells of the row being edited. Changes applied to the
+     * row model are reflected by the dialog immediately and are discarded once it is closed.
+     */
+    #initRowScripting() {
+        const rowEdit = this.#dialogData.rowEdit;
+        if (!rowEdit)
+            return;
+        const model = {};
+        this.columns().forEach((column) => {
+            const value = this.tableForm.get(column.name)?.value;
+            const element = { ...column, value: value === '' ? null : value };
+            model[column.name] = new TableRowScopeElement(element, this.#onRowScriptingChange);
+        });
+        const row = {
+            index: rowEdit.index,
+            persisted: rowEdit.persisted,
+            saveEnabled: true,
+            model
+        };
+        try {
+            rowEdit.callback(rowEdit.table, row);
+        }
+        catch (err) {
+            console.error(`Error in form script onrowedit of table '${this.formElement['name']}'`, err);
+        }
+        // row properties are only evaluated synchronously
+        this.saveEnabled.set(row.saveEnabled !== false);
+        // subscribe after running the callback, so values set by onrowedit won't trigger onchange handlers
+        Object.keys(model).forEach((name) => this.tableForm
+            .get(name)
+            ?.valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((value) => model[name].update(value, model)));
+    }
+    #onRowScriptingChange;
+    // replace the column so the form field picks up the changed properties
+    #updateColumn(control, patch) {
+        const column = { ...control._eoFormElement, ...patch };
+        control._eoFormElement = column;
+        this.columns.update((columns) => columns.map((col) => (col.name === column.name ? column : col)));
+    }
+    #getValidators(column) {
+        // errors set by form scripts (rendered by the form field using the 'eoformScript' key)
+        const scriptError = (control) => control._eoFormElement?.error ? { eoformScript: { valid: false } } : null;
+        const validators = [scriptError];
+        if (column.required)
+            validators.push(Validators.required);
+        return validators;
+    }
     #globalErrorValidator() {
         return (control) => {
             const formGroup = control;
@@ -234,7 +534,7 @@ class EditTableDataComponent {
                 useExisting: forwardRef(() => EditTableDataComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<yuv-dialog [headertitle]=\"(adding ? 'yuv.form.element.data.grid.add.headline' : 'yuv.form.element.data.grid.edit.headline') | translate: { headline: header }\">\n  <main>\n    <div [formGroup]=\"tableForm\">\n      <div class=\"fields\">\n        @for (element of columns; track $index) {\n          <div [attr.data-name]=\"element.name\" class=\"form-field\">\n            <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button ymtButton=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty || !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.object-metadata.button.save' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .fields .form-field:not(:last-child){margin-block-end:var(--ymt-spacing-s)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["formChangedSubject", "field", "variant", "situation"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<yuv-dialog [headertitle]=\"(adding ? 'yuv.form.element.data.grid.add.headline' : 'yuv.form.element.data.grid.edit.headline') | translate: { headline: header }\">\n  <main>\n    <div [formGroup]=\"tableForm\">\n      <div class=\"fields\">\n        @for (element of columns(); track element.name) {\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 || !saveEnabled()\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.object-metadata.button.save' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .fields .form-field:not(:last-child){margin-block-end:var(--ymt-spacing-s)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["formChangedSubject", "field", "variant", "situation"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: EditTableDataComponent, decorators: [{
             type: Component,
@@ -253,7 +553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                             useExisting: forwardRef(() => EditTableDataComponent),
                             multi: true
                         }
-                    ], template: "<yuv-dialog [headertitle]=\"(adding ? 'yuv.form.element.data.grid.add.headline' : 'yuv.form.element.data.grid.edit.headline') | translate: { headline: header }\">\n  <main>\n    <div [formGroup]=\"tableForm\">\n      <div class=\"fields\">\n        @for (element of columns; track $index) {\n          <div [attr.data-name]=\"element.name\" class=\"form-field\">\n            <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </main>\n\n  <footer>\n    <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n    <button ymtButton=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty || !tableForm.valid\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.object-metadata.button.save' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .fields .form-field:not(:last-child){margin-block-end:var(--ymt-spacing-s)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"] }]
+                    ], template: "<yuv-dialog [headertitle]=\"(adding ? 'yuv.form.element.data.grid.add.headline' : 'yuv.form.element.data.grid.edit.headline') | translate: { headline: header }\">\n  <main>\n    <div [formGroup]=\"tableForm\">\n      <div class=\"fields\">\n        @for (element of columns(); track element.name) {\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 || !saveEnabled()\">\n      @if (adding) {\n        {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n      } @else {\n        {{ 'yuv.object-metadata.button.save' | translate }}\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .fields .form-field:not(:last-child){margin-block-end:var(--ymt-spacing-s)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"] }]
         }], propDecorators: { isInnerTableForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInnerTableForm", required: false }] }] } });
 
 var DataGridSizeType;
@@ -265,6 +565,7 @@ var DataGridSizeType;
     DataGridSizeType["AUTO"] = "auto";
 })(DataGridSizeType || (DataGridSizeType = {}));
 
+const isRowObject = (row) => typeof row === 'object' && row !== null;
 const MATERIAL = [MatMenuModule, MatMenuTrigger, MatIconModule, MatButtonModule, MatTableModule, MatTooltipModule];
 class DataGridComponent {
     constructor() {
@@ -290,6 +591,12 @@ class DataGridComponent {
                 : formElement && formElement['label'];
         }, ...(ngDevMode ? [{ debugName: "tableLabel" }] : /* istanbul ignore next */ []));
         this.selectedRow = signal(null, ...(ngDevMode ? [{ debugName: "selectedRow" }] : /* istanbul ignore next */ []));
+        // Rows that are persisted, i.e. not added while the current form is being edited ('row.persisted'
+        // of the 'onrowedit' callback). Rows are tracked by identity and carried over by value whenever
+        // they get recreated (e.g. by writeValue), so identical rows can't be told apart.
+        this.#persistedRows = new WeakSet();
+        // serialized rows the current form element has been loaded with
+        this.#loadedRows = [];
         this.isRequired = false;
         this.isInvalid = false;
         this.icons = {
@@ -314,7 +621,12 @@ class DataGridComponent {
             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));
+            untracked(() => {
+                if (!formElement)
+                    return;
+                this.#resetPersistedRows(data);
+                this.#updateTable(elements, data);
+            });
         }, ...(ngDevMode ? [{ debugName: "#loadData" }] : /* istanbul ignore next */ []));
         this.propagateChange = () => { };
         this.onTouched = () => { };
@@ -322,6 +634,12 @@ class DataGridComponent {
     #dialog;
     #systemService;
     #cdRef;
+    // Rows that are persisted, i.e. not added while the current form is being edited ('row.persisted'
+    // of the 'onrowedit' callback). Rows are tracked by identity and carried over by value whenever
+    // they get recreated (e.g. by writeValue), so identical rows can't be told apart.
+    #persistedRows;
+    // serialized rows the current form element has been loaded with
+    #loadedRows;
     #loadData;
     // 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
@@ -353,7 +671,7 @@ class DataGridComponent {
             return row;
         });
     }
-    #openEditOverlay(elementData, adding = false) {
+    #openEditOverlay(elementData, adding = false, rowIndex = -1, persisted = false) {
         return this.#dialog
             .open(EditTableDataComponent, {
             minWidth: '25%',
@@ -364,7 +682,8 @@ class DataGridComponent {
                 elementData,
                 situation: this.situation(),
                 adding,
-                label: this.tableLabel()
+                label: this.tableLabel(),
+                rowEdit: this.#rowEditContext(rowIndex, persisted)
             }
         })
             .afterClosed()
@@ -377,8 +696,13 @@ class DataGridComponent {
         if (this.readonly())
             return;
         this.selectedRow.set(element);
-        this.#openEditOverlay(element).subscribe((result) => {
+        const rowIndex = this.#rowIndex(element);
+        const persisted = isRowObject(element) && this.#persistedRows.has(element);
+        this.#openEditOverlay(element, false, rowIndex, persisted).subscribe((result) => {
             if (result) {
+                // an edited row keeps its persisted state
+                if (persisted)
+                    this.#persistedRows.add(result);
                 const updatedData = this.dataSource().map((item) => JSON.stringify(item) === JSON.stringify(element) ? result : item);
                 const formElement = this.mappedFormElement();
                 if (formElement) {
@@ -403,6 +727,43 @@ class DataGridComponent {
             }
         });
     }
+    // context for the row editing dialog, only if the table form element provides an 'onrowedit' callback
+    #rowEditContext(index, persisted) {
+        const formElement = this.mappedFormElement();
+        const callback = formElement?.onrowedit;
+        if (typeof callback !== 'function')
+            return undefined;
+        const resolve = formElement?.resolveRowEditTable;
+        const table = typeof resolve === 'function' ? resolve() : undefined;
+        return { callback, table: table ?? formElement, index, persisted };
+    }
+    // rows the form element is loaded with are persisted, unless the form is about to create a new object
+    #resetPersistedRows(rows) {
+        const persisted = this.situation() === Situation.CREATE ? [] : rows.filter(isRowObject);
+        this.#persistedRows = new WeakSet(persisted);
+        this.#loadedRows = persisted.map((row) => JSON.stringify(row));
+    }
+    // rows got recreated: carry over the persisted state of the previous (or the loaded) rows by value
+    #carryOverPersistedRows(previous, rows) {
+        const candidates = [
+            ...previous.filter((row) => isRowObject(row) && this.#persistedRows.has(row)).map((row) => JSON.stringify(row)),
+            ...this.#loadedRows
+        ];
+        rows.forEach((row) => {
+            if (!isRowObject(row) || this.#persistedRows.has(row))
+                return;
+            const idx = candidates.indexOf(JSON.stringify(row));
+            if (idx > -1) {
+                candidates.splice(idx, 1);
+                this.#persistedRows.add(row);
+            }
+        });
+    }
+    #rowIndex(element) {
+        const rows = this.dataSource();
+        const index = rows.indexOf(element);
+        return index > -1 ? index : rows.findIndex((item) => JSON.stringify(item) === JSON.stringify(element));
+    }
     removeRow(element) {
         const updatedData = this.dataSource().filter((item) => JSON.stringify(item) !== JSON.stringify(element));
         const formElement = this.mappedFormElement();
@@ -454,7 +815,9 @@ class DataGridComponent {
      */
     writeValue(obj) {
         const elements = this.#resolveElements(this.formElement());
-        this.#updateTable(elements, this.#toRowObjects(Array.isArray(obj) ? obj : [], elements));
+        const rows = this.#toRowObjects(Array.isArray(obj) ? obj : [], elements);
+        this.#carryOverPersistedRows(this.dataSource(), rows);
+        this.#updateTable(elements, rows);
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -535,6 +898,7 @@ class DatetimeComponent extends AbstractMatFormField {
         this.pickerCmp = viewChild.required(DatepickerComponent);
         this.ngControl = injectNgControl(this);
         this.fc = new FormControl(null);
+        this.#hostControl = null;
         this._locale = signal(this.translate.getCurrentLang(), ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
         this.locale = input(this.translate.getCurrentLang(), ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
         this.#localeEffect = effect(() => {
@@ -560,6 +924,8 @@ class DatetimeComponent extends AbstractMatFormField {
         this.propagateChange = (_) => { };
     }
     #dRef;
+    #hostControl;
+    #hostControlSub;
     #localeEffect;
     openCalendar() {
         this.pickerCmp().openCalendar();
@@ -603,11 +969,29 @@ class DatetimeComponent extends AbstractMatFormField {
         this.translate.onLangChange.subscribe((evt) => this._locale.set(evt.lang));
         this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((value) => this.onValueChange(value));
         this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
-            this.errorState = FormUtils.getErrorState(this.fc);
             if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.fc.errors);
+                FormUtils.mergeInnerErrors(this.ngControl.control, this.fc);
             }
+            this.#updateErrorState();
         });
+        this.#dRef.onDestroy(() => this.#hostControlSub?.unsubscribe());
+    }
+    ngDoCheck() {
+        // With `formControlName` the host control is only resolved after this component's `ngOnInit`,
+        // and a `[formControl]` binding may swap it later, so (re)attach whenever it changes.
+        const host = this.ngControl?.control ?? null;
+        if (host && host !== this.#hostControl) {
+            this.#hostControl = host;
+            this.#hostControlSub?.unsubscribe();
+            // The host carries the validation of the surrounding form (e.g. `required`) and may be
+            // touched from outside (form scripts, submit handling), so reflect it in the error state.
+            this.#hostControlSub = host.events.subscribe(() => this.#updateErrorState());
+            this.#updateErrorState();
+        }
+    }
+    #updateErrorState() {
+        const host = this.ngControl?.control;
+        this.errorState = FormUtils.getErrorState(this.fc) || (!!host && FormUtils.getErrorState(host));
     }
     #setLabels() {
         this.labels = {
@@ -2903,5 +3287,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, ReferenceComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, ColorComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, ReferenceComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map