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

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -3860,95 +3860,60 @@ class MetaFormAbstract {
     onFormSubmit = new EventEmitter();
     onFormCancel = new EventEmitter();
     formActive$;
+    formSub$;
     /**
-     * IMPORTANT:
-     * Do not subscribe in the constructor, because @Input() metaForm arrives later.
-     * We wire subscriptions in ngOnChanges when the real FormGroup instance is available.
-     */
-    formSub;
-    /**
-     * Dependency setup may create subscriptions. We allow cleanup by supporting
-     * optional cleanup functions returned by setupDependencies().
+     * Holds cleanup functions returned by dependency binding.
+     * Every time we re-bind dependencies, we call previous cleanup first.
      */
     dependencyCleanup = [];
     /**
-     * Metadata signature used to detect when controls changed.
-     * If the signature changes, dependencies are cleaned up and re-bound.
+     * Signature of the last bound metadata.
+     * If controls change, we re-bind dependencies.
      */
     lastMetaSignature = '';
-    /**
-     * Subscriptions used to remove server-side validation errors when the user edits the field.
-     * This prevents "sticky" errors blocking save after the value is corrected.
-     */
-    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) {
-        /**
-         * Re-wire form subscription whenever the input form instance changes.
-         * This is critical because the component does NOT own the FormGroup;
-         * it is provided by the parent.
-         */
-        if (changes['metaForm']) {
-            this.rewireFormSubscription();
-        }
-        /**
-         * If metadata, initial values, or disabled flag changes, rebuild/sync the form.
-         * Safe to call multiple times.
-         */
-        if (changes['metaFormControls'] ||
-            changes['metaFormValues'] ||
-            changes['disableForm']) {
-            if (!this.metaForm)
-                return;
-            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). Keep it working.
+     * 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();
     }
     /**
-     * Main sync:
-     * - ensures controls exist
-     * - applies validators
-     * - patches values (without emitting)
-     * - applies disabled state
-     * - binds dependencies (safe rebind)
-     * - recomputes validity
+     * Main sync: builds controls, applies validators, patches values,
+     * applies disabled state, and binds dependencies safely.
+     *
+     * Safe to call multiple times.
      */
-    // MetaFormAbstract (samo bitne izmene – kompletno je kompatibilno sa tvojim kodom)
     syncForm() {
         const flatControls = this.flattenControls(this.metaFormControls);
         const values = this.metaFormValues ?? null;
-        // 1) Ensure controls + apply validators
+        // 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 without emitting
+        // 3) Enable/disable entire form if requested
         if (this.disableForm)
             this.metaForm.disable({ emitEvent: false });
         else
             this.metaForm.enable({ emitEvent: false });
-        // 4) Bind dependencies (safe rebind)
+        // 4) Bind dependencies if needed (rebind when meta changes)
         this.bindDependenciesIfNeeded(flatControls);
-        // 5) Compute validity NOW (sync) but DO NOT emit (critical!)
-        this.metaForm.updateValueAndValidity({ emitEvent: false });
-        // 6) Notify that build is complete (signal to parent)
+        // 5) Notify that form build is done
         this.metaService.setFormBuildCompletition(true);
     }
     /**
@@ -3959,13 +3924,16 @@ class MetaFormAbstract {
     flattenControls(input) {
         if (!Array.isArray(input))
             return [];
+        // already flat
         const isFlat = input.every((x) => !!x?.configuration?.key);
         if (isFlat)
             return input;
-        const flattened = input.flatMap((x) => Array.isArray(x?.ctrl) ? x.ctrl : x);
+        // 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('|');
@@ -3980,6 +3948,7 @@ class MetaFormAbstract {
         const sig = this.metaSignature(flatControls);
         if (sig === this.lastMetaSignature)
             return;
+        // cleanup previous dependency subscriptions
         this.cleanupDependencies();
         const ctx = {
             form: this.metaForm,
@@ -3988,8 +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);
-        // Allow setupDependencies to return a cleanup function (optional)
+        /**
+         * If your setupDependencies wants to return a cleanup fn, we support it.
+         * (Not required, but useful.)
+         */
         if (typeof maybeCleanup === 'function') {
             this.dependencyCleanup.push(maybeCleanup);
         }
@@ -4005,10 +3982,6 @@ class MetaFormAbstract {
         this.dependencyCleanup = [];
         this.lastMetaSignature = '';
     }
-    /**
-     * Creates missing controls, applies validators, and removes stale controls.
-     * Also attaches "clear server error on edit" subscriptions per control.
-     */
     ensureControls(controls) {
         (controls ?? []).forEach((control) => {
             const key = control?.configuration?.key;
@@ -4018,57 +3991,24 @@ class MetaFormAbstract {
             if (!this.metaForm.contains(key)) {
                 this.metaForm.addControl(key, this.fb.control(getFieldType(control)));
             }
-            // Apply sync validators
+            // Apply validators stably
             this.applyValidators(control);
-            // Clear server-side errors when user edits this field
-            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-originated uniqueness errors when the user changes the value.
-     * This prevents a corrected value from staying blocked by an old server error.
-     *
-     * We DO NOT touch other errors (required, pattern, etc.).
-     */
-    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;
-            // Clear only server errors, keep other validators
-            ctrl.setErrors(Object.keys(rest).length ? rest : null, { emitEvent: false });
-            // IMPORTANT: after changing errors, re-run validity WITH EMIT
-            this.metaForm.updateValueAndValidity({ emitEvent: true });
-        });
-        this.clearServerErrorSubs.set(key, sub);
-    }
-    /**
-     * Applies synchronous validators based on metadata.
-     * Uses emitEvent:false to avoid unnecessary loops.
+     * Applies validators based on metadata.
+     * Uses emitEvent: false to avoid loops and unstable validator states.
      */
     applyValidators(control) {
         const key = control?.configuration?.key;
@@ -4084,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 ||
@@ -4105,19 +4045,6 @@ class MetaFormAbstract {
         ctrl.setValidators(validators);
         ctrl.updateValueAndValidity({ emitEvent: false });
     }
-    /**
-     * Subscribes MetaFormService to the correct FormGroup instance.
-     * Must run after @Input metaForm is available.
-     */
-    rewireFormSubscription() {
-        this.formSub?.unsubscribe();
-        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);
     }
@@ -4129,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
@@ -7725,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,
@@ -7764,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;
@@ -7822,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,
@@ -7831,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,
@@ -7844,6 +7811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaCalendarComponent,
                         MetaUploadComponentDragDrop,
                         AccordionModule,
+                        // MetaObjectLinksComponent,
                         MetaSwitchComponent,
                         MetaPasswordFeildComponent,
                         MetaTimeperiodComponent,
@@ -7853,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>" }]