@fuentis/phoenix-ui 0.0.9-alpha.528 → 0.0.9-alpha.529

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -3783,45 +3783,33 @@ function getFieldType(control) {
     }
 }
 
-/**
- * MetaFormService is a small UI-state bus used by MetaForm/GroupsForm components.
- *
- * - formReadOnlyState: global read-only mode (Edit toggles it).
- * - formBuildCompleted: emits TRUE when MetaForm finished rebuilding controls & validators.
- *
- * Angular dev-mode NOTE:
- * Emitting "build completed = true" synchronously during the same change detection cycle
- * can cause NG0100 ExpressionChangedAfterItHasBeenCheckedError.
- * Therefore we emit TRUE in a macrotask (setTimeout 0).
- */
 class MetaFormService {
     router = inject(Router);
     formEvent = new Subject();
     formReadOnlySubject = new BehaviorSubject(false);
     formTabContent = new BehaviorSubject('FORM');
     formDirtyStatus = new BehaviorSubject(false);
-    /**
-     * Build completion flag:
-     * - false = rebuilding (controls/validators may change)
-     * - true  = stable and ready
-     */
     formBuildCompletedSubject = new BehaviorSubject(false);
-    /** Prevent stale timers from flipping the flag after a new rebuild already started. */
-    buildDoneTimer = null;
-    // Public streams
     currentFormState = this.formEvent.asObservable();
     formReadOnlyState = this.formReadOnlySubject.asObservable();
     currentFormTabContent = this.formTabContent.asObservable();
     currentFormDirtyStatus = this.formDirtyStatus.asObservable();
+    /**
+     * Notify when form is completed
+     * @description Notifies you about when form bild is completed in meta-form component class. Usefull when you need to attach some listeners on form controls or any other action related to form when all controls are avaiable
+     * @returns {boolean}
+     */
     formBuildCompleted = this.formBuildCompletedSubject.asObservable();
+    constructor() { }
     setFormEvent(event) {
         this.formEvent.next(event);
     }
     setFormReadOnlyState(state) {
         this.formReadOnlySubject.next(state);
-        // Optional query param sync (disabled by default):
         // this.router.navigate([], {
-        //   queryParams: { edit: state ? null : !state },
+        //   queryParams: {
+        //     edit: state ? null : !state,
+        //   },
         //   queryParamsHandling: 'merge',
         // });
     }
@@ -3832,46 +3820,25 @@ class MetaFormService {
         this.formDirtyStatus.next(status);
     }
     /**
-     * Call at the BEGINNING of each rebuild.
-     * Safe to emit synchronously.
-     */
-    startFormBuild() {
-        if (this.buildDoneTimer != null) {
-            clearTimeout(this.buildDoneTimer);
-            this.buildDoneTimer = null;
-        }
-        this.formBuildCompletedSubject.next(false);
-    }
-    /**
-     * Call at the END of each rebuild.
-     * Emit in a macrotask to avoid NG0100.
-     */
-    finishFormBuild() {
-        if (this.buildDoneTimer != null) {
-            clearTimeout(this.buildDoneTimer);
-            this.buildDoneTimer = null;
-        }
-        this.buildDoneTimer = setTimeout(() => {
-            this.formBuildCompletedSubject.next(true);
-            this.buildDoneTimer = null;
-        }, 0);
-    }
-    /**
-     * Backward compatibility for old callers.
+     * Sets the form build completion status to indicate when the form is created.
+     *
+     * @param {boolean} isCompleted - A boolean value to indicate whether the form build is completed.
+     *                               Set to `true` when the form is fully created.
+     *
+     * @description This method is used to notify when the form is created and ready for use.
      */
     setFormBuildCompletition(isCompleted) {
-        if (!isCompleted)
-            this.startFormBuild();
-        else
-            this.finishFormBuild();
+        this.formBuildCompletedSubject.next(isCompleted);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 class MetaFormAbstract {
     fb;
@@ -3881,10 +3848,8 @@ class MetaFormAbstract {
     metaFormValues;
     metaFormControls;
     /**
-     * Hook for wiring dependent fields (category -> color, entity -> assignees etc.).
-     * Rebound safely when metadata changes, without duplicating subscriptions.
-     *
-     * Optionally return a cleanup function.
+     * Hook for wiring dependent fields (category -> color, entity -> assignees etc).
+     * This hook is re-bound safely when meta changes, without duplicating subscriptions.
      */
     setupDependencies;
     loading = false;
@@ -3895,91 +3860,95 @@ class MetaFormAbstract {
     onFormSubmit = new EventEmitter();
     onFormCancel = new EventEmitter();
     formActive$;
-    formSub;
+    formSub$;
+    /**
+     * Holds cleanup functions returned by dependency binding.
+     * Every time we re-bind dependencies, we call previous cleanup first.
+     */
     dependencyCleanup = [];
+    /**
+     * Signature of the last bound metadata.
+     * If controls change, we re-bind dependencies.
+     */
     lastMetaSignature = '';
-    clearServerErrorSubs = new Map();
     constructor(fb, metaService, translateService) {
         this.fb = fb;
         this.metaService = metaService;
         this.translateService = translateService;
+        this.metaForm = this.fb.group({});
         this.formActive$ = this.metaService.formReadOnlyState;
-    }
-    ngOnChanges(changes) {
-        if (changes['metaForm']) {
-            this.rewireFormSubscription();
-        }
-        if (changes['metaFormControls'] ||
-            changes['metaFormValues'] ||
-            changes['disableForm'] ||
-            changes['setupDependencies']) {
-            if (!this.metaForm) {
-                throw new Error('[MetaFormAbstract] metaForm input is required. Parent must pass [metaForm].');
-            }
-            this.syncForm();
-        }
+        // Forward global form events to the service (kept as-is from your implementation)
+        this.formSub$ = this.metaForm.valueChanges.subscribe((ev) => {
+            this.metaService.setFormEvent(ev);
+        });
     }
     /**
-     * Backwards compatible API:
-     * Older code may call createForm(controls).
+     * Backwards compatible API.
+     * Old components call createForm(controls). We keep that working.
      */
     createForm(controls) {
         if (controls)
             this.metaFormControls = controls;
-        if (!this.metaForm) {
-            throw new Error('[MetaFormAbstract] metaForm input is required. Parent must pass [metaForm].');
-        }
         this.syncForm();
     }
     /**
-     * Rebuild flow (stable + fast):
-     * 1) startFormBuild()  (sync)
-     * 2) ensure controls & validators (no emits)
-     * 3) patch values (emitEvent:false)
-     * 4) enable/disable (emitEvent:false)
-     * 5) bind dependencies (safe rebind)
-     * 6) updateValueAndValidity (emitEvent:false)
-     * 7) finishFormBuild() (macrotask -> avoids NG0100)
+     * Main sync: builds controls, applies validators, patches values,
+     * applies disabled state, and binds dependencies safely.
+     *
+     * Safe to call multiple times.
      */
     syncForm() {
         const flatControls = this.flattenControls(this.metaFormControls);
         const values = this.metaFormValues ?? null;
-        this.metaService.startFormBuild();
+        // 1) Ensure form controls exist + validators are applied
         this.ensureControls(flatControls);
+        // 2) Patch initial values WITHOUT firing valueChanges
         if (values) {
             this.metaForm.patchValue(values, { emitEvent: false });
         }
+        // 3) Enable/disable entire form if requested
         if (this.disableForm)
             this.metaForm.disable({ emitEvent: false });
         else
             this.metaForm.enable({ emitEvent: false });
+        // 4) Bind dependencies if needed (rebind when meta changes)
         this.bindDependenciesIfNeeded(flatControls);
-        // Recompute validity WITHOUT emitting events during build.
-        this.metaForm.updateValueAndValidity({ emitEvent: false });
-        // Emit "build completed" AFTER CD cycle.
-        this.metaService.finishFormBuild();
+        // 5) Notify that form build is done
+        this.metaService.setFormBuildCompletition(true);
     }
+    /**
+     * Supports both:
+     *  - Flat controls: [ {configuration:{key}}, ...]
+     *  - Grouped controls: [ { ctrl: [ ... ] }, ... ]
+     */
     flattenControls(input) {
         if (!Array.isArray(input))
             return [];
+        // already flat
         const isFlat = input.every((x) => !!x?.configuration?.key);
         if (isFlat)
             return input;
-        return input
-            .flatMap((x) => (Array.isArray(x?.ctrl) ? x.ctrl : x))
-            .filter((x) => !!x?.configuration?.key);
+        // grouped [{ ctrl: [...] }, ...]
+        const flattened = input.flatMap((x) => (Array.isArray(x?.ctrl) ? x.ctrl : x));
+        return flattened.filter((x) => !!x?.configuration?.key);
     }
     metaSignature(controls) {
+        // Key list is enough to detect changes; also include type to handle swaps.
         return (controls ?? [])
             .map((c) => `${c?.configuration?.key ?? ''}:${c?.configuration?.type ?? ''}`)
             .join('|');
     }
+    /**
+     * Ensures dependencies are bound exactly once per metadata signature.
+     * If metadata changes (new controls, different keys), we clean up and re-bind.
+     */
     bindDependenciesIfNeeded(flatControls) {
         if (!this.setupDependencies)
             return;
         const sig = this.metaSignature(flatControls);
         if (sig === this.lastMetaSignature)
             return;
+        // cleanup previous dependency subscriptions
         this.cleanupDependencies();
         const ctx = {
             form: this.metaForm,
@@ -3988,7 +3957,16 @@ class MetaFormAbstract {
             getControl: (key) => this.metaForm.get(key) ?? null,
             findMeta: (key) => flatControls.find((c) => c?.configuration?.key === key) ?? null,
         };
+        /**
+         * Important:
+         * We call setupDependencies AFTER the form is fully built and patched.
+         * The setup function should subscribe to valueChanges and optionally apply initial sync.
+         */
         const maybeCleanup = this.setupDependencies(ctx);
+        /**
+         * If your setupDependencies wants to return a cleanup fn, we support it.
+         * (Not required, but useful.)
+         */
         if (typeof maybeCleanup === 'function') {
             this.dependencyCleanup.push(maybeCleanup);
         }
@@ -4002,59 +3980,36 @@ class MetaFormAbstract {
             catch { }
         });
         this.dependencyCleanup = [];
+        this.lastMetaSignature = '';
     }
     ensureControls(controls) {
         (controls ?? []).forEach((control) => {
             const key = control?.configuration?.key;
             if (!key)
                 return;
+            // Create control once
             if (!this.metaForm.contains(key)) {
                 this.metaForm.addControl(key, this.fb.control(getFieldType(control)));
             }
+            // Apply validators stably
             this.applyValidators(control);
-            this.bindClearServerError(key);
+            // Disable if metadata says so
             if (control?.disable) {
                 this.metaForm.get(key)?.disable({ emitEvent: false });
             }
         });
-        // remove stale controls when metadata changes
-        const allowed = new Set((controls ?? [])
-            .map((c) => c?.configuration?.key)
-            .filter(Boolean));
+        // Remove stale controls (safe when meta changes)
+        const allowed = new Set((controls ?? []).map((c) => c?.configuration?.key).filter(Boolean));
         Object.keys(this.metaForm.controls).forEach((k) => {
             if (!allowed.has(k)) {
-                this.clearServerErrorSubs.get(k)?.unsubscribe();
-                this.clearServerErrorSubs.delete(k);
                 this.metaForm.removeControl(k);
             }
         });
     }
     /**
-     * Removes ONLY server-origin uniqueness errors on user edit.
-     * Keeps required/pattern/email/etc.
+     * Applies validators based on metadata.
+     * Uses emitEvent: false to avoid loops and unstable validator states.
      */
-    bindClearServerError(key) {
-        if (this.clearServerErrorSubs.has(key))
-            return;
-        const ctrl = this.metaForm.get(key);
-        if (!ctrl)
-            return;
-        const sub = ctrl.valueChanges.subscribe(() => {
-            const errors = ctrl.errors;
-            if (!errors)
-                return;
-            const hasServerUnique = errors['uniqueEntry'] !== undefined || errors['unique'] !== undefined;
-            if (!hasServerUnique)
-                return;
-            const { uniqueEntry, unique, ...rest } = errors;
-            ctrl.setErrors(Object.keys(rest).length ? rest : null, {
-                emitEvent: false,
-            });
-            // Here it's a user interaction, so emitting is safe and desired:
-            this.metaForm.updateValueAndValidity({ emitEvent: true });
-        });
-        this.clearServerErrorSubs.set(key, sub);
-    }
     applyValidators(control) {
         const key = control?.configuration?.key;
         if (!key)
@@ -4069,15 +4024,15 @@ class MetaFormAbstract {
             v.email && validators.push(Validators.email);
             v.regex && validators.push(Validators.pattern(v.regex?.regexType));
             v.phone && validators.push(Validators.pattern(/^\+?[1-9]\d{7,14}$/));
-            v.timeperiod &&
-                validators.push(timePeriod(this.translateService.currentLang, v.tpMin));
+            v.timeperiod && validators.push(timePeriod(this.translateService.currentLang, v.tpMin));
             v.dueDate && validators.push(startDueDateValidator);
         }
         if (control?.mandatory)
             validators.push(Validators.required);
-        if (control?.mandatory &&
-            (control?.configuration?.type === ControlType.TEXT ||
-                control?.configuration?.type === ControlType.TEXT_AREA)) {
+        if (control?.mandatory && control?.configuration?.type === ControlType.TEXT) {
+            validators.push(WhiteSpaceValidator.noWhiteSpaceValidator);
+        }
+        if (control?.mandatory && control?.configuration?.type === ControlType.TEXT_AREA) {
             validators.push(WhiteSpaceValidator.noWhiteSpaceValidator);
         }
         if (control?.configuration?.type === ControlType.TEXT ||
@@ -4090,16 +4045,6 @@ class MetaFormAbstract {
         ctrl.setValidators(validators);
         ctrl.updateValueAndValidity({ emitEvent: false });
     }
-    rewireFormSubscription() {
-        this.formSub?.unsubscribe();
-        // metaForm is required, but keep fallback safe
-        if (!this.metaForm) {
-            this.metaForm = this.fb.group({});
-        }
-        this.formSub = this.metaForm.valueChanges.subscribe((ev) => {
-            this.metaService.setFormEvent(ev);
-        });
-    }
     onSubmit() {
         this.onFormSubmit.emit(this.metaForm);
     }
@@ -4111,17 +4056,14 @@ class MetaFormAbstract {
         this.metaForm.patchValue(this.metaFormValues, { emitEvent: false });
         this.metaForm.markAsPristine();
         this.metaForm.markAsUntouched();
-        this.metaForm.updateValueAndValidity({ emitEvent: false });
     }
     ngOnDestroy() {
         this.cleanupDependencies();
-        this.formSub?.unsubscribe();
-        this.formSub = undefined;
-        this.clearServerErrorSubs.forEach((s) => s.unsubscribe());
-        this.clearServerErrorSubs.clear();
+        if (this.formSub$)
+            this.formSub$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", setupDependencies: "setupDependencies", loading: "loading", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm", formStyle: "formStyle" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", setupDependencies: "setupDependencies", loading: "loading", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm", formStyle: "formStyle" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, decorators: [{
             type: Directive
@@ -7707,11 +7649,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class MetaFormComponent extends MetaFormAbstract {
     ControlType = ControlType;
-    constructor(fb, metaService, translateService) {
+    constructor(fb, metaService, translateService, http) {
         super(fb, metaService, translateService);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"grid\">\n    @for (control of metaFormControls; track control?.id) {\n      @switch (control.configuration.type) {\n        @case (ControlType.TEXT) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-input\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-input>\n            }\n          </div>\n        }\n\n        @case (ControlType.NUMBER) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'number-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-number-input\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-number-input>\n            }\n          </div>\n        }\n\n        @case (ControlType.TIMEPERIOD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'timeperiod-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-timeperiod\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-timeperiod>\n            }\n          </div>\n        }\n\n        @case (ControlType.CURRENCY) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'currency-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-currency\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-currency>\n            }\n          </div>\n        }\n\n        @case (ControlType.TEXT_AREA) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-area-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-area\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-area>\n            }\n          </div>\n        }\n\n        @case (ControlType.SS_OPTION) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ss-option-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-single-select\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-single-select>\n            }\n          </div>\n        }\n\n        @case (ControlType.SS_OPTION_OBJECT_BASED) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-single-select-object-based\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-single-select-object-based>\n            }\n          </div>\n        }\n\n        @case (ControlType.MS_OPTION) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ms-option-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-multiple-select\n                [attr.data-cy]=\"'multiSelect-' + control?.id\"\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-multiple-select>\n            }\n          </div>\n        }\n\n        @case (ControlType.START_DUE_DATE) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'start-due-date-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-start-due-date\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-start-due-date>\n            }\n          </div>\n        }\n\n        @case (ControlType.DATE) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'date-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-calendar\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-calendar>\n            }\n          </div>\n        }\n\n        @case (ControlType.TEXT_EDITOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-editor-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-editor\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-editor>\n            }\n          </div>\n        }\n\n        @case (ControlType.CHECKBOX) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column justify-content-end\"\n            [attr.data-cy]=\"'checkbox-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-checkbox\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-checkbox>\n            }\n          </div>\n        }\n\n        @case (ControlType.CHECKBOX_COLOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column justify-content-end\"\n            [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-checkbox-color-picker\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-checkbox-color-picker>\n            }\n          </div>\n        }\n\n        @case (ControlType.SWITCH) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'switch-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-switch\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-switch>\n            }\n          </div>\n        }\n\n        @case (ControlType.SELECT_BUTTON) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'select-button-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-select-button\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-select-button>\n            }\n          </div>\n        }\n\n        @case (ControlType.ASSIGN) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'assign-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-assign-responsible\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-assign-responsible>\n            }\n          </div>\n        }\n\n        @case (ControlType.ASSIGN_ASSET) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'assign-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-assign-asset\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-assign-asset>\n            }\n          </div>\n        }\n\n        @case (ControlType.LINKS_DATA) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control | fieldCol\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'links-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <!-- <phoenix-meta-object-links\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-object-links> -->\n            }\n          </div>\n        }\n\n        @case (ControlType.PASSWORD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'password-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-password-feild\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-password-feild>\n            }\n          </div>\n        }\n\n        @case (ControlType.COLOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'color-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-color-picker\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-color-picker>\n            }\n          </div>\n        }\n\n        @case (ControlType.UPLOAD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [attr.data-cy]=\"'upload-' + control?.id\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-upload\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-upload>\n            }\n          </div>\n        }\n\n        @case (ControlType.UPLOAD_DRAG_DROP) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [attr.data-cy]=\"'upload-' + control?.id\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-upload-dragdrop\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-upload-dragdrop>\n            }\n          </div>\n        }\n\n        @case (ControlType.SLOT) {\n          <ng-content\n            [select]=\"[control.configuration.key]\"\n          ></ng-content>\n        }\n      }\n    }\n  </div>\n\n  @if (formButtons) {\n    <div class=\"flex justify-content-end\">\n      <p-button\n        class=\"mr-1\"\n        [disabled]=\"!metaForm.valid || disableForm\"\n        type=\"submit\"\n        label=\"{{ 'ACTION.SAVE' | translate }}\"\n        [attr.data-cy]=\"'submit-button'\"\n        [loading]=\"loading\"\n      ></p-button>\n\n      <p-button\n        [disabled]=\"disableForm\"\n        styleClass=\"p-button-link\"\n        [text]=\"true\"\n        (onClick)=\"onCancel()\"\n        label=\"{{ 'ACTION.CANCEL' | translate }}\"\n        [attr.data-cy]=\"'cancel-button'\"\n      ></p-button>\n    </div>\n  }\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaColorPickerComponent, selector: "phoenix-meta-color-picker" }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaCheckboxColorPickerComponent, selector: "phoenix-meta-checkbox-color-picker" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }], encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * Reacts to changes in metadata or initial values and keeps the form in sync.
+     * This is intentionally idempotent and safe to call multiple times.
+     */
+    ngOnChanges(simpleChanges) {
+        if (simpleChanges?.['metaFormControls'] ||
+            simpleChanges?.['metaFormValues'] ||
+            simpleChanges?.['disableForm'] ||
+            simpleChanges?.['setupDependencies']) {
+            this.syncForm();
+            this.metaService.setFormDirtyStatus(this.metaForm.dirty);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"grid\">\n    @for (control of metaFormControls; track control?.id) {\n      @switch (control.configuration.type) {\n        @case (ControlType.TEXT) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-input\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-input>\n            }\n          </div>\n        }\n\n        @case (ControlType.NUMBER) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'number-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-number-input\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-number-input>\n            }\n          </div>\n        }\n\n        @case (ControlType.TIMEPERIOD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'timeperiod-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-timeperiod\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-timeperiod>\n            }\n          </div>\n        }\n\n        @case (ControlType.CURRENCY) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'currency-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-currency\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-currency>\n            }\n          </div>\n        }\n\n        @case (ControlType.TEXT_AREA) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-area-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-area\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-area>\n            }\n          </div>\n        }\n\n        @case (ControlType.SS_OPTION) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ss-option-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-single-select\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-single-select>\n            }\n          </div>\n        }\n\n        @case (ControlType.SS_OPTION_OBJECT_BASED) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-single-select-object-based\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-single-select-object-based>\n            }\n          </div>\n        }\n\n        @case (ControlType.MS_OPTION) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ms-option-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-multiple-select\n                [attr.data-cy]=\"'multiSelect-' + control?.id\"\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-multiple-select>\n            }\n          </div>\n        }\n\n        @case (ControlType.START_DUE_DATE) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'start-due-date-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-start-due-date\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-start-due-date>\n            }\n          </div>\n        }\n\n        @case (ControlType.DATE) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'date-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-calendar\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-calendar>\n            }\n          </div>\n        }\n\n        @case (ControlType.TEXT_EDITOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-editor-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-editor\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-editor>\n            }\n          </div>\n        }\n\n        @case (ControlType.CHECKBOX) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column justify-content-end\"\n            [attr.data-cy]=\"'checkbox-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-checkbox\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-checkbox>\n            }\n          </div>\n        }\n\n        @case (ControlType.CHECKBOX_COLOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column justify-content-end\"\n            [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-checkbox-color-picker\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-checkbox-color-picker>\n            }\n          </div>\n        }\n\n        @case (ControlType.SWITCH) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'switch-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-switch\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-switch>\n            }\n          </div>\n        }\n\n        @case (ControlType.SELECT_BUTTON) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'select-button-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-select-button\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-select-button>\n            }\n          </div>\n        }\n\n        @case (ControlType.ASSIGN) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'assign-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-assign-responsible\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-assign-responsible>\n            }\n          </div>\n        }\n\n        @case (ControlType.ASSIGN_ASSET) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'assign-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-assign-asset\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-assign-asset>\n            }\n          </div>\n        }\n\n        @case (ControlType.LINKS_DATA) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control | fieldCol\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'links-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <!-- <phoenix-meta-object-links\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-object-links> -->\n            }\n          </div>\n        }\n\n        @case (ControlType.PASSWORD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'password-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-password-feild\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-password-feild>\n            }\n          </div>\n        }\n\n        @case (ControlType.COLOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'color-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-color-picker\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-color-picker>\n            }\n          </div>\n        }\n\n        @case (ControlType.UPLOAD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [attr.data-cy]=\"'upload-' + control?.id\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-upload\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-upload>\n            }\n          </div>\n        }\n\n        @case (ControlType.UPLOAD_DRAG_DROP) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [attr.data-cy]=\"'upload-' + control?.id\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-upload-dragdrop\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-upload-dragdrop>\n            }\n          </div>\n        }\n\n        @case (ControlType.SLOT) {\n          <ng-content\n            [select]=\"[control.configuration.key]\"\n          ></ng-content>\n        }\n      }\n    }\n  </div>\n\n  @if (formButtons) {\n    <div class=\"flex justify-content-end\">\n      <p-button\n        class=\"mr-1\"\n        [disabled]=\"!metaForm.valid || disableForm\"\n        type=\"submit\"\n        label=\"{{ 'ACTION.SAVE' | translate }}\"\n        [attr.data-cy]=\"'submit-button'\"\n        [loading]=\"loading\"\n      ></p-button>\n\n      <p-button\n        [disabled]=\"disableForm\"\n        styleClass=\"p-button-link\"\n        [text]=\"true\"\n        (onClick)=\"onCancel()\"\n        label=\"{{ 'ACTION.CANCEL' | translate }}\"\n        [attr.data-cy]=\"'cancel-button'\"\n      ></p-button>\n    </div>\n  }\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaColorPickerComponent, selector: "phoenix-meta-color-picker" }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaCheckboxColorPickerComponent, selector: "phoenix-meta-checkbox-color-picker" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, decorators: [{
             type: Component,
@@ -7746,7 +7701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaSingleSelectObjectBasedComponent,
                         MetaCheckboxColorPickerComponent,
                     ], encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"grid\">\n    @for (control of metaFormControls; track control?.id) {\n      @switch (control.configuration.type) {\n        @case (ControlType.TEXT) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-input\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-input>\n            }\n          </div>\n        }\n\n        @case (ControlType.NUMBER) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'number-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-number-input\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-number-input>\n            }\n          </div>\n        }\n\n        @case (ControlType.TIMEPERIOD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'timeperiod-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-timeperiod\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-timeperiod>\n            }\n          </div>\n        }\n\n        @case (ControlType.CURRENCY) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'currency-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-currency\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-currency>\n            }\n          </div>\n        }\n\n        @case (ControlType.TEXT_AREA) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-area-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-area\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-area>\n            }\n          </div>\n        }\n\n        @case (ControlType.SS_OPTION) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ss-option-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-single-select\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-single-select>\n            }\n          </div>\n        }\n\n        @case (ControlType.SS_OPTION_OBJECT_BASED) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-single-select-object-based\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-single-select-object-based>\n            }\n          </div>\n        }\n\n        @case (ControlType.MS_OPTION) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'ms-option-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-multiple-select\n                [attr.data-cy]=\"'multiSelect-' + control?.id\"\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-multiple-select>\n            }\n          </div>\n        }\n\n        @case (ControlType.START_DUE_DATE) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'start-due-date-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-start-due-date\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-start-due-date>\n            }\n          </div>\n        }\n\n        @case (ControlType.DATE) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'date-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-calendar\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-calendar>\n            }\n          </div>\n        }\n\n        @case (ControlType.TEXT_EDITOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'text-editor-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-text-editor\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-text-editor>\n            }\n          </div>\n        }\n\n        @case (ControlType.CHECKBOX) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column justify-content-end\"\n            [attr.data-cy]=\"'checkbox-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-checkbox\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-checkbox>\n            }\n          </div>\n        }\n\n        @case (ControlType.CHECKBOX_COLOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column justify-content-end\"\n            [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-checkbox-color-picker\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-checkbox-color-picker>\n            }\n          </div>\n        }\n\n        @case (ControlType.SWITCH) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'switch-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-switch\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-switch>\n            }\n          </div>\n        }\n\n        @case (ControlType.SELECT_BUTTON) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'select-button-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-select-button\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-select-button>\n            }\n          </div>\n        }\n\n        @case (ControlType.ASSIGN) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'assign-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-assign-responsible\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-assign-responsible>\n            }\n          </div>\n        }\n\n        @case (ControlType.ASSIGN_ASSET) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'assign-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-assign-asset\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-assign-asset>\n            }\n          </div>\n        }\n\n        @case (ControlType.LINKS_DATA) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control | fieldCol\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'links-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <!-- <phoenix-meta-object-links\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-object-links> -->\n            }\n          </div>\n        }\n\n        @case (ControlType.PASSWORD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'password-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-password-feild\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-password-feild>\n            }\n          </div>\n        }\n\n        @case (ControlType.COLOR) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n            [attr.data-cy]=\"'color-' + control?.id\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-color-picker\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-color-picker>\n            }\n          </div>\n        }\n\n        @case (ControlType.UPLOAD) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [attr.data-cy]=\"'upload-' + control?.id\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-upload\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-upload>\n            }\n          </div>\n        }\n\n        @case (ControlType.UPLOAD_DRAG_DROP) {\n          <div\n            [style]=\"{ order: control.order }\"\n            [attr.data-cy]=\"'upload-' + control?.id\"\n            [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n            class=\"flex flex-column\"\n          >\n            @if (control.readOnly) {\n              @if (!control?.hidden) {\n                <phoenix-read-only-input\n                  [control]=\"control\"\n                  [metaform]=\"metaForm\"\n                ></phoenix-read-only-input>\n              }\n            } @else {\n              <phoenix-meta-upload-dragdrop\n                [disable]=\"disableForm\"\n                [formControlName]=\"control.configuration.key\"\n                [control]=\"control\"\n                [parentForm]=\"metaForm\"\n              ></phoenix-meta-upload-dragdrop>\n            }\n          </div>\n        }\n\n        @case (ControlType.SLOT) {\n          <ng-content\n            [select]=\"[control.configuration.key]\"\n          ></ng-content>\n        }\n      }\n    }\n  </div>\n\n  @if (formButtons) {\n    <div class=\"flex justify-content-end\">\n      <p-button\n        class=\"mr-1\"\n        [disabled]=\"!metaForm.valid || disableForm\"\n        type=\"submit\"\n        label=\"{{ 'ACTION.SAVE' | translate }}\"\n        [attr.data-cy]=\"'submit-button'\"\n        [loading]=\"loading\"\n      ></p-button>\n\n      <p-button\n        [disabled]=\"disableForm\"\n        styleClass=\"p-button-link\"\n        [text]=\"true\"\n        (onClick)=\"onCancel()\"\n        label=\"{{ 'ACTION.CANCEL' | translate }}\"\n        [attr.data-cy]=\"'cancel-button'\"\n      ></p-button>\n    </div>\n  }\n</form>" }]
-        }], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i1$2.TranslateService }, { type: i1$3.HttpClient }] });
 
 class MetaFormButtonsComponent {
     metaFormService;
@@ -7804,8 +7759,30 @@ class GroupsFormComponent extends MetaFormAbstract {
     optionLabel;
     notiffication;
     trans = inject(TranslateService);
+    ngOnChanges(simpleChanges) {
+        if (simpleChanges?.['metaFormControls'] ||
+            simpleChanges?.['metaFormValues'] ||
+            simpleChanges?.['metaForm']) {
+            this.syncForm();
+            this.metaService.setFormDirtyStatus(this.metaForm.dirty);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  @if (metaFormControls?.length) {\n    <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n      @for (group of metaFormControls; track group.groupName; let idx = $index) {\n        <div [style]=\"{ order: group.order }\" class=\"w-full\">\n          <p-accordion-panel\n            [value]=\"idx\"\n            [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n          >\n            <p-accordion-header>\n              <ng-template #toggleicon let-active=\"active\">\n                @if (active) {\n                  <i class=\"pi pi-minus-circle\"></i>\n                } @else {\n                  <i class=\"pi pi-plus-circle\"></i>\n                }\n              </ng-template>\n              {{ group.groupName | translate }}\n            </p-accordion-header>\n\n            <p-accordion-content>\n              <div [style]=\"formStyle\" class=\"grid align-items-end\">\n                @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n                  @switch (control.configuration.type) {\n\n                    @case (ControlType.TEXT) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-input\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-input>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.NUMBER) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-number-input\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-number-input>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TIMEPERIOD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-timeperiod\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-timeperiod>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.CURRENCY) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-currency\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-currency>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TEXT_AREA) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-area\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-area>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.SS_OPTION) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-single-select\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-single-select>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.SS_OPTION_OBJECT_BASED) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-single-select-object-based\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-single-select-object-based>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.MS_OPTION) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-multiple-select\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-multiple-select>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.START_DUE_DATE) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-start-due-date\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-start-due-date>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.DATE) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-calendar\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-calendar>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TEXT_EDITOR) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-editor\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-editor>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.CHECKBOX) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        <phoenix-meta-checkbox\n                          [disable]=\"disableForm\"\n                          [formControlName]=\"control.configuration.key\"\n                          [control]=\"control\"\n                          [parentForm]=\"metaForm\"\n                        ></phoenix-meta-checkbox>\n                      </div>\n                    }\n\n                    @case (ControlType.SWITCH) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-switch\n                            [disable]=\"true\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-switch>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.ASSIGN) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-assign-responsible\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-assign-responsible>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.ASSIGN_ASSET) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                        [attr.data-cy]=\"'assign-' + control?.id\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-assign-asset\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-assign-asset>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.UPLOAD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [attr.data-cy]=\"'upload-' + control?.id\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-upload\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-upload>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.UPLOAD_DRAG_DROP) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                        [attr.data-cy]=\"'assign-' + control?.id\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-upload-dragdrop\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-upload-dragdrop>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.LINKS_DATA) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control | fieldCol\"\n                        class=\"flex flex-column\"\n                      >\n                      </div>\n                    }\n\n                    @case (ControlType.PASSWORD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        <phoenix-meta-password-feild\n                          [disable]=\"disableForm\"\n                          [formControlName]=\"control.configuration.key\"\n                          [control]=\"control\"\n                          [parentForm]=\"metaForm\"\n                        ></phoenix-meta-password-feild>\n                      </div>\n                    }\n\n                    @default {\n                    }\n                  }\n                }\n              </div>\n            </p-accordion-content>\n          </p-accordion-panel>\n        </div>\n      }\n    </form>\n  }\n</p-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  @if (metaFormControls?.length) {\n    <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n      @for (group of metaFormControls; track group.groupName; let idx = $index) {\n        <div [style]=\"{ order: group.order }\" class=\"w-full\">\n          <p-accordion-panel\n            [value]=\"idx\"\n            [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n          >\n            <p-accordion-header>\n              <ng-template #toggleicon let-active=\"active\">\n                @if (active) {\n                  <i class=\"pi pi-minus-circle\"></i>\n                } @else {\n                  <i class=\"pi pi-plus-circle\"></i>\n                }\n              </ng-template>\n              {{ group.groupName | translate }}\n            </p-accordion-header>\n\n            <p-accordion-content>\n              <div [style]=\"formStyle\" class=\"grid align-items-end\">\n                @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n                  @switch (control.configuration.type) {\n\n                    @case (ControlType.TEXT) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-input\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-input>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.NUMBER) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-number-input\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-number-input>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TIMEPERIOD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-timeperiod\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-timeperiod>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.CURRENCY) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-currency\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-currency>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TEXT_AREA) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-area\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-area>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.SS_OPTION) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-single-select\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-single-select>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.SS_OPTION_OBJECT_BASED) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-single-select-object-based\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-single-select-object-based>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.MS_OPTION) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-multiple-select\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-multiple-select>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.START_DUE_DATE) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-start-due-date\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-start-due-date>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.DATE) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-calendar\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-calendar>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TEXT_EDITOR) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-editor\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-editor>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.CHECKBOX) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        <phoenix-meta-checkbox\n                          [disable]=\"disableForm\"\n                          [formControlName]=\"control.configuration.key\"\n                          [control]=\"control\"\n                          [parentForm]=\"metaForm\"\n                        ></phoenix-meta-checkbox>\n                      </div>\n                    }\n\n                    @case (ControlType.SWITCH) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-switch\n                            [disable]=\"true\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-switch>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.ASSIGN) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-assign-responsible\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-assign-responsible>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.ASSIGN_ASSET) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                        [attr.data-cy]=\"'assign-' + control?.id\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-assign-asset\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-assign-asset>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.UPLOAD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [attr.data-cy]=\"'upload-' + control?.id\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-upload\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-upload>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.UPLOAD_DRAG_DROP) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                        [attr.data-cy]=\"'assign-' + control?.id\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-upload-dragdrop\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-upload-dragdrop>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.LINKS_DATA) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control | fieldCol\"\n                        class=\"flex flex-column\"\n                      >\n                      </div>\n                    }\n\n                    @case (ControlType.PASSWORD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        <phoenix-meta-password-feild\n                          [disable]=\"disableForm\"\n                          [formControlName]=\"control.configuration.key\"\n                          [control]=\"control\"\n                          [parentForm]=\"metaForm\"\n                        ></phoenix-meta-password-feild>\n                      </div>\n                    }\n\n                    @default {\n                    }\n                  }\n                }\n              </div>\n            </p-accordion-content>\n          </p-accordion-panel>\n        </div>\n      }\n    </form>\n  }\n</p-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
+                // InputTextModule,
+                // InputTextareaModule,
+                // DatePickerModule,
+                // SelectModule,
+                // ButtonModule,
+                // MultiSelectModule,
+                TranslateModule }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: 
+                // MetaObjectLinksComponent,
+                MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: 
+                // MessageModule,
+                MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: 
+                // CheckboxModule,
+                // EditorModule,
+                FieldColPipe, name: "fieldCol" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupsFormComponent, decorators: [{
             type: Component,
@@ -7813,7 +7790,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
+                        // InputTextModule,
+                        // InputTextareaModule,
+                        // DatePickerModule,
+                        // SelectModule,
+                        // ButtonModule,
+                        // MultiSelectModule,
                         TranslateModule,
+                        // CheckboxModule,
+                        // EditorModule,
                         FieldColPipe,
                         MetaTextEditorComponent,
                         MetaCheckboxComponent,
@@ -7826,6 +7811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaCalendarComponent,
                         MetaUploadComponentDragDrop,
                         AccordionModule,
+                        // MetaObjectLinksComponent,
                         MetaSwitchComponent,
                         MetaPasswordFeildComponent,
                         MetaTimeperiodComponent,
@@ -7835,6 +7821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaAssignAssetComponent,
                         PanelModule,
                         ReadOnlyInputComponent,
+                        // MessageModule,
                         MetaSingleSelectObjectBasedComponent,
                         MetaUploadComponent,
                     ], template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  @if (metaFormControls?.length) {\n    <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n      @for (group of metaFormControls; track group.groupName; let idx = $index) {\n        <div [style]=\"{ order: group.order }\" class=\"w-full\">\n          <p-accordion-panel\n            [value]=\"idx\"\n            [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n          >\n            <p-accordion-header>\n              <ng-template #toggleicon let-active=\"active\">\n                @if (active) {\n                  <i class=\"pi pi-minus-circle\"></i>\n                } @else {\n                  <i class=\"pi pi-plus-circle\"></i>\n                }\n              </ng-template>\n              {{ group.groupName | translate }}\n            </p-accordion-header>\n\n            <p-accordion-content>\n              <div [style]=\"formStyle\" class=\"grid align-items-end\">\n                @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n                  @switch (control.configuration.type) {\n\n                    @case (ControlType.TEXT) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-input\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-input>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.NUMBER) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-number-input\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-number-input>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TIMEPERIOD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-timeperiod\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-timeperiod>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.CURRENCY) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-currency\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-currency>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TEXT_AREA) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-area\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-area>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.SS_OPTION) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-single-select\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-single-select>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.SS_OPTION_OBJECT_BASED) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-single-select-object-based\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-single-select-object-based>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.MS_OPTION) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-multiple-select\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-multiple-select>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.START_DUE_DATE) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-start-due-date\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-start-due-date>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.DATE) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-calendar\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-calendar>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.TEXT_EDITOR) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-text-editor\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-text-editor>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.CHECKBOX) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        <phoenix-meta-checkbox\n                          [disable]=\"disableForm\"\n                          [formControlName]=\"control.configuration.key\"\n                          [control]=\"control\"\n                          [parentForm]=\"metaForm\"\n                        ></phoenix-meta-checkbox>\n                      </div>\n                    }\n\n                    @case (ControlType.SWITCH) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-switch\n                            [disable]=\"true\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-switch>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.ASSIGN) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          <phoenix-read-only-input\n                            [control]=\"control\"\n                            [metaform]=\"metaForm\"\n                          ></phoenix-read-only-input>\n                        } @else {\n                          <phoenix-meta-assign-responsible\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-assign-responsible>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.ASSIGN_ASSET) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                        [attr.data-cy]=\"'assign-' + control?.id\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-assign-asset\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-assign-asset>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.UPLOAD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [attr.data-cy]=\"'upload-' + control?.id\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-upload\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-upload>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.UPLOAD_DRAG_DROP) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                        [attr.data-cy]=\"'assign-' + control?.id\"\n                      >\n                        @if (control.readOnly) {\n                          @if (!control?.hidden) {\n                            <phoenix-read-only-input\n                              [control]=\"control\"\n                              [metaform]=\"metaForm\"\n                            ></phoenix-read-only-input>\n                          }\n                        } @else {\n                          <phoenix-meta-upload-dragdrop\n                            [disable]=\"disableForm\"\n                            [formControlName]=\"control.configuration.key\"\n                            [control]=\"control\"\n                            [parentForm]=\"metaForm\"\n                          ></phoenix-meta-upload-dragdrop>\n                        }\n                      </div>\n                    }\n\n                    @case (ControlType.LINKS_DATA) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control | fieldCol\"\n                        class=\"flex flex-column\"\n                      >\n                      </div>\n                    }\n\n                    @case (ControlType.PASSWORD) {\n                      <div\n                        [style]=\"{ order: control.order }\"\n                        [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                        class=\"flex flex-column\"\n                      >\n                        <phoenix-meta-password-feild\n                          [disable]=\"disableForm\"\n                          [formControlName]=\"control.configuration.key\"\n                          [control]=\"control\"\n                          [parentForm]=\"metaForm\"\n                        ></phoenix-meta-password-feild>\n                      </div>\n                    }\n\n                    @default {\n                    }\n                  }\n                }\n              </div>\n            </p-accordion-content>\n          </p-accordion-panel>\n        </div>\n      }\n    </form>\n  }\n</p-accordion>" }]