@fuentis/phoenix-ui 0.0.9-alpha.463 → 0.0.9-alpha.464

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -6021,16 +6021,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 class MetaTextEditorComponent extends BaseMetaField {
+    previewMode = false;
+    hideLabel = false;
     editor;
     isHtmlMode = false;
     htmlContent = '';
     ngOnInit() {
         super.ngOnInit();
-        this.editor = new Editor();
+        // Only initialize editor if not in preview mode
+        if (!this.previewMode) {
+            this.editor = new Editor();
+        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this.editor.destroy();
+        // Only destroy editor if it was initialized
+        if (this.editor) {
+            this.editor.destroy();
+        }
     }
     writeValue(value) {
         this.value = value;
@@ -6056,7 +6064,7 @@ class MetaTextEditorComponent extends BaseMetaField {
         this.isHtmlMode = !this.isHtmlMode;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MetaTextEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MetaTextEditorComponent, isStandalone: true, selector: "phoenix-meta-text-editor", providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MetaTextEditorComponent, isStandalone: true, selector: "phoenix-meta-text-editor", inputs: { previewMode: "previewMode", hideLabel: "hideLabel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaTextEditorComponent),
@@ -6064,49 +6072,61 @@ class MetaTextEditorComponent extends BaseMetaField {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <div [hidden]="control?.hidden">
-      <div class="flex justify-content-between align-items-center mb-2">
-        <phoenix-meta-label [control]="control"></phoenix-meta-label>
-        <button
-          pButton
-          type="button"
-          [icon]="isHtmlMode ? 'pi pi-eye' : 'pi pi-code'"
-          [label]="isHtmlMode ? 'Visual' : 'HTML'"
-          class="p-button-sm p-button-text"
-          (click)="toggleHtmlMode()"
-          [disabled]="disable"
-        ></button>
+      <!-- Preview/Display Only Mode -->
+      <div *ngIf="previewMode" class="preview-mode">
+        <phoenix-meta-label
+          *ngIf="!hideLabel"
+          [control]="control"
+        ></phoenix-meta-label>
+        <div class="html-preview-content" [innerHTML]="htmlContent"></div>
       </div>
-      <div [attr.data-cy]="'editor-' + control?.id">
-        <!-- Visual Editor Mode -->
-        <div *ngIf="!isHtmlMode">
-          <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
-          <ngx-editor
-            [editor]="editor"
+
+      <!-- Edit Mode -->
+      <div *ngIf="!previewMode">
+        <div class="flex justify-content-between align-items-center mb-2">
+          <phoenix-meta-label [control]="control"></phoenix-meta-label>
+          <button
+            pButton
+            type="button"
+            [icon]="isHtmlMode ? 'pi pi-eye' : 'pi pi-code'"
+            [label]="isHtmlMode ? 'Visual' : 'HTML'"
+            class="p-button-sm p-button-text"
+            (click)="toggleHtmlMode()"
+            [disabled]="disable"
+          ></button>
+        </div>
+        <div [attr.data-cy]="'editor-' + control?.id">
+          <!-- Visual Editor Mode -->
+          <div *ngIf="!isHtmlMode">
+            <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
+            <ngx-editor
+              [editor]="editor"
+              [(ngModel)]="htmlContent"
+              [disabled]="disable"
+              (ngModelChange)="onEditorChange($event)"
+              (blur)="onTouched()"
+            ></ngx-editor>
+          </div>
+
+          <!-- HTML Source Mode -->
+          <textarea
+            *ngIf="isHtmlMode"
+            pTextarea
             [(ngModel)]="htmlContent"
             [disabled]="disable"
-            (ngModelChange)="onEditorChange($event)"
+            (ngModelChange)="onHtmlChange($event)"
             (blur)="onTouched()"
-          ></ngx-editor>
+            [rows]="10"
+            class="w-full font-monospace"
+          ></textarea>
         </div>
-
-        <!-- HTML Source Mode -->
-        <textarea
-          *ngIf="isHtmlMode"
-          pTextarea
-          [(ngModel)]="htmlContent"
-          [disabled]="disable"
-          (ngModelChange)="onHtmlChange($event)"
-          (blur)="onTouched()"
-          [rows]="10"
-          class="w-full font-monospace"
-        ></textarea>
+        <phoenix-inline-field-error
+          *ngIf="!control?.hidden"
+          [ctrl]="ctrl"
+        ></phoenix-inline-field-error>
       </div>
-      <phoenix-inline-field-error
-        *ngIf="!control?.hidden"
-        [ctrl]="ctrl"
-      ></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [":host::ng-deep{.NgxEditor__Wrapper,.NgxEditor__Content{min-height:120px}.NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}.font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }] });
+  `, isInline: true, styles: [":host::ng-deep{.NgxEditor__Wrapper,.NgxEditor__Content{min-height:120px}.NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}.font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}.html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px;p{margin:0 0 .5rem}p:last-child{margin-bottom:0}ul,ol{margin:.5rem 0;padding-left:1.5rem}strong{font-weight:700}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:.5rem 0}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
             type: Component,
@@ -6122,47 +6142,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TextareaModule,
                     ], template: `
     <div [hidden]="control?.hidden">
-      <div class="flex justify-content-between align-items-center mb-2">
-        <phoenix-meta-label [control]="control"></phoenix-meta-label>
-        <button
-          pButton
-          type="button"
-          [icon]="isHtmlMode ? 'pi pi-eye' : 'pi pi-code'"
-          [label]="isHtmlMode ? 'Visual' : 'HTML'"
-          class="p-button-sm p-button-text"
-          (click)="toggleHtmlMode()"
-          [disabled]="disable"
-        ></button>
+      <!-- Preview/Display Only Mode -->
+      <div *ngIf="previewMode" class="preview-mode">
+        <phoenix-meta-label
+          *ngIf="!hideLabel"
+          [control]="control"
+        ></phoenix-meta-label>
+        <div class="html-preview-content" [innerHTML]="htmlContent"></div>
       </div>
-      <div [attr.data-cy]="'editor-' + control?.id">
-        <!-- Visual Editor Mode -->
-        <div *ngIf="!isHtmlMode">
-          <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
-          <ngx-editor
-            [editor]="editor"
+
+      <!-- Edit Mode -->
+      <div *ngIf="!previewMode">
+        <div class="flex justify-content-between align-items-center mb-2">
+          <phoenix-meta-label [control]="control"></phoenix-meta-label>
+          <button
+            pButton
+            type="button"
+            [icon]="isHtmlMode ? 'pi pi-eye' : 'pi pi-code'"
+            [label]="isHtmlMode ? 'Visual' : 'HTML'"
+            class="p-button-sm p-button-text"
+            (click)="toggleHtmlMode()"
+            [disabled]="disable"
+          ></button>
+        </div>
+        <div [attr.data-cy]="'editor-' + control?.id">
+          <!-- Visual Editor Mode -->
+          <div *ngIf="!isHtmlMode">
+            <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
+            <ngx-editor
+              [editor]="editor"
+              [(ngModel)]="htmlContent"
+              [disabled]="disable"
+              (ngModelChange)="onEditorChange($event)"
+              (blur)="onTouched()"
+            ></ngx-editor>
+          </div>
+
+          <!-- HTML Source Mode -->
+          <textarea
+            *ngIf="isHtmlMode"
+            pTextarea
             [(ngModel)]="htmlContent"
             [disabled]="disable"
-            (ngModelChange)="onEditorChange($event)"
+            (ngModelChange)="onHtmlChange($event)"
             (blur)="onTouched()"
-          ></ngx-editor>
+            [rows]="10"
+            class="w-full font-monospace"
+          ></textarea>
         </div>
-
-        <!-- HTML Source Mode -->
-        <textarea
-          *ngIf="isHtmlMode"
-          pTextarea
-          [(ngModel)]="htmlContent"
-          [disabled]="disable"
-          (ngModelChange)="onHtmlChange($event)"
-          (blur)="onTouched()"
-          [rows]="10"
-          class="w-full font-monospace"
-        ></textarea>
+        <phoenix-inline-field-error
+          *ngIf="!control?.hidden"
+          [ctrl]="ctrl"
+        ></phoenix-inline-field-error>
       </div>
-      <phoenix-inline-field-error
-        *ngIf="!control?.hidden"
-        [ctrl]="ctrl"
-      ></phoenix-inline-field-error>
     </div>
   `, providers: [
                         {
@@ -6170,8 +6202,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             useExisting: forwardRef(() => MetaTextEditorComponent),
                             multi: true,
                         },
-                    ], styles: [":host::ng-deep{.NgxEditor__Wrapper,.NgxEditor__Content{min-height:120px}.NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}.font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}}\n"] }]
-        }] });
+                    ], styles: [":host::ng-deep{.NgxEditor__Wrapper,.NgxEditor__Content{min-height:120px}.NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}.font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}.html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px;p{margin:0 0 .5rem}p:last-child{margin-bottom:0}ul,ol{margin:.5rem 0;padding-left:1.5rem}strong{font-weight:700}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:.5rem 0}}}\n"] }]
+        }], propDecorators: { previewMode: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }] } });
 
 class MetaTextInputComponent extends BaseMetaField {
     lang = inject(TranslateService).currentLang;
@@ -7337,7 +7373,7 @@ class MetaFormComponent extends MetaFormAbstract {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n  <!-- <small>{{ metaForm.value | json }}</small> -->\n  <div class=\"grid\">\n    <ng-container *ngFor=\"let control of metaFormControls\">\n      <ng-container [ngSwitch]=\"control.configuration.type\">\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-text-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-text-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.NUMBER\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'number-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-number-input\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-number-input>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'timeperiod-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-timeperiod\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-timeperiod>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CURRENCY\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'currency-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-currency\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-currency>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_AREA\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-area-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ss-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\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          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.MS_OPTION\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'ms-option-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'start-due-date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-start-due-date\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-start-due-date>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.DATE\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'date-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-calendar\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-calendar>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'text-editor-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX\"\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          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-checkbox\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-checkbox>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.CHECKBOX_COLOR\"\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          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SWITCH\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'switch-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-switch\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-switch>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.SELECT_BUTTON\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'select-button-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.ASSIGN\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'assign-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-assign-responsible\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-assign-responsible>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'assign-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-assign-asset\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-assign-asset>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.LINKS_DATA\"\n          [ngClass]=\"control | fieldCol\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'links-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <!-- <phoenix-meta-object-links\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            ></phoenix-meta-object-links> -->\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.PASSWORD\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'password-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\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          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.COLOR\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n          [attr.data-cy]=\"'color-' + control?.id\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-color-picker\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-color-picker>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.UPLOAD\"\n          [attr.data-cy]=\"'upload-' + control?.id\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-upload\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-upload>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n\n        <div\n          [style]=\"{ order: control.order }\"\n          *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n          [attr.data-cy]=\"'upload-' + control?.id\"\n          [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n          class=\"flex flex-column\"\n        >\n          <!-- edit field & redonly field content -->\n          <ng-container *ngIf=\"control.readOnly; else readOnly\">\n            <phoenix-read-only-input\n              *ngIf=\"!control?.hidden\"\n              [control]=\"control\"\n              [metaform]=\"metaForm\"\n            ></phoenix-read-only-input>\n          </ng-container>\n          <ng-template #readOnly>\n            <phoenix-meta-upload-dragdrop\n              [disable]=\"disableForm\"\n              [formControlName]=\"control.configuration.key\"\n              [control]=\"control\"\n              [parentForm]=\"metaForm\"\n            >\n            </phoenix-meta-upload-dragdrop>\n          </ng-template>\n          <!-- edit field & redonly field content end -->\n        </div>\n        <ng-content\n          *ngSwitchCase=\"ControlType.SLOT\"\n          [select]=\"[control.configuration.key]\"\n        ></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div *ngIf=\"formButtons\" 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    <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</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: 
                 //metafields -> to one module and than import here
-                MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { 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: "ngmodule", type: PanelModule }, { 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" }], encapsulation: i0.ViewEncapsulation.None });
+                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: "ngmodule", type: PanelModule }, { 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" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MetaFormComponent, decorators: [{
             type: Component,
@@ -7449,9 +7485,9 @@ class GroupsFormComponent extends MetaFormAbstract {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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  <form *ngIf=\"metaFormControls\" [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            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\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                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD\"\n                  [attr.data-cy]=\"'upload-' + control?.id\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload-dragdrop\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload-dragdrop>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\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              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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  <form *ngIf=\"metaFormControls\" [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            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-text-editor\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                    [previewMode]=\"control.readOnly\"\n                  ></phoenix-meta-text-editor>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\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                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD\"\n                  [attr.data-cy]=\"'upload-' + control?.id\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload-dragdrop\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload-dragdrop>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\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              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 }, { kind: "ngmodule", type: 
                 // InputTextareaModule,
-                CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { 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: i4$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: 
+                CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { 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: i4$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4$1.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: "ngmodule", type: MessagesModule }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }] });
 }
@@ -7495,7 +7531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         MessagesModule,
                         MetaSingleSelectObjectBasedComponent,
                         MetaUploadComponent,
-                    ], template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  <form *ngIf=\"metaFormControls\" [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            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\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                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD\"\n                  [attr.data-cy]=\"'upload-' + control?.id\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload-dragdrop\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload-dragdrop>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\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              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n" }]
+                    ], template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  <form *ngIf=\"metaFormControls\" [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            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\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                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-text-editor\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                    [previewMode]=\"control.readOnly\"\n                  ></phoenix-meta-text-editor>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\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                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD\"\n                  [attr.data-cy]=\"'upload-' + control?.id\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-upload-dragdrop\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-upload-dragdrop>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\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              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n" }]
         }], propDecorators: { activePanelsIndex: [{
                 type: Input
             }] } });