@yuuvis/client-framework 0.6.5

package/fesm2022/yuuvis-client-framework-object-form.mjs

@@ -0,0 +1,1664 @@
+import * as i1$1 from '@angular/common';
+import { CommonModule, NgComponentOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, NgZone, signal, Injectable, input, Component, DestroyRef, computed, effect, untracked, ViewEncapsulation, Input, ElementRef, ChangeDetectorRef, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
+import { UntypedFormGroup, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i1$2 from '@yuuvis/client-core';
+import { EventService, UserService, DmsService, SystemService, SearchService, BackendService, TranslateService, NotificationService, AppCacheService, YuvEventType, ApiBase, Operator, DmsObject, Utils, Situation, ContentStreamField, Classification, KeysPipe } from '@yuuvis/client-core';
+import { firstValueFrom, map, forkJoin, debounceTime, of } from 'rxjs';
+import { Router } from '@angular/router';
+import * as i2$1 from '@yuuvis/components/tabs';
+import { YvcTabsModule } from '@yuuvis/components/tabs';
+import { MetadataFormFieldComponent } from '@yuuvis/client-framework/metadata-form';
+import * as i1 from '@yuuvis/components/icon';
+import { YvcIconModule } from '@yuuvis/components/icon';
+import { HttpHeaders } from '@angular/common/http';
+import { map as map$1 } from 'rxjs/operators';
+
+class FormScriptingApiService {
+    constructor() {
+        this.#ngZone = inject(NgZone);
+        this.#router = inject(Router);
+        this.#eventService = inject(EventService);
+        this.#userService = inject(UserService);
+        this.#dmsService = inject(DmsService);
+        this.#systemService = inject(SystemService);
+        this.#searchService = inject(SearchService);
+        this.#backend = inject(BackendService);
+        this.#translate = inject(TranslateService);
+        this.#notifications = inject(NotificationService);
+        this.#appCache = inject(AppCacheService);
+        this.#activeFormComponents = new Map();
+        this.elementExtensions = signal({});
+    }
+    #ngZone;
+    #router;
+    #eventService;
+    #userService;
+    #dmsService;
+    #systemService;
+    #searchService;
+    #backend;
+    #translate;
+    #notifications;
+    #appCache;
+    static { this.EVENT_MODEL_CHANGED = 'yuv.event.object-form.model.changed'; }
+    #activeFormComponents;
+    get api() {
+        return this.getApi();
+    }
+    registerActiveForm(component) {
+        const id = component.formOptions()?.formModel?.name || component?.id;
+        return id && this.#activeFormComponents.set(id, component);
+    }
+    unregisterActiveForm(component) {
+        const id = component.formOptions()?.formModel?.name || component?.id;
+        return id && this.#activeFormComponents.delete(id);
+    }
+    getApi() {
+        const formId = this.formId;
+        return {
+            elementExtensions: {
+                register: (extensions) => {
+                    extensions.forEach((ext) => {
+                        if (ext.id)
+                            this.elementExtensions.set({ ...this.elementExtensions(), [ext.id]: ext });
+                    });
+                }
+            },
+            events: {
+                yuuvisEventType: YuvEventType,
+                on: (type) => this.#ngZone.run(() => this.#eventService.on(type)),
+                trigger: (type, data) => this.#ngZone.run(() => this.#eventService.trigger(type, data))
+            },
+            session: {
+                getUser: () => this.getCurrentUser(),
+                user: {
+                    get: () => this.getCurrentUser(),
+                    hasRole: (role) => this.getCurrentUser().authorities?.includes(role) || false
+                }
+            },
+            http: {
+                get: (uri, base, options) => this.get(uri, base, options),
+                post: (uri, data, base, options) => this.post(uri, data, base, options),
+                del: (uri, base, options) => this.del(uri, base, options),
+                put: (uri, data, base, options) => this.put(uri, data, base, options)
+            },
+            form: {
+                activeForms: this.#activeFormComponents,
+                getValue: (formControlName) => Array.from(this.#activeFormComponents.values()).reduce((prev, cur) => ({ ...prev, ...(cur.formData || {}) }), {})[formControlName],
+                setValue: (formControlName, newValue) => this.api.form.modelChange(formControlName, { name: 'value', newValue }),
+                modelChange: (formControlName, change) => this.#ngZone.run(() => this.#eventService.trigger(FormScriptingApiService.EVENT_MODEL_CHANGED, {
+                    formId,
+                    formControlName,
+                    change
+                }))
+            },
+            storage: {
+                getItem: (key) => firstValueFrom(this.#appCache.getItem(key)),
+                setItem: (key, value) => firstValueFrom(this.#appCache.setItem(key, value))
+            },
+            notifier: {
+                success: (text, title) => this.#notifications.success(title, text),
+                error: (text, title) => this.#notifications.error(title, text),
+                info: (text, title) => this.#notifications.info(title, text),
+                warning: (text, title) => this.#notifications.warning(title, text)
+            },
+            util: {
+                translate: (key, data) => this.#translate.instant(key, data)
+            }
+        };
+    }
+    get(uri, base, options) {
+        return firstValueFrom(this.#backend.get(uri, base || ApiBase.none, options || { observe: 'response' }).pipe(map((res) => {
+            return options ? res : { status: res.status, data: res.body };
+        })));
+    }
+    put(uri, data, base, options) {
+        return firstValueFrom(this.#backend.put(uri, data, base || ApiBase.none, options));
+    }
+    post(uri, data, base, options) {
+        return firstValueFrom(this.#backend.post(uri, data, base || ApiBase.none, options));
+    }
+    del(uri, base, options) {
+        return firstValueFrom(this.#backend.delete(uri, base || ApiBase.none, options));
+    }
+    getCurrentUser() {
+        return this.#userService.getCurrentUser();
+    }
+    getDmsObject(id, version) {
+        return firstValueFrom(this.#dmsService.getDmsObject(id, version))
+            .then((response) => {
+            return Promise.resolve(response);
+        })
+            .catch(this.#handleError);
+    }
+    /**
+     * fetches dms objects from the server that match the given params
+     *
+     * @param fields - the fields to match. example: {name: 'max', plz: '47111}
+     * @param type - the target object type
+     */
+    getResult(fields, type) {
+        const searchQuery = {
+            filters: Object.keys(fields).map((f) => ({
+                f,
+                o: Operator.EQUAL,
+                v1: fields[f]
+            }))
+        };
+        if (type)
+            searchQuery.types = [type];
+        return firstValueFrom(this.#searchService.search(searchQuery))
+            .then((res) => {
+            return Promise.resolve(res.items.map((resItem) => {
+                new DmsObject(resItem);
+            }));
+        })
+            .catch(this.#handleError);
+    }
+    encodeFileName(filename) {
+        return Utils.encodeFileName(filename);
+    }
+    #handleError(error) {
+        return Promise.reject(error.message || error);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormScriptingApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormScriptingApiService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormScriptingApiService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Providing an error message when a translation string for an object wasn't found
+ */
+class ObjectFormTranslateService {
+    constructor() {
+        this.translate = inject(TranslateService);
+    }
+    /**
+     * Set the error label if a translation for this string wasn't provided
+     * @param error - error message about a missed translation key
+     * @param params
+     */
+    getErrorLabel(error, params) {
+        switch (error) {
+            case 'daterange':
+                return this.translate.instant('yuv.object-form-element.error.daterange.invalid', params);
+            case 'daterangeorder':
+                return this.translate.instant('yuv.object-form-element.error.daterangeorder.invalid', params);
+            case 'numberrange':
+                return this.translate.instant('yuv.object-form-element.error.numberrange.invalid', params);
+            case 'numberrangeorder':
+                return this.translate.instant('yuv.object-form-element.error.numberrangeorder.invalid', params);
+            case 'number':
+                return this.translate.instant('yuv.object-form-element.error.number', params);
+            case 'precision':
+                return this.translate.instant('yuv.object-form-element.error.number.precision', params);
+            case 'scale':
+                return this.translate.instant('yuv.object-form-element.error.number.scale', params);
+            case 'regex':
+                return this.translate.instant('yuv.object-form-element.error.string.regex.nomatch', params);
+            case 'pattern':
+                return this.translate.instant('yuv.object-form-element.error.string.regex.nomatch', params);
+            case 'classificationemail':
+                return this.translate.instant('yuv.object-form-element.error.string.classification.email', params);
+            case 'classificationphone':
+                return this.translate.instant('yuv.object-form-element.error.string.classification.phone', params);
+            case 'classificationurl':
+                return this.translate.instant('yuv.object-form-element.error.string.classification.url', params);
+            case 'onlyWhitespaces':
+                return this.translate.instant('yuv.object-form-element.error.string.whitespaces', params);
+            case 'datecontrol':
+                return this.translate.instant('yuv.object-form-element.error.date.invalid', params);
+            case 'required':
+                return this.translate.instant('yuv.object-form-element.error.required', params);
+            case 'maxlength':
+                return this.translate.instant('yuv.object-form-element.error.maxlength', params);
+            case 'minlength':
+                return this.translate.instant('yuv.object-form-element.error.minlength', params);
+            case 'minmax':
+                return this.translate.instant('yuv.object-form-element.error.minmax', params);
+            case 'minvalue':
+                return this.translate.instant('yuv.object-form-element.error.minvalue', params);
+            case 'maxvalue':
+                return this.translate.instant('yuv.object-form-element.error.maxvalue', params);
+            case 'empty':
+                return this.translate.instant('yuv.object-form-element.recent-activities.list.empty', params);
+            default:
+                return this.translate.instant(error, params);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormTranslateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * @ignore
+ * Extend angulars default FormGroup for implementation of a form group wrapping
+ * a form control.
+ */
+class ObjectFormControlWrapper extends UntypedFormGroup {
+}
+
+/**
+ * @ignore
+ * Extension of the default angular form group,
+ */
+class ObjectFormGroup extends FormGroup {
+}
+/**
+ * @ignore
+ * Extension of the default angular form control,
+ */
+class ObjectFormControl extends FormControl {
+    set _eoFormElement(v) {
+        this.__eoFormElement = v;
+    }
+    get _eoFormElement() {
+        return this.__eoFormElement;
+    }
+}
+
+/**
+ * @ignore
+ * Custom validation class.
+ */
+class FormValidation {
+    /**
+     * Build validators for the given form element to be attached to
+     * a reactive formControl.
+     *
+     * @param formElement - form element object
+     * @param situation - form situation to fetch validators for
+     */
+    static getValidators(formElement, situation) {
+        const elmValidators = [];
+        const { required, regex } = formElement;
+        // apply situation based validations
+        switch (situation) {
+            case Situation.SEARCH: {
+                // TODO: implement general validators for SEARCH situation
+                break;
+            }
+            default: {
+                if (required) {
+                    elmValidators.push(Validators.required);
+                }
+                if (regex && !formElement.multiselect) {
+                    elmValidators.push(Validators.pattern(regex));
+                }
+                break;
+            }
+        }
+        return elmValidators;
+    }
+    /**
+     *
+     * @param control - from object control
+     * @returns Validation object {eoformScript: {valid: boolean}} or null
+     */
+    static customScriptingValidation() {
+        return (control) => {
+            const ctrl = control;
+            return ctrl._eoFormElement && ctrl._eoFormElement.error ? { eoformScript: { valid: false } } : null;
+        };
+    }
+}
+
+/**
+ * Provides a rendering of form control in `ObjectFormComponent`, `QuickSearchComponent` so wie `SearchFilterFormComponent`.
+ */
+class ObjectFormUtils {
+    /**
+     * Converts a form element object to an ObjectFormControlWrapper which then can be used to
+     * render a from control. Result can be used as input for FormElementComponent.
+     *
+     * @param element - the element object or a json string
+     * @param situation - optional property to set up a form situation for the control (default is EDIT)
+     * @return the converted ObjectFormControlWrapper or null in case of an error
+     */
+    static elementToFormControl(formElement, situation) {
+        // Create the ObjectFormControlWrapper
+        const wrapper = new ObjectFormControlWrapper({});
+        const formSituation = situation ? situation : Situation.EDIT;
+        wrapper._eoFormControlWrapper = {
+            controlName: formElement.name,
+            situation: formSituation
+        };
+        // create the actual form control
+        const controlDisabled = !!formElement.readonly;
+        const formControl = new ObjectFormControl({
+            value: formElement.value,
+            disabled: controlDisabled
+        }, FormValidation.getValidators(formElement, formSituation));
+        // Form elements in SEARCH situation may arrive with a value set to NULL (explicit search for
+        // fields that are NOT set). In that case we need to prepare the form control
+        if (formSituation === Situation.SEARCH && formElement.value === null) {
+            formElement.isNotSetValue = true;
+        }
+        ObjectFormUtils.updateFormElement(formElement);
+        formControl._eoFormElement = formElement;
+        wrapper.addControl(formElement.name, formControl);
+        return wrapper;
+    }
+    /**
+     * Update a form element after change a form element object.
+     * @param formElement - the form element object
+     */
+    static updateFormElement(formElement) {
+        if (formElement.type === 'decimal' && !formElement.scale) {
+            formElement.scale = 2;
+        }
+        if (formElement.type === 'integer' && formElement.id === ContentStreamField.LENGTH) {
+            formElement.classifications = [Classification.NUMBER_FILESIZE];
+        }
+        return formElement;
+    }
+}
+
+/**
+ * @ignore
+ */
+class ObjectFormService {
+    #formExtensions = [];
+    setElementExtensions(formExtensions) {
+        this.#formExtensions = formExtensions;
+    }
+    getElementExtensions(propertyName) {
+        return this.#formExtensions.filter((ext) => ext.property === propertyName).map((ext) => ext.cmp);
+    }
+    /**
+     * Converts a form element object to an ObjectFormControlWrapper which then can be used to
+     * render a from control. Result can be used as input for FormElementComponent.
+     *
+     * @param element - the element object or a json string
+     * @param situation - optional property to set up a form situation for the control (default is EDIT)
+     * @return the converted ObjectFormControlWrapper or null in case of an error
+     */
+    elementToFormControl(element, situation) {
+        let formElement;
+        if (typeof element === 'string') {
+            try {
+                formElement = JSON.parse(element);
+            }
+            catch (e) {
+                console.error('Unable to parse form element from json ', formElement);
+            }
+        }
+        else {
+            formElement = element;
+        }
+        return formElement ? ObjectFormUtils.elementToFormControl(element, situation) : null;
+    }
+    /**
+     * Extract data from an object form based on situation.
+     *
+     * @param form - form to extract data from
+     * @param situation - form situation
+     * @param [initialData] - optional form data to match the current values against
+     * This is required for editig indexdata (EDIT situation), because we have to compare new values
+     * against the initial values. If a property that is contained in the forms initial data is removed
+     * (e.g. set to null) then we have to set this null value, because otherwise the server would
+     * ignore the changes.
+     * @param isTableRowEditForm Flag indicating that the provided form is an inline form used by
+     * a forms table element for editing rows. Those need a special handling.
+     * @return extracted data as object
+     */
+    extractFormData(form, situation, initialData, isTableRowEditForm) {
+        const extractedData = {};
+        this.#getElementValues(extractedData, form, situation || 'EDIT', initialData, isTableRowEditForm);
+        return extractedData;
+    }
+    // Recursive method to get the values from each form control.
+    #getElementValues(data, formControl, situation, initialData, isTableRowEditForm) {
+        if (!formControl || !formControl.controls) {
+            return;
+        }
+        if (formControl instanceof ObjectFormControlWrapper) {
+            const fc = formControl.controls[formControl._eoFormControlWrapper.controlName];
+            if (fc._eoFormElement.isNotSetValue === true) {
+                // form elements may explicitly set to have NULL value (e.g. from Search form if values are requested that have no values)
+                this.#setDataValue(fc._eoFormElement.name, null, data, fc._eoFormElement, !isTableRowEditForm);
+            }
+            else if (fc.value !== undefined) {
+                const val = fc.value;
+                switch (situation) {
+                    case Situation.SEARCH: {
+                        if (val !== null) {
+                            this.#setDataValue(fc._eoFormElement.name, val, data, fc._eoFormElement, !!isTableRowEditForm);
+                        }
+                        break;
+                    }
+                    case Situation.CREATE: {
+                        if (val !== null) {
+                            this.#setDataValue(fc._eoFormElement.name, val, data, fc._eoFormElement, !!isTableRowEditForm);
+                        }
+                        break;
+                    }
+                    case Situation.EDIT: {
+                        // in edit situation we have to compare new values against the initial values
+                        // If a property that is contained in the forms initial data is removed (e.g. set to null)
+                        // then we have to set this null value, because otherwise the server will ignore the changes
+                        if (val !== null || (initialData && initialData[fc._eoFormElement.name] !== undefined)) {
+                            // data[fc._eoFormElement.name] = val;
+                            this.#setDataValue(fc._eoFormElement.name, val, data, fc._eoFormElement, !!isTableRowEditForm);
+                        }
+                        break;
+                    }
+                }
+            }
+            else if (fc._eoFormElement.type === 'boolean') {
+                // tri-state boolean fields could have a value of 'undefined' that needs to be transformed
+                // into 'null' to be correctly be processed by the backend
+                this.#setDataValue(fc._eoFormElement.name, null, data, fc._eoFormElement, !!isTableRowEditForm);
+            }
+        }
+        else {
+            Object.keys(formControl.controls).forEach((controlKey) => {
+                const formControlKeyed = formControl.controls[controlKey];
+                this.#getElementValues(data, formControlKeyed, situation, initialData, isTableRowEditForm);
+            });
+        }
+    }
+    #setDataValue(key, value, data, formElement, isTableRowEditForm) {
+        data[key] = value;
+        if (isTableRowEditForm && formElement.dataMeta) {
+            if (formElement._internalType === 'string:organization') {
+                data[key + '_title'] = formElement.dataMeta.map((d) => d.title);
+            }
+            // else if (formElement._internalType === 'string:reference') {
+            //   data[key + '_title'] = formElement.dataMeta.map((e: ReferenceEntry) => e.title);
+            // }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Class to extend by form element extensions.
+ */
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+class ObjectFormElementExtension {
+    constructor() {
+        this.#formScriptingApiService = inject(FormScriptingApiService);
+        this.input = input.required();
+    }
+    #formScriptingApiService;
+    getApi() {
+        return this.#formScriptingApiService.getApi();
+    }
+    getCurrentValue() {
+        return this.getApi().form.getValue(this.input().formControlName);
+    }
+    setValue(value) {
+        // only set the value if the value is different. Otherwise the form
+        // will end up in an infinite loop
+        if (value !== this.getCurrentValue())
+            this.getApi().form.setValue(this.input().formControlName, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormElementExtension, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ObjectFormElementExtension, isStandalone: true, selector: "ng-component", inputs: { input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormElementExtension, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    standalone: true
+                }]
+        }] });
+
+class FormScriptingElementExtensionComponent extends ObjectFormElementExtension {
+    constructor() {
+        super(...arguments);
+        this.ext = input();
+        this.defaultIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-120q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h560q33 0 56.5 23.5T800-760v80h80v80h-80v80h80v80h-80v80h80v80h-80v80q0 33-23.5 56.5T720-120H160Zm0-80h560v-560H160v560Zm80-80h200v-160H240v160Zm240-280h160v-120H480v120Zm-240 80h200v-200H240v200Zm240 200h160v-240H480v240ZM160-760v560-560Z"/></svg>';
+    }
+    run() {
+        this.ext()?.callback();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormScriptingElementExtensionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormScriptingElementExtensionComponent, isStandalone: true, selector: "yuv-form-scripting-element-extension", inputs: { ext: { classPropertyName: "ext", publicName: "ext", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@let x = ext();\n@if (x) {\n  @if (x.icon) {\n    <button class=\"secondary\" (click)=\"run()\" [title]=\"x.label\">\n      <yvc-icon [svg]=\"x.icon\"></yvc-icon>\n    </button>\n  } @else if (x.label) {\n    <button class=\"secondary\" (click)=\"run()\">{{ x.label }}</button>\n  } @else {\n    <button class=\"secondary\" (click)=\"run()\">\n      <yvc-icon [svg]=\"defaultIcon\"></yvc-icon>\n    </button>\n  }\n}\n", styles: [":host button{--icon-size: 18px;color:var(--text-color-caption);padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormScriptingElementExtensionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-form-scripting-element-extension', standalone: true, imports: [CommonModule, YvcIconModule], template: "@let x = ext();\n@if (x) {\n  @if (x.icon) {\n    <button class=\"secondary\" (click)=\"run()\" [title]=\"x.label\">\n      <yvc-icon [svg]=\"x.icon\"></yvc-icon>\n    </button>\n  } @else if (x.label) {\n    <button class=\"secondary\" (click)=\"run()\">{{ x.label }}</button>\n  } @else {\n    <button class=\"secondary\" (click)=\"run()\">\n      <yvc-icon [svg]=\"defaultIcon\"></yvc-icon>\n    </button>\n  }\n}\n", styles: [":host button{--icon-size: 18px;color:var(--text-color-caption);padding:2px}\n"] }]
+        }] });
+
+class ObjectFormElementComponent {
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#formTranslateService = inject(ObjectFormTranslateService);
+        this.#objectFormService = inject(ObjectFormService);
+        this.#scriptingApi = inject(FormScriptingApiService);
+        this.createForm = signal(false);
+        this.extensionComponents = [];
+        this.#scriptingExtensions = this.#scriptingApi.elementExtensions;
+        this.scriptingExtensions = computed(() => Object.values(this.#scriptingExtensions()).filter((ext) => ext.propertyName === this.formControlName));
+        this.scriptExtensionCmp = FormScriptingElementExtensionComponent;
+        this.situation = input();
+        this.element = input();
+        this.#elementEffect = effect(() => {
+            const element = this.element();
+            untracked(() => {
+                this.createForm.set(true);
+                element && this.#setElement(this.element());
+            });
+        });
+    }
+    #destroyRef;
+    #formTranslateService;
+    #objectFormService;
+    #scriptingApi;
+    #scriptingExtensions;
+    #elementEffect;
+    get extensionComponentInput() {
+        const xti = {
+            formControlName: this.formControlName || ''
+        };
+        return xti;
+    }
+    #setElement(el) {
+        if (el && el._eoFormControlWrapper) {
+            this.formControlName = el._eoFormControlWrapper.controlName;
+            this.formElementRef = el.controls[this.formControlName];
+            this.formElementRef._eoFormElement = this.#setGrouping(this.formElementRef?._eoFormElement);
+            this.formElementRef?.valueChanges.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => this.#setupErrors());
+            this.extensionComponents = this.#objectFormService.getElementExtensions(this.formControlName);
+            this.createForm.set(false);
+        }
+    }
+    /**
+     * formating rules...
+     * https://wiki.optimal-systems.de/display/PM/Status+yuuvis+Momentum+-+Flex+client
+     */
+    #setGrouping(formElement) {
+        return { ...formElement, grouping: !!formElement?.classifications?.includes(Classification.NUMBER_DIGIT) };
+    }
+    onDataMetaChange(data) {
+        this.formElementRef._eoFormElement.dataMeta = data;
+    }
+    #setupErrors() {
+        this.errors = undefined;
+        if ((this.situation() !== Situation.SEARCH && this.situation() !== Situation.CREATE && this.formElementRef.errors) ||
+            ((this.situation() === Situation.SEARCH || this.situation() === Situation.CREATE) &&
+                this.formElementRef.errors &&
+                (this.formElementRef.dirty || this.formElementRef.touched))) {
+            this.errors = Object.keys(this.formElementRef.errors).map((key) => {
+                return key === 'eoformScript'
+                    ? this.formElementRef._eoFormElement.error.msg
+                    : this.#formTranslateService.getErrorLabel(key, this.formElementRef.errors[key].params);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ObjectFormElementComponent, isStandalone: true, selector: "yuv-object-form-element", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "yuv-object-form-element" }, ngImport: i0, template: "@let el = element();\n\n@if (!createForm()) {\n  @if (el && formElementRef) {\n    <div class=\"form-element input\" [formGroup]=\"el\">\n      <yuv-metadata-form-field\n        [field]=\"formElementRef._eoFormElement\"\n        [formControlName]=\"el._eoFormControlWrapper!.controlName\"\n        [situation]=\"situation()\"\n      ></yuv-metadata-form-field>\n\n      <div class=\"ext\">\n        @for (cmp of extensionComponents; track $index) {\n          <ng-container *ngComponentOutlet=\"cmp; inputs: { input: extensionComponentInput }\"></ng-container>\n        }\n        @for (scmp of scriptingExtensions(); track $index) {\n          <ng-container *ngComponentOutlet=\"scriptExtensionCmp; inputs: { ext: scmp }\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [":host{flex:1 1 auto}.yuv-object-form-element .form-element{box-sizing:border-box;display:flex;flex-flow:row nowrap}.yuv-object-form-element .form-element .ext{display:flex;flex-flow:row nowrap;gap:2px;align-items:center}.yuv-object-form-element .form-element yuv-metadata-form-field{width:100%}.yuv-object-form-element .form-element .form-field{padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2)}.yuv-object-form-element .form-element .form-field .description{border:0;font-size:var(--font-hint);color:var(--text-color-caption);font-style:italic;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 8) 0 calc(var(--app-pane-padding) / 8)}.yuv-object-form-element .form-element .form-field .err-msg{font-size:var(--font-hint);color:var(--color-error);padding:calc(var(--app-pane-padding) / 4) 0;border:0}.yuv-object-form-element .form-element .form-field .table{flex-flow:column;align-items:flex-start;border:1px solid var(--panel-divider-color)}.yuv-object-form-element .form-element .form-field .table .label{padding-bottom:calc(var(--app-pane-padding) / 4)}.yuv-object-form-element .form-element .form-field .table.invalid{border:1px solid var(--color-error)}.yuv-object-form-element .form-element .form-field.inlineError .err-msg{display:none}.yuv-object-form-element .form-element.ng-dirty:not(.ng-invalid)>.form-field:not(.focused)::ng-deep .fe-wrapper>label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["field", "situation"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-form-element', standalone: true, imports: [CommonModule, MetadataFormFieldComponent, NgComponentOutlet, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, host: { class: 'yuv-object-form-element' }, template: "@let el = element();\n\n@if (!createForm()) {\n  @if (el && formElementRef) {\n    <div class=\"form-element input\" [formGroup]=\"el\">\n      <yuv-metadata-form-field\n        [field]=\"formElementRef._eoFormElement\"\n        [formControlName]=\"el._eoFormControlWrapper!.controlName\"\n        [situation]=\"situation()\"\n      ></yuv-metadata-form-field>\n\n      <div class=\"ext\">\n        @for (cmp of extensionComponents; track $index) {\n          <ng-container *ngComponentOutlet=\"cmp; inputs: { input: extensionComponentInput }\"></ng-container>\n        }\n        @for (scmp of scriptingExtensions(); track $index) {\n          <ng-container *ngComponentOutlet=\"scriptExtensionCmp; inputs: { ext: scmp }\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [":host{flex:1 1 auto}.yuv-object-form-element .form-element{box-sizing:border-box;display:flex;flex-flow:row nowrap}.yuv-object-form-element .form-element .ext{display:flex;flex-flow:row nowrap;gap:2px;align-items:center}.yuv-object-form-element .form-element yuv-metadata-form-field{width:100%}.yuv-object-form-element .form-element .form-field{padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2)}.yuv-object-form-element .form-element .form-field .description{border:0;font-size:var(--font-hint);color:var(--text-color-caption);font-style:italic;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 8) 0 calc(var(--app-pane-padding) / 8)}.yuv-object-form-element .form-element .form-field .err-msg{font-size:var(--font-hint);color:var(--color-error);padding:calc(var(--app-pane-padding) / 4) 0;border:0}.yuv-object-form-element .form-element .form-field .table{flex-flow:column;align-items:flex-start;border:1px solid var(--panel-divider-color)}.yuv-object-form-element .form-element .form-field .table .label{padding-bottom:calc(var(--app-pane-padding) / 4)}.yuv-object-form-element .form-element .form-field .table.invalid{border:1px solid var(--color-error)}.yuv-object-form-element .form-element .form-field.inlineError .err-msg{display:none}.yuv-object-form-element .form-element.ng-dirty:not(.ng-invalid)>.form-field:not(.focused)::ng-deep .fe-wrapper>label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}\n"] }]
+        }] });
+
+class ObjectFormGroupComponent {
+    constructor() {
+        this.types = {
+            STACK: 'stack',
+            GROUP: 'group',
+            FIELDSET: 'fieldset'
+        };
+        this.isCore = false;
+        this.isData = false;
+        // @ViewChild('tabView') tabView: TabView;
+        // form situation, if not set default will be 'EDIT'
+        this.situation = Situation.EDIT;
+        this.group = input();
+        this.#groupEffect = effect(() => {
+            const g = this.group();
+            if (g) {
+                this.isCore = !!g._eoFormGroup && g._eoFormGroup.label === 'core';
+                this.isData = !!g._eoFormGroup && g._eoFormGroup.label === 'data';
+                this.groupType = this.#getGroupType();
+            }
+        });
+        this.noGroupLabels = input();
+    }
+    #groupEffect;
+    getHeaderStyleClass(ctrl) {
+        return `dirty-${ctrl.dirty} invalid-${ctrl.invalid}`;
+    }
+    getChildControl(ctrl) {
+        return ctrl;
+    }
+    getObjectFormGroup(control) {
+        return control._eoFormGroup;
+    }
+    getObjectFormControlWrapper(control) {
+        return control?._eoFormControlWrapper;
+    }
+    getElement(control) {
+        return control;
+    }
+    #getGroupType() {
+        // may as well be an ObjectFormControlWrapper so check first
+        // if we got a real group
+        const group = this.group();
+        if (group?._eoFormGroup) {
+            if (group._eoFormGroup.type === 'o2mGroupStack') {
+                // for data section only render as stack (tabs) if we have more than one child
+                if (this.isData && Object.keys(group.controls).length === 1) {
+                    return this.types.GROUP;
+                }
+                return this.types.STACK;
+            }
+            if (group._eoFormGroup.type === 'o2mGroup') {
+                return group._eoFormGroup.label && !(this.isCore || this.isData) && !this.noGroupLabels && !this.#parentIsStack(group)
+                    ? this.types.FIELDSET
+                    : this.types.GROUP;
+            }
+            return this.types.GROUP;
+        }
+        else
+            return undefined;
+    }
+    #parentIsStack(group) {
+        const parentFormElement = group.parent && group.parent['_eoFormGroup'];
+        return parentFormElement && parentFormElement.type === 'o2mGroupStack';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ObjectFormGroupComponent, isStandalone: true, selector: "yuv-object-form-group", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: false, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, noGroupLabels: { classPropertyName: "noGroupLabels", publicName: "noGroupLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let grp = group();\n@if (grp) {\n  <div\n    class=\"form-element {{ grp._eoFormGroup ? grp._eoFormGroup.type : 'o2mControlWrap' }} align-{{\n      grp._eoFormGroup && grp._eoFormGroup.layout ? grp._eoFormGroup.layout.align : ''\n    }}\"\n    [formGroup]=\"grp\"\n  >\n    @switch (groupType) {\n      <!-- group stacks (tabs) -->\n      @case ('stack') {\n        <yvc-tabs>\n          @for (key of grp.controls | keys; track key) {\n            <ng-template\n              [yvcTab]=\"{\n                id: key,\n                headerStyleClass: getHeaderStyleClass(grp.controls[key]),\n                label: getObjectFormGroup(grp.controls[key])?.label || ''\n              }\"\n            >\n              <div class=\"stack\" [ngClass]=\"{ stackBase: grp._eoFormGroup?.label === 'data' }\">\n                @if (getObjectFormControlWrapper(grp.controls[key])) {\n                  <yuv-object-form-element [element]=\"getElement(grp.controls[key])\" [situation]=\"situation\"></yuv-object-form-element>\n                } @else {\n                  <yuv-object-form-group [group]=\"getChildControl(grp.controls[key])\" [noGroupLabels]=\"true\" [situation]=\"situation\"></yuv-object-form-group>\n                }\n              </div>\n            </ng-template>\n          }\n        </yvc-tabs>\n      }\n\n      <!-- group with legend -->\n      @case ('fieldset') {\n        <div class=\"om-group fieldset\">\n          <div class=\"legend\">\n            <span>{{ grp._eoFormGroup?.label }}</span>\n          </div>\n\n          <div>\n            @for (key of grp.controls | keys; track key) {\n              @if (getObjectFormControlWrapper(grp.controls[key])) {\n                <yuv-object-form-element [element]=\"getElement(grp.controls[key])\" [situation]=\"situation\"></yuv-object-form-element>\n              } @else {\n                <yuv-object-form-group [group]=\"getChildControl(grp.controls[key])\" [noGroupLabels]=\"true\" [situation]=\"situation\"></yuv-object-form-group>\n              }\n            }\n          </div>\n        </div>\n      }\n      <!-- group -->\n      @case ('group') {\n        @for (key of grp.controls | keys; track key) {\n          @if (getObjectFormControlWrapper(grp.controls[key])) {\n            <yuv-object-form-element [element]=\"getElement(grp.controls[key])\" [situation]=\"situation\"></yuv-object-form-element>\n          } @else {\n            <yuv-object-form-group [group]=\"getChildControl(grp.controls[key])\" [noGroupLabels]=\"true\" [situation]=\"situation\"></yuv-object-form-group>\n          }\n        }\n      }\n    }\n  </div>\n}\n", styles: [".form-element{box-sizing:border-box}.form-element .fieldset{margin:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2);padding:calc(var(--app-pane-padding) / 4);background:#00000006;border:1px solid rgba(0,0,0,.1)}.dark .form-element .fieldset{background:#ffffff06;border-color:#ffffff1a}.contrast .form-element .fieldset{background-color:transparent;border-color:var(--panel-divider-color)}.form-element .fieldset .legend{margin-bottom:calc(var(--app-pane-padding) / 2)}.form-element .fieldset .legend>span{display:inline-block;font-size:var(--font-hint);border-radius:2px;color:#fff;background-color:#00000038;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 4)}.dark .form-element .fieldset .legend>span{background-color:#ffffff38}.contrast .form-element .fieldset .legend>span{background-color:var(--panel-divider-color);color:var(--panel-background)}.form-element.o2mGroupStack{background:#00000005;border:1px solid rgba(0,0,0,.1)}.dark .form-element.o2mGroupStack{background:#ffffff05;border:1px solid rgba(255,255,255,.1)}.contrast .form-element.o2mGroupStack{background-color:transparent;border-color:var(--panel-divider-color)}.form-element.o2mGroupStack .p-tabview.p-component .p-tabview-panels{background:#fff;overflow:initial}.dark .form-element.o2mGroupStack .p-tabview.p-component .p-tabview-panels{background:#ffffff0a}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav li.p-highlight{border-color:#00000042}.dark .form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav li.p-highlight{border-color:#ffffff42}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav>li:not(.p-highlight):not(.p-disabled):hover{border-color:#00000029}.dark .form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav>li:not(.p-highlight):not(.p-disabled):hover{border-color:#ffffff29}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav-container>.p-tabview-nav-content>.p-tabview-nav li.dirty-true:not(.invalid-true) a .p-tabview-title{background-color:var(--color-dirty-background);color:var(--color-dirty-font)}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav-container>.p-tabview-nav-content>.p-tabview-nav li.invalid-true a .p-tabview-title{background-color:var(--color-error);color:#fff}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav-container>.p-tabview-nav-content>.p-tabview-nav li.invalid-true a .p-tabview-title:after{content:\"!\";margin-left:calc(var(--app-pane-padding) / 2)}.form-element.align-column{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-content:stretch;align-items:stretch}.form-element.align-column>*{flex:1 1 auto}.form-element.align-row{display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.form-element.align-row>*{flex:1 0 200px;max-width:100%}.form-element.align-row>.fieldset>:not(.legend){display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.form-element .stackBase{padding:var(--app-pane-padding);background:var(--panel-background-lightgrey)}.form-element .stackBase>yuv-form-group>.form-element>.fieldset{margin:0;padding:0;border:0;background-color:transparent}.form-element .stackBase>yuv-form-group>.form-element>.fieldset>.legend{display:none}\n"], dependencies: [{ kind: "component", type: ObjectFormGroupComponent, selector: "yuv-object-form-group", inputs: ["situation", "group", "noGroupLabels"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: YvcTabsModule }, { kind: "component", type: i2$1.Tabs, selector: "yvc-tabs", inputs: ["tabs", "layoutSettingsID", "panelOrder", "panelOrderIncludeUnmentioned", "cacheViews", "tabSplitEnabled", "tabRemoveEnabled"], outputs: ["tabSplit", "tabRemove", "tabChange"] }, { kind: "directive", type: i2$1.YvcTabDirective, selector: "[yvcTab]", inputs: ["yvcTab"] }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "component", type: ObjectFormElementComponent, selector: "yuv-object-form-element", inputs: ["situation", "element"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-form-group', standalone: true, imports: [CommonModule, YvcTabsModule, KeysPipe, ObjectFormElementComponent, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, template: "@let grp = group();\n@if (grp) {\n  <div\n    class=\"form-element {{ grp._eoFormGroup ? grp._eoFormGroup.type : 'o2mControlWrap' }} align-{{\n      grp._eoFormGroup && grp._eoFormGroup.layout ? grp._eoFormGroup.layout.align : ''\n    }}\"\n    [formGroup]=\"grp\"\n  >\n    @switch (groupType) {\n      <!-- group stacks (tabs) -->\n      @case ('stack') {\n        <yvc-tabs>\n          @for (key of grp.controls | keys; track key) {\n            <ng-template\n              [yvcTab]=\"{\n                id: key,\n                headerStyleClass: getHeaderStyleClass(grp.controls[key]),\n                label: getObjectFormGroup(grp.controls[key])?.label || ''\n              }\"\n            >\n              <div class=\"stack\" [ngClass]=\"{ stackBase: grp._eoFormGroup?.label === 'data' }\">\n                @if (getObjectFormControlWrapper(grp.controls[key])) {\n                  <yuv-object-form-element [element]=\"getElement(grp.controls[key])\" [situation]=\"situation\"></yuv-object-form-element>\n                } @else {\n                  <yuv-object-form-group [group]=\"getChildControl(grp.controls[key])\" [noGroupLabels]=\"true\" [situation]=\"situation\"></yuv-object-form-group>\n                }\n              </div>\n            </ng-template>\n          }\n        </yvc-tabs>\n      }\n\n      <!-- group with legend -->\n      @case ('fieldset') {\n        <div class=\"om-group fieldset\">\n          <div class=\"legend\">\n            <span>{{ grp._eoFormGroup?.label }}</span>\n          </div>\n\n          <div>\n            @for (key of grp.controls | keys; track key) {\n              @if (getObjectFormControlWrapper(grp.controls[key])) {\n                <yuv-object-form-element [element]=\"getElement(grp.controls[key])\" [situation]=\"situation\"></yuv-object-form-element>\n              } @else {\n                <yuv-object-form-group [group]=\"getChildControl(grp.controls[key])\" [noGroupLabels]=\"true\" [situation]=\"situation\"></yuv-object-form-group>\n              }\n            }\n          </div>\n        </div>\n      }\n      <!-- group -->\n      @case ('group') {\n        @for (key of grp.controls | keys; track key) {\n          @if (getObjectFormControlWrapper(grp.controls[key])) {\n            <yuv-object-form-element [element]=\"getElement(grp.controls[key])\" [situation]=\"situation\"></yuv-object-form-element>\n          } @else {\n            <yuv-object-form-group [group]=\"getChildControl(grp.controls[key])\" [noGroupLabels]=\"true\" [situation]=\"situation\"></yuv-object-form-group>\n          }\n        }\n      }\n    }\n  </div>\n}\n", styles: [".form-element{box-sizing:border-box}.form-element .fieldset{margin:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2);padding:calc(var(--app-pane-padding) / 4);background:#00000006;border:1px solid rgba(0,0,0,.1)}.dark .form-element .fieldset{background:#ffffff06;border-color:#ffffff1a}.contrast .form-element .fieldset{background-color:transparent;border-color:var(--panel-divider-color)}.form-element .fieldset .legend{margin-bottom:calc(var(--app-pane-padding) / 2)}.form-element .fieldset .legend>span{display:inline-block;font-size:var(--font-hint);border-radius:2px;color:#fff;background-color:#00000038;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 4)}.dark .form-element .fieldset .legend>span{background-color:#ffffff38}.contrast .form-element .fieldset .legend>span{background-color:var(--panel-divider-color);color:var(--panel-background)}.form-element.o2mGroupStack{background:#00000005;border:1px solid rgba(0,0,0,.1)}.dark .form-element.o2mGroupStack{background:#ffffff05;border:1px solid rgba(255,255,255,.1)}.contrast .form-element.o2mGroupStack{background-color:transparent;border-color:var(--panel-divider-color)}.form-element.o2mGroupStack .p-tabview.p-component .p-tabview-panels{background:#fff;overflow:initial}.dark .form-element.o2mGroupStack .p-tabview.p-component .p-tabview-panels{background:#ffffff0a}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav li.p-highlight{border-color:#00000042}.dark .form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav li.p-highlight{border-color:#ffffff42}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav>li:not(.p-highlight):not(.p-disabled):hover{border-color:#00000029}.dark .form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav>li:not(.p-highlight):not(.p-disabled):hover{border-color:#ffffff29}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav-container>.p-tabview-nav-content>.p-tabview-nav li.dirty-true:not(.invalid-true) a .p-tabview-title{background-color:var(--color-dirty-background);color:var(--color-dirty-font)}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav-container>.p-tabview-nav-content>.p-tabview-nav li.invalid-true a .p-tabview-title{background-color:var(--color-error);color:#fff}.form-element.o2mGroupStack .p-tabview.p-component>.p-tabview-nav-container>.p-tabview-nav-content>.p-tabview-nav li.invalid-true a .p-tabview-title:after{content:\"!\";margin-left:calc(var(--app-pane-padding) / 2)}.form-element.align-column{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-content:stretch;align-items:stretch}.form-element.align-column>*{flex:1 1 auto}.form-element.align-row{display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.form-element.align-row>*{flex:1 0 200px;max-width:100%}.form-element.align-row>.fieldset>:not(.legend){display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.form-element .stackBase{padding:var(--app-pane-padding);background:var(--panel-background-lightgrey)}.form-element .stackBase>yuv-form-group>.form-element>.fieldset{margin:0;padding:0;border:0;background-color:transparent}.form-element .stackBase>yuv-form-group>.form-element>.fieldset>.legend{display:none}\n"] }]
+        }], propDecorators: { situation: [{
+                type: Input
+            }] } });
+
+/**
+ * @ignore
+ */
+class ObjectFormScriptService {
+    constructor(logger, backend) {
+        this.logger = logger;
+        this.backend = backend;
+    }
+    /**
+     * Run a form script.
+     * @param scope - the current scripting scope
+     * @param script - the script to be executed
+     * @param [scriptName] - the scripts name
+     */
+    runFormScript(scope, script, scriptName) {
+        try {
+            // Define form script the function
+            const formScriptFunction = this.defineFunction('Formscript/' + scriptName, script);
+            // run the form script
+            const formScriptReturn = formScriptFunction(scope);
+            // Check if the form script returns something and may export global scripts
+            if (formScriptReturn) {
+                this.importGlobalScriptsAndCallInit(scope, formScriptReturn);
+            }
+        }
+        catch (e) {
+            if (e instanceof SyntaxError) {
+                alert('Syntax error in Form-Script. See console log for details.');
+            }
+            this.logger.error('Got script error', e);
+        }
+    }
+    /**
+     * Define form script function, appending source url as comment.
+     * Enables debugging using browser debugging tools (Chrome+Firefox)
+     * @see: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources
+     *
+     * @param name - the name of the script
+     * @param script - script to be wrapped in a function
+     * @returns the function
+     */
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    defineFunction(name, script) {
+        // Appending source url as comment. See https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources
+        // Enables debugging using browser debugging tools (Chrome+Firefox)
+        // The line feed is needed, if the script has a comment in the last line
+        return new Function('scope', script + '\n;//# sourceURL=' + name + '.js');
+    }
+    /**
+     * If the script contains global script, this function will import and run them
+     * before running the actual script.
+     *
+     * @param scope - the current scripting scope
+     * @param formScriptReturn - the return value of the actual form script
+     */
+    importGlobalScriptsAndCallInit(scope, formScriptReturn) {
+        if (!formScriptReturn.init) {
+            return;
+        }
+        if (formScriptReturn.uses) {
+            // collect the global script exports promises
+            const exports = [];
+            const globals = [];
+            // collect Observables for fetching global scripts
+            for (const use of formScriptReturn.uses) {
+                globals.push(this.resolveGlobalScript(use, scope));
+            }
+            forkJoin(globals).subscribe((globalReturns) => {
+                for (const scriptReturn of globalReturns) {
+                    exports.push(scriptReturn['exports']);
+                }
+                // Invoke init function on form script return with the
+                // collected exports using javascript apply magic
+                formScriptReturn.init.apply(this, exports);
+            });
+        }
+        else {
+            // invoke init direct (no use of global scripts)
+            formScriptReturn.init();
+        }
+    }
+    /**
+     * Fetch global scripts.
+     * @param name - the name of the global script
+     * @param scope - the current scripting scope
+     * @returns
+     */
+    resolveGlobalScript(name, scope) {
+        const requestOptions = {
+            headers: new HttpHeaders({
+                Accept: 'text/plain'
+            }),
+            responseType: 'text'
+        };
+        return this.backend.get(`/script/${name}/script`, undefined, requestOptions).pipe(map$1((res) => {
+            // define the global function ...
+            const globalScript = this.defineFunction('Global/' + name, res);
+            // ... and run it
+            return globalScript(scope);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormScriptService, deps: [{ token: i1$2.Logger }, { token: i1$2.BackendService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormScriptService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormScriptService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$2.Logger }, { type: i1$2.BackendService }] });
+
+/**
+ * @ignore
+ * This class will be injected as scope into form scripts.
+ */
+class ObjectFormScriptingScope {
+    /**
+     * Constructor
+     * @param situation - Current form model situation (could be CREATE, SEARCH or EDIT)
+     * @param onScriptingModelChange - callback function to be called when the scripting model changed
+     * Be aware to provide an instance method as callback for the scripting scope.
+     * @see: https://blog.johnnyreilly.com/2014/04/typescript-instance-methods.html
+     *
+     * @param api - Plugin API reference
+     * @param isTableRowScope - set this to true if the current scripting scope is created for a
+     * row editing form from a table element. It will then provide the right parameters for the scripting functions
+     */
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    constructor(situation, onScriptingModelChange, api, isTableRowScope) {
+        this.situation = situation;
+        this.onScriptingModelChange = onScriptingModelChange;
+        this.api = api;
+        this.isTableRowScope = isTableRowScope;
+        // List of all form fields (elements)
+        this.model = {};
+        // all data values including invisible elements (READONLY)
+        this.data = {};
+        // actions passed by BPM forms
+        this.actions = {};
+        // additional objects provided by the object form
+        // used for example to pass dms objects attached to a work item
+        // to the script (READONLY)
+        // may contain: FormScriptDmsObject, FileEntry
+        this.objects = [];
+        this.context = { id: '', title: '', objectTypeId: '' };
+    }
+    /**
+     * Sets the internal model and wraps every model element with an observer to be
+     * able to track their changes from within a form script
+     * @param model
+     */
+    setModel(model) {
+        this.model = {};
+        for (const k of Object.keys(model)) {
+            this.model[k] = new ScopeElement(model[k], this.onScriptingModelChange);
+        }
+    }
+    /**
+     * Returns the observed model. Used for row editing forms of table elements that
+     * create their own scripting scope in context of their parent form.
+     * @returns the observed scripting scope model
+     */
+    getModel() {
+        return this.model;
+    }
+    /**
+     * Called by the object form when the form model changes.
+     * @param change - object with key equals name of the element
+     * that changes and value of the new value
+     */
+    modelChanged(change) {
+        // find the changed element in the scopes model
+        const propertyName = Object.keys(change)[0];
+        if (change[propertyName] === undefined) {
+            return;
+        }
+        if (this.model[propertyName]) {
+            const el = this.model[propertyName];
+            el.update(change[propertyName], this.model);
+        }
+    }
+}
+/**
+ * @ignore
+ */
+class ScopeElement {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    constructor(element, onScriptingModelChange) {
+        this.element = element;
+        this.onScriptingModelChange = onScriptingModelChange;
+        if (this.element.value === undefined) {
+            this.element.value = null;
+        }
+        if (this.isProxyable(this.element.value)) {
+            this.element.value = this.createProxy(this.element.value);
+        }
+    }
+    isProxyable(value, key) {
+        return ((typeof value === 'object' || Array.isArray(value)) &&
+            value !== null &&
+            !(value instanceof Date) &&
+            !value.isProxy &&
+            (key ? !key.includes('_meta') : true));
+    }
+    createProxy(value) {
+        const handler = {
+            set: (target, key, val) => {
+                const previousValue = structuredClone(this.element.value);
+                if (this.isProxyable(val, key)) {
+                    target[key] = this.createProxy(val);
+                }
+                else {
+                    target[key] = val;
+                }
+                if (this.hasValueChanged(this.element.value, previousValue) && !key.includes('_meta')) {
+                    this.onScriptingModelChange(this.element.name, { newValue: structuredClone(this.element.value), name: 'value' });
+                }
+                return true;
+            },
+            // This get trap is only used to find out, if an object is a proxy or not.
+            get: (target, key) => {
+                if (key === 'isProxy') {
+                    return true;
+                }
+                return target[key];
+            }
+        };
+        Object.keys(value).forEach((key) => {
+            if (this.isProxyable(value[key], key)) {
+                value[key] = this.createProxy(value[key]);
+            }
+        });
+        return new Proxy(value, handler);
+    }
+    hasValueChanged(value1, value2) {
+        return JSON.stringify(value1) !== JSON.stringify(value2);
+    }
+    update(value, model) {
+        const newValue = structuredClone(value);
+        if (this.hasValueChanged(this.element.value, value)) {
+            if (this.isProxyable(value)) {
+                this.element.value = this.createProxy(newValue);
+            }
+            else {
+                this.element.value = newValue;
+            }
+            if (this.element.onchange) {
+                this.element.onchange(this, model);
+            }
+        }
+    }
+    set value(value) {
+        if (this.hasValueChanged(this.element.value, value)) {
+            if (this.isProxyable(value)) {
+                this.element.value = this.createProxy(value);
+            }
+            else {
+                this.element.value = value;
+            }
+            this.onScriptingModelChange(this.element.name, { newValue: structuredClone(this.element.value), name: 'value' });
+        }
+    }
+    get value() {
+        return this.element.value;
+    }
+    set onchange(onchange) {
+        this.element.onchange = onchange;
+        this.onScriptingModelChange(this.element.name, { newValue: onchange, name: 'onchange' });
+    }
+    get onchange() {
+        return this.element.onchange;
+    }
+    set required(required) {
+        this.element.required = required;
+        this.onScriptingModelChange(this.element.name, { newValue: required, name: 'required' });
+    }
+    get required() {
+        return this.element.required;
+    }
+    set readonly(readonly) {
+        this.element.readonly = readonly;
+        this.onScriptingModelChange(this.element.name, { newValue: readonly, name: 'readonly' });
+    }
+    get readonly() {
+        return this.element.readonly;
+    }
+    set error(error) {
+        this.element.error = error;
+        this.onScriptingModelChange(this.element.name, { newValue: error, name: 'error' });
+    }
+    get error() {
+        return this.element.error;
+    }
+    set onrowedit(onrowedit) {
+        this.element.onrowedit = onrowedit;
+        this.onScriptingModelChange(this.element.name, { newValue: onrowedit, name: 'onrowedit' });
+    }
+    get onrowedit() {
+        return this.element.onrowedit;
+    }
+    setList(obj) {
+        if (this.element.setList) {
+            this.element.setList(obj);
+        }
+    }
+    applyFilter(obj) {
+        if (this.element.applyFilter) {
+            this.element.applyFilter(obj);
+        }
+    }
+    setFilter(obj) {
+        if (this.element.setFilter) {
+            this.element.setFilter(obj);
+        }
+    }
+    get name() {
+        return this.element.name;
+    }
+    get qname() {
+        return this.element.qname;
+    }
+    get label() {
+        return this.element.label;
+    }
+    get description() {
+        return this.element.description;
+    }
+    get type() {
+        return this.element.type;
+    }
+    get multiselect() {
+        return this.element.multiselect;
+    }
+    get codesystem() {
+        return this.element.codesystem;
+    }
+    get minlen() {
+        return this.element.minLength;
+    }
+    get maxlen() {
+        return this.element.maxLength;
+    }
+    get classifications() {
+        return this.element.classifications;
+    }
+    get scale() {
+        return this.element.scale;
+    }
+    get precision() {
+        return this.element.precision;
+    }
+    get withtime() {
+        return this.element.withtime;
+    }
+    get elements() {
+        return this.element.elements;
+    }
+    get aliases() {
+        return this.element.aliases;
+    }
+}
+
+class ObjectFormComponent {
+    #elementRef;
+    #systemService;
+    #formScriptService;
+    #formHelperService;
+    #userService;
+    #cdRef;
+    #formScriptingApiService;
+    #skipTranslationsFor;
+    #namePrefix;
+    #formOptionsEffect;
+    #elementExtensionsEffect;
+    #scriptModel;
+    #scriptingScope;
+    #subscriptions;
+    // local store for all the form control references
+    #formControls;
+    #initialValidators;
+    constructor() {
+        this.#elementRef = inject(ElementRef);
+        this.#systemService = inject(SystemService);
+        this.#formScriptService = inject(ObjectFormScriptService);
+        this.#formHelperService = inject(ObjectFormService);
+        this.#userService = inject(UserService);
+        this.#cdRef = inject(ChangeDetectorRef);
+        this.#formScriptingApiService = inject(FormScriptingApiService);
+        this.#skipTranslationsFor = ['core', 'data'];
+        this.#namePrefix = 'fg_';
+        this.gCount = 0;
+        this.id = Utils.uuid();
+        this.formOptions = input();
+        this.#formOptionsEffect = effect(() => {
+            this.#init(this.formOptions());
+        });
+        this.inert = input();
+        this.elementExtensions = input([]);
+        this.#elementExtensionsEffect = effect(() => {
+            this.#formHelperService.setElementExtensions(this.elementExtensions());
+        });
+        /**
+         * There are special scenarios where forms are within a form themselves.
+         * Setting this property to true, will handle the current form in a
+         * slightly different way when it comes to form scripting.
+         */
+        this.isInnerTableForm = input();
+        /**
+         * triggered when the forms state has been changed
+         */
+        this.statusChanged = output();
+        /**
+         * handler to be executed after the form has been set up
+         */
+        this.onFormReady = output();
+        this.#scriptModel = {};
+        this.#subscriptions = [];
+        // local store for all the form control references
+        this.#formControls = {};
+        this.#initialValidators = {};
+        /**
+         * This method will be called each time the script changes its internal model.
+         * It is used to transfer the script changes to the actual form model.
+         *
+         * To ensure the right context, we define an instance method as callback for the scripting scope
+         * @see: https://blog.johnnyreilly.com/2014/04/typescript-instance-methods.html
+         *
+         * @param formControlName
+         * @param change
+         */
+        this.#onScriptingModelChanged = (formControlName, change, formId) => {
+            if (!this.form || (formId && this.id !== formId))
+                return;
+            // find the target control
+            const fc = this.#formControls[formControlName];
+            if (fc) {
+                // change only allowed properties
+                switch (change.name) {
+                    case 'value': {
+                        if (Array.isArray(change.newValue)) {
+                            this.#processArrayValueChange(fc, change);
+                        }
+                        else {
+                            fc._eoFormElement.value = change.newValue;
+                            if (fc.value !== change.newValue) {
+                                fc.patchValue(change.newValue);
+                                fc.updateValueAndValidity();
+                                fc.markAsDirty();
+                            }
+                        }
+                        this.form.markAsDirty();
+                        break;
+                    }
+                    case 'required': {
+                        fc._eoFormElement.required = change.newValue;
+                        // apply new validators
+                        // @see: https://scotch.io/tutorials/how-to-implement-conditional-validation-in-angular-2-model-driven-forms
+                        fc.setValidators(Validators.compose(this.#getValidators(fc._eoFormElement).concat([this.#initialValidators[fc._eoFormElement.name]])));
+                        // need to mark form control as touched because otherwise form validation will not show
+                        // error messages
+                        fc.markAsTouched();
+                        fc.updateValueAndValidity();
+                        break;
+                    }
+                    case 'readonly': {
+                        fc._eoFormElement.readonly = change.newValue;
+                        if (change.newValue === true) {
+                            fc.disable();
+                        }
+                        else {
+                            fc.enable();
+                        }
+                        break;
+                    }
+                    case 'error': {
+                        fc._eoFormElement.error = change.newValue;
+                        fc.markAsTouched();
+                        fc.updateValueAndValidity();
+                        break;
+                    }
+                    // new onrowedit function was applied by the script
+                    case 'onrowedit': {
+                        fc._eoFormElement.onrowedit = change.newValue;
+                        break;
+                    }
+                    // new onchange function was applied by the script
+                    case 'onchange': {
+                        fc._eoFormElement.onchange = change.newValue;
+                        break;
+                    }
+                }
+                this.#cdRef.detectChanges();
+            }
+        };
+        this.#formScriptingApiService.formId = this.id;
+        this.#formScriptingApiService.api.events
+            .on(FormScriptingApiService.EVENT_MODEL_CHANGED)
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => event.data && this.#onScriptingModelChanged(event.data.formControlName, event.data.change, event.data.formId));
+        this.#formScriptingApiService.formId = this.id;
+    }
+    // initialize the form based on the provided form options
+    #init(fo) {
+        this.form = undefined;
+        if (!fo)
+            return;
+        setTimeout(() => {
+            this.#initialValidators = {};
+            this.unsubscribeAll();
+            this.#buildReactiveForm(fo);
+        }, 0);
+    }
+    #initScriptingScope(formOptions, dataFormModel) {
+        const { data, actions, objects, context } = (formOptions || {});
+        if (this.#scriptingScope) {
+            this.#scriptingScope.setModel(this.#scriptModel);
+            /** provide access to actions (used inside of BPM-Forms) */
+            this.#scriptingScope.actions = actions;
+            /** provide access to additional objects (used for example in BPM-Start-Forms to
+             * add data of DMS-Objects to start the process for)
+             */
+            this.#scriptingScope.objects = objects || [];
+            this.#scriptingScope.context = context || { id: '', title: '', objectTypeId: '' };
+            /** provide readonly access to initial form data (which may also contain values that
+             * are not rendered as form elements (invisible values))
+             */
+            this.#scriptingScope.data = data;
+            /** by default, scripting scopes are applied to forms. But table elements create their own scope
+             * for editing rows. Being one of those inner forms should not run the form script again, but
+             * instead just provide the observing abilities of the scripting scope.
+             */
+            if (!this.isInnerTableForm() && dataFormModel) {
+                const scriptName = dataFormModel.name + '_' + dataFormModel.situation;
+                console.debug('executing form script ' + scriptName);
+                this.#formScriptService.runFormScript(this.#scriptingScope, dataFormModel.script, scriptName);
+            }
+        }
+    }
+    focusForm() {
+        this.#elementRef.nativeElement.querySelector('input').focus();
+    }
+    getGroup(id) {
+        return this.form?.get(id);
+    }
+    setFormData(data) {
+        const fo = this.formOptions();
+        if (!fo)
+            return;
+        fo.data = data;
+        setTimeout(() => this.#init(fo), 0);
+    }
+    patchValue(data) {
+        Object.keys(data).forEach((key) => {
+            this.#onScriptingModelChanged(key, {
+                name: 'value',
+                newValue: data[key]
+            });
+        });
+    }
+    /**
+     * Extracts the values from the form model. Each form value is represented by one
+     * property on the result object holding the fields value. The keys (properties) are the `name`
+     * properties of the form element.
+     *
+     * How values are extracted is influenced by the forms situation.
+     *
+     * @return object of key value pairs
+     */
+    getFormData() {
+        return this.#formToData();
+    }
+    getFormElements() {
+        const formElements = {};
+        Object.keys(this.#formControls).forEach((k) => {
+            formElements[k] = this.#formControls[k].__eoFormElement;
+        });
+        return formElements;
+    }
+    setFormPristine() {
+        if (!this.form)
+            return;
+        this.form.markAsPristine();
+    }
+    // reset the form to its initial state
+    resetForm() {
+        const fo = this.formOptions();
+        if (!fo)
+            return;
+        this.setFormData(fo.data);
+        this.#emitFormChangedEvent();
+    }
+    /**
+     * Returns the observed model that was passed to the current form script running. If there is
+     * no form script, this method will return NULL.
+     * @returns
+     */
+    getObservedScriptModel() {
+        return this.#scriptingScope ? this.#scriptingScope.getModel() : null;
+    }
+    // Create a reactive form from the enaio form model
+    #buildReactiveForm(formOptions) {
+        this.#scriptingScope = undefined;
+        this.#scriptModel = {};
+        this.#formControls = {};
+        const formModel = this.#dataToForm(formOptions.formModel, formOptions.data);
+        if (!formModel) {
+            return;
+        }
+        // if a script is available, we'll init the form scripting for the
+        // current form
+        if (this.isInnerTableForm() || (formModel.script && formModel.script.length > 0)) {
+            console.debug('adding form scripting scope');
+            this.#scriptingScope = new ObjectFormScriptingScope(formModel.situation, this.#onScriptingModelChanged, this.#formScriptingApiService.getApi(), this.isInnerTableForm());
+            this.#scriptingScope.objectId = this.formOptions().objectId;
+        }
+        const form = new ObjectFormGroup({});
+        if (formModel?.elements[0]?.elements) {
+            this.#addFormControl(form, formModel.elements[0], 'core');
+        }
+        if (formModel?.elements[1]?.elements) {
+            this.#addFormControl(form, formModel.elements[1], 'data');
+        }
+        this.form = form;
+        this.#formScriptingApiService.registerActiveForm(this);
+        setTimeout(() => {
+            if (!this.form)
+                return;
+            this.initValidators(this.form);
+            this.#subscriptions.push(this.form.valueChanges.pipe(debounceTime(500)).subscribe(() => this.#emitFormChangedEvent()));
+            this.#initScriptingScope(formOptions, formModel);
+            this.onFormReady.emit();
+            this.#emitFormChangedEvent(false);
+        }, 300);
+    }
+    initValidators(form) {
+        if (this.form) {
+            for (const key of Object.keys(form.controls)) {
+                const control = form.controls[key];
+                if (control.controls) {
+                    this.initValidators(control);
+                }
+                else {
+                    this.#initialValidators[control._eoFormElement.name] = control.validator;
+                    control.setValidators(Validators.compose(this.#getValidators(control._eoFormElement).concat([this.#initialValidators[control._eoFormElement.name]])));
+                    control.updateValueAndValidity();
+                }
+            }
+        }
+    }
+    #emitFormChangedEvent(compare = true) {
+        // check if indexdata has been changed
+        const currentFormData = this.getFormData();
+        const idxChange = compare ? JSON.stringify(this.formData) !== JSON.stringify(currentFormData) : false;
+        this.formData = currentFormData;
+        if (this.form) {
+            this.statusChanged.emit({
+                invalid: this.form.invalid,
+                dirty: this.form.dirty,
+                data: this.formData,
+                indexdataChanged: idxChange
+            });
+        }
+    }
+    /**
+     * This method will be called each time the script changes its internal model.
+     * It is used to transfer the script changes to the actual form model.
+     *
+     * To ensure the right context, we define an instance method as callback for the scripting scope
+     * @see: https://blog.johnnyreilly.com/2014/04/typescript-instance-methods.html
+     *
+     * @param formControlName
+     * @param change
+     */
+    #onScriptingModelChanged;
+    #processArrayValueChange(fc, change) {
+        const newVal = change.newValue;
+        const targetType = fc._eoFormElement.type;
+        // for some types we have to ensure that meta data are provided as well
+        switch (targetType) {
+            case 'ORGANIZATION': {
+                this.#getDataMeta(fc._eoFormElement, newVal).subscribe((m) => {
+                    fc._eoFormElement.dataMeta = m;
+                });
+                break;
+            }
+            case 'TABLE': {
+                const dataToBeProcessed = {};
+                fc._eoFormElement.elements.forEach((e) => {
+                    if (e.type === 'ORGANIZATION' || e.type === 'CODESYSTEM') {
+                        dataToBeProcessed[e.name] = e;
+                    }
+                });
+                if (Object.keys(dataToBeProcessed).length) {
+                    newVal.forEach((rowData) => {
+                        Object.keys(rowData).forEach((key) => {
+                            if (dataToBeProcessed[key]) {
+                                this.#getDataMeta(dataToBeProcessed[key], rowData[key]).subscribe((m) => {
+                                    if (m) {
+                                        rowData[key + '_meta'] = m;
+                                    }
+                                    else {
+                                        delete rowData[key + '_meta'];
+                                    }
+                                    this.#updateArrayValue(fc, newVal);
+                                });
+                            }
+                        });
+                    });
+                }
+                break;
+            }
+        }
+        this.#updateArrayValue(fc, newVal);
+    }
+    #updateArrayValue(fc, newValue) {
+        fc._eoFormElement.value = [].concat(newValue);
+        fc.patchValue([].concat(newValue));
+        fc.updateValueAndValidity();
+        fc.markAsDirty();
+    }
+    #getDataMeta(formElement, newValue) {
+        if (newValue) {
+            switch (formElement.type) {
+                case 'ORGANIZATION': {
+                    return this.#userService.getUserById(newValue);
+                }
+            }
+        }
+        return of(null);
+    }
+    #patchFormValue(formValue) {
+        let value;
+        if (Array.isArray(formValue)) {
+            value = [];
+            // copy by value for arrays of objects (e.g. table data)
+            formValue.forEach((o) => value.push(JSON.parse(JSON.stringify(o))));
+        }
+        else {
+            value = formValue;
+        }
+        return value;
+    }
+    /**
+     * Recursive method adding a new FormControl (group or control) to a parent form group
+     *
+     * @param parentGroup - the parent group to add the control to
+     * @param formElement - the enaio form model element to create the child control from
+     * @param [useName] - use this name instead of the one from the model
+     */
+    #addFormControl(parentGroup, formElement, useName) {
+        const fo = this.formOptions();
+        if (!fo)
+            return;
+        let ctrl;
+        let name;
+        // add a form group
+        if (formElement.type === 'o2mGroup' || formElement.type === 'o2mGroupStack') {
+            // do not add groups that are empty
+            const isRootGroup = formElement.name && (formElement.name !== 'data' || formElement.name !== 'core');
+            if (!isRootGroup && (!formElement.elements || formElement.elements.length === 0)) {
+                console.error('Found empty form group', formElement);
+                return;
+            }
+            ctrl = new ObjectFormGroup({});
+            ctrl._eoFormGroup = {
+                layout: formElement.layout,
+                type: formElement.type
+            };
+            if (formElement.name) {
+                if (this.#skipTranslationsFor.includes(formElement.name)) {
+                    ctrl._eoFormGroup.label = formElement.name;
+                }
+                else if (!formElement.label) {
+                    // no label, so try to translate the technical name
+                    ctrl._eoFormGroup.label = this.#systemService.getLocalizedResource(`${formElement.name}_label`) || formElement.name;
+                }
+                else {
+                    // there is a label so we take this one
+                    ctrl._eoFormGroup.label = formElement.label;
+                }
+            }
+            if (useName === 'core' || useName === 'data') {
+                ctrl._eoFormGroup.label = useName;
+            }
+            for (const e of formElement.elements) {
+                this.#addFormControl(ctrl, e);
+            }
+            name = useName || 'fg' + this.gCount++;
+        }
+        else {
+            // add form control
+            // To be able to integrate recursive form controls into the main form,
+            // we have to wrap them in a form group
+            ctrl = new ObjectFormControlWrapper({});
+            ctrl._eoFormControlWrapper = {
+                // the name of the wrapped FormControl
+                controlName: formElement.name,
+                situation: fo.formModel.situation
+            };
+            // do not set a reference as the form controls value
+            // otherwise we could not reset the form
+            const value = formElement?.value
+                ? this.#patchFormValue(formElement?.value)
+                : !Utils.isEmpty(formElement?.defaultvalue) && fo.formModel.situation === Situation.CREATE
+                    ? this.#patchFormValue(formElement?.defaultvalue)
+                    : formElement?.value;
+            // create the actual form control
+            const controlDisabled = fo.disabled || !!formElement.readonly;
+            const formControl = new ObjectFormControl({
+                value,
+                disabled: controlDisabled
+            });
+            // if form element has a 'label' property it will be shown as is ...
+            if (!formElement.label) {
+                // ... if there is no label but a 'labelKey' property we are going to localize that key ...
+                if (formElement.labelkey) {
+                    formElement.label = this.#systemService.getLocalizedResource(`${formElement.labelkey}_label`) || formElement.labelkey;
+                    formElement.description = this.#systemService.getLocalizedResource(`${formElement.labelkey}_description`);
+                }
+                else {
+                    // ... no 'label' and also no 'labelKey' means that we are showing technical name instead
+                    formElement.label = formElement.name;
+                }
+            }
+            formElement.readonly = controlDisabled;
+            // we are using an internal type to distinguish between the components
+            // to be used to render certain form elements
+            formElement._internalType = this.#systemService.getInternalFormElementType(formElement.type, formElement.classifications);
+            formControl._eoFormElement = formElement;
+            this.#formControls[formElement.name] = formControl;
+            if (formElement.type === 'TABLE') {
+                // Add 'onrowedit' property even if it's not set.
+                // This is required because otherwise mobX-Observer would not recognize
+                // changes to this property applied by the form script
+                if (!Object.keys(formControl._eoFormElement).includes('onrowedit')) {
+                    formControl._eoFormElement.onrowedit = null;
+                }
+                if (this.#scriptingScope && formControl._eoFormElement.value) {
+                    // having a scripting scope and table rows means that we need to set empty
+                    // columns to NULL, because otherwise mobX won't be able to track those values
+                    const valueFields = formControl._eoFormElement.elements.map((e) => e.name);
+                    formControl._eoFormElement.value.forEach((rowValue) => {
+                        valueFields.forEach((valueField) => {
+                            if (!Object.keys(rowValue).includes(valueField)) {
+                                rowValue[valueField] = null;
+                            }
+                        });
+                    });
+                    // update form controls value as well to reflect the observed value
+                    formControl.patchValue(formControl._eoFormElement.value, {
+                        onlySelf: true,
+                        emitEvent: false,
+                        emitModelToViewChange: false,
+                        emitViewToModelChange: false
+                    });
+                }
+            }
+            if (formElement._internalType === 'string:organization') {
+                formControl._eoFormElement.setFilter = (filterObject) => {
+                    formControl._eoFormElement.filter = filterObject;
+                };
+            }
+            ObjectFormUtils.updateFormElement(formElement);
+            // remove empty descriptions
+            const desc = formControl._eoFormElement.description;
+            if (desc && desc.trim().length === 0) {
+                formControl._eoFormElement.description = null;
+            }
+            // add the form element to the script model that will be injected into
+            // the forms scripting scope later on
+            this.#scriptModel[formElement.name] = formControl._eoFormElement;
+            // apply change listener to the form control, that will trigger
+            // the form elements onChange listener
+            const controlWatch = ctrl.valueChanges.pipe(debounceTime(500));
+            this.#subscriptions.push(controlWatch.subscribe((v) => {
+                if (this.#scriptingScope) {
+                    this.#scriptingScope.modelChanged(v);
+                }
+            }));
+            ctrl.addControl(formElement.name, formControl);
+            name = this.#namePrefix + formElement.name;
+        }
+        parentGroup.addControl(name, ctrl);
+    }
+    /**
+     * Build validators for the given form element to be attached to
+     * a reactive formControl.
+     *
+     * @param formElement - form element object
+     */
+    #getValidators(formElement) {
+        const fo = this.formOptions();
+        const elmValidators = FormValidation.getValidators(formElement, fo?.formModel.situation);
+        // add custom validator for script enabled forms
+        if (this.#scriptingScope) {
+            elmValidators.push(FormValidation.customScriptingValidation);
+        }
+        return elmValidators;
+    }
+    /**
+     * Extract the values from the form
+     */
+    #formToData() {
+        const fo = this.formOptions();
+        return fo && this.form ? this.#formHelperService.extractFormData(this.form, fo.formModel.situation, fo.data, this.isInnerTableForm()) : {};
+    }
+    /**
+     * Merge data into a form model.
+     *
+     * @param model - form model
+     * @param data - data object or array of SearchFilter objects in case of a search form
+     */
+    #dataToForm(model, data) {
+        if (model && data) {
+            this.#setElementValues(model.elements, data);
+        }
+        return model;
+    }
+    // recursive method for adding values to model elements
+    #setElementValues(elements, data) {
+        elements?.forEach((element) => {
+            if (this.#hasValue(data, element)) {
+                element.value = this.#getValue(data, element);
+            }
+            else {
+                delete element.value;
+            }
+            if (element.type !== 'TABLE' && element.elements && element.elements.length > 0) {
+                this.#setElementValues(element.elements, data);
+            }
+        });
+    }
+    #hasValue(data, element) {
+        // differ between array of SearchFilters and a form data object
+        if (Array.isArray(data)) {
+            return !!data.find((filter) => filter.property === element.id);
+        }
+        else {
+            return Object.keys(data).includes(element.name);
+        }
+    }
+    #getValue(data, element) {
+        return data[element.name];
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll();
+        this.#formScriptingApiService.unregisterActiveForm(this);
+    }
+    ngAfterViewInit() {
+        this.#cdRef.detectChanges();
+    }
+    // unsubscribe from all value change listeners for the current form
+    // to avoid memory leaks. This method will also be called every time
+    // a new form is rendered to get rid of the old form element subscriptions
+    unsubscribeAll() {
+        if (this.#subscriptions.length) {
+            console.debug('unsubscribed from ' + this.#subscriptions.length + ' value change listeners.');
+            this.#subscriptions.forEach((s) => s.unsubscribe());
+            this.#subscriptions = [];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ObjectFormComponent, isStandalone: true, selector: "yuv-object-form", inputs: { formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, inert: { classPropertyName: "inert", publicName: "inert", isSignal: true, isRequired: false, transformFunction: null }, elementExtensions: { classPropertyName: "elementExtensions", publicName: "elementExtensions", isSignal: true, isRequired: false, transformFunction: null }, isInnerTableForm: { classPropertyName: "isInnerTableForm", publicName: "isInnerTableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { statusChanged: "statusChanged", onFormReady: "onFormReady" }, host: { properties: { "attr.inert": "inert() ? true : null" }, classAttribute: "yuv-object-form" }, providers: [ObjectFormService, ObjectFormScriptService, FormScriptingApiService], ngImport: i0, template: "@let fo = formOptions();\n@if (fo && form) {\n  <div class=\"yuv-object-form\" [formGroup]=\"form\">\n    <div class=\"form-element-wrap core\">\n      <yuv-object-form-group [group]=\"getGroup('core')\" [situation]=\"fo.formModel.situation\"></yuv-object-form-group>\n    </div>\n    <div class=\"form-element-wrap data\">\n      <yuv-object-form-group [group]=\"getGroup('data')\" [situation]=\"fo.formModel.situation\"></yuv-object-form-group>\n    </div>\n  </div>\n}\n", styles: [".yuv-object-form>.core{padding:calc(var(--app-pane-padding) / 2)}.yuv-object-form>.data>yuv-object-form-group>.form-element.o2mGroupStack{background:transparent;border:0}.yuv-object-form>.data>yuv-object-form-group>.form-element.o2mGroupStack>yuv-object-form-group>.o2mGroup{background-color:var(--panel-background-lightgrey);border-top:1px solid rgba(0,0,0,.1);padding:var(--app-pane-padding)}.yuv-object-form>.data>yuv-object-form-group>.form-element.o2mGroupStack>p-tabview>.p-tabview>.p-tabview-panels{background-color:var(--panel-background-lightgrey)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ObjectFormGroupComponent, selector: "yuv-object-form-group", inputs: ["situation", "group", "noGroupLabels"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, ObjectFormGroupComponent], providers: [ObjectFormService, ObjectFormScriptService, FormScriptingApiService], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'yuv-object-form',
+                        '[attr.inert]': 'inert() ? true : null'
+                    }, template: "@let fo = formOptions();\n@if (fo && form) {\n  <div class=\"yuv-object-form\" [formGroup]=\"form\">\n    <div class=\"form-element-wrap core\">\n      <yuv-object-form-group [group]=\"getGroup('core')\" [situation]=\"fo.formModel.situation\"></yuv-object-form-group>\n    </div>\n    <div class=\"form-element-wrap data\">\n      <yuv-object-form-group [group]=\"getGroup('data')\" [situation]=\"fo.formModel.situation\"></yuv-object-form-group>\n    </div>\n  </div>\n}\n", styles: [".yuv-object-form>.core{padding:calc(var(--app-pane-padding) / 2)}.yuv-object-form>.data>yuv-object-form-group>.form-element.o2mGroupStack{background:transparent;border:0}.yuv-object-form>.data>yuv-object-form-group>.form-element.o2mGroupStack>yuv-object-form-group>.o2mGroup{background-color:var(--panel-background-lightgrey);border-top:1px solid rgba(0,0,0,.1);padding:var(--app-pane-padding)}.yuv-object-form>.data>yuv-object-form-group>.form-element.o2mGroupStack>p-tabview>.p-tabview>.p-tabview-panels{background-color:var(--panel-background-lightgrey)}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ObjectFormComponent, ObjectFormControlWrapper, ObjectFormElementExtension, ObjectFormTranslateService };
+//# sourceMappingURL=yuuvis-client-framework-object-form.mjs.map