@fuentis/phoenix-ui 0.0.9-alpha.122 → 0.0.9-alpha.124

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -81,7 +81,7 @@ import { TextareaModule } from 'primeng/textarea';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i1$5 from '@angular/platform-browser';
 import { MessagesModule } from 'primeng/messages';
-import * as i3$b from 'primeng/accordion';
+import * as i4$3 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
 
 class SidebarItemComponent {
@@ -812,14 +812,18 @@ class PhoenixDataTableTabsComponent {
                 this.value = this.resolveTabFromRoute();
             }
         });
-        this.value = this.resolveTabFromRoute();
+    }
+    ngOnChanges() {
+        if (this.actions?.length > 0) {
+            this.value = this.resolveTabFromRoute();
+        }
     }
     onActionClick(event) {
-        let opt = this.actions.find((i) => i.key === event.value);
+        const opt = this.actions.find((i) => i.key === event.value);
         this.actionClick.emit({ action: opt });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PhoenixDataTableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<p-selectButton\n  [options]=\"actions\"\n  optionValue=\"key\"\n  [(ngModel)]=\"value\"\n  optionLabel=\"icon\"\n  [unselectable]=\"true\"\n  (onChange)=\"onActionClick($event)\"\n>\n  <ng-template #item let-item>\n    <span>\n      {{ item.label | translate }}\n    </span>\n    <span>\n      <p-badge\n        *ngIf=\"item.badgeCount\"\n        [value]=\"item.badgeCount\"\n        severity=\"danger\"\n        badgeSize=\"small\"\n      />\n    </span>\n  </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n  [options]=\"actions\"\n  optionValue=\"key\"\n  [(ngModel)]=\"value\"\n  optionLabel=\"icon\"\n  [unselectable]=\"true\"\n  (onChange)=\"onActionClick($event)\"\n>\n  <ng-template #item let-item>\n    <span>\n      {{ item.label | translate }}\n    </span>\n    <span>\n      <p-badge\n        *ngIf=\"item.badgeCount\"\n        [value]=\"item.badgeCount\"\n        severity=\"danger\"\n        badgeSize=\"small\"\n      />\n    </span>\n  </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PhoenixDataTableTabsComponent, decorators: [{
             type: Component,
@@ -1398,7 +1402,7 @@ class TableCaptionComponent {
         this.actionClick.emit({ action, selectedItems: this.selectedItems });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-4\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"COLUMS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-4\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"COLUMS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -1418,7 +1422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ListboxModule,
                         TranslateModule,
                         IsSelectedPipe
-                    ], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-4\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"COLUMS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n" }]
+                    ], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-4\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"COLUMS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n" }]
         }], propDecorators: { tableConfiguration: [{
                 type: Input
             }], columns: [{
@@ -5058,9 +5062,9 @@ class GroupsFormComponent extends MetaFormAbstract {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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 [value]=\"idx\">\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 }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div 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                  <phoenix-meta-multiple-select\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-multiple-select>\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.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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 [value]=\"idx\">\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 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                  <phoenix-meta-multiple-select\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-multiple-select>\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.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "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: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$b.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i3$b.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$b.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$b.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: i3$2.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: "ngmodule", type: AccordionModule }, { kind: "component", type: i4$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4$3.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" }] });
 }
@@ -5102,7 +5106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ReadOnlyInputComponent,
                         MessagesModule,
                         MetaSingleSelectObjectBasedComponent,
-                    ], 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 [value]=\"idx\">\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 }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div 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                  <phoenix-meta-multiple-select\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-multiple-select>\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.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 [value]=\"idx\">\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 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                  <phoenix-meta-multiple-select\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-multiple-select>\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.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
             }] } });