@fuentis/phoenix-ui 0.0.9-alpha.270 → 0.0.9-alpha.272

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -2039,7 +2039,8 @@ class TableCellPipe {
     constructor(datePipe) {
         this.datePipe = datePipe;
     }
-    transform(value, col, dateFormat = 'yyyy-MM-dd') {
+    transform(obj, col, dateFormat = 'yyyy-MM-dd') {
+        const value = this.getNestedValue(obj, col.field);
         if (!value)
             return '--';
         switch (col.columnType) {
@@ -2052,9 +2053,21 @@ class TableCellPipe {
             case 'CUSTOM':
                 return col.customRenderer ? col.customRenderer(value) : value;
             default:
-                return value.toString();
+                return value?.toString();
         }
     }
+    getNestedValue(obj, path) {
+        if (!obj || !path)
+            return '';
+        let value;
+        if (!path.includes('.')) {
+            value = obj[path];
+        }
+        else {
+            value = path.split('.').reduce((acc, part) => acc?.[part], obj);
+        }
+        return value != null ? value.toString() : '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCellPipe, deps: [{ token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TableCellPipe, isStandalone: true, name: "cell", pure: false });
 }
@@ -2063,7 +2076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     name: 'cell',
                     standalone: true,
-                    pure: false
+                    pure: false,
                 }]
         }], ctorParameters: () => [{ type: i1$1.DatePipe }] });
 
@@ -2392,7 +2405,7 @@ class TableComponent {
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n                      {{ rowData[col.field].email ?? \"  --\" }}\n                    </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-phone text-500\"></i\n                      >{{ rowData[col.field].phone ?? \"  --\" }}\n                    </span>\n                  </div>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field].length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n                      {{ rowData[col.field].email ?? \"  --\" }}\n                    </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-phone text-500\"></i\n                      >{{ rowData[col.field].phone ?? \"  --\" }}\n                    </span>\n                  </div>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field].length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <span>{{ rowData[\"category.name\"] }}</span>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2412,7 +2425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ChipModule,
                         InitialsPipe,
                         TimePeriodPipe,
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n                      {{ rowData[col.field].email ?? \"  --\" }}\n                    </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-phone text-500\"></i\n                      >{{ rowData[col.field].phone ?? \"  --\" }}\n                    </span>\n                  </div>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field].length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n                      {{ rowData[col.field].email ?? \"  --\" }}\n                    </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-phone text-500\"></i\n                      >{{ rowData[col.field].phone ?? \"  --\" }}\n                    </span>\n                  </div>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field].length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <span>{{ rowData[\"category.name\"] }}</span>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -2526,7 +2539,6 @@ function getFieldType(control) {
         case ControlType.MS_OPTION:
             return control.dataOptionValues;
         default:
-        //  console.log(control + ' ' + control.configuration.type);
     }
 }
 
@@ -2898,7 +2910,6 @@ class MetaAssignResponsibleComponent {
         this.parentForm.controls[this.control.configuration.key].setValue(null);
     }
     assignResponsible() {
-        console.log(this.control);
         const ref = this.dialogService.open(ObjectItemDialogComponent, {
             header: 'Assign Responsible',
             width: '700px',
@@ -3252,7 +3263,6 @@ class InlineFieldError {
         //   return 'ENTRY OK';
         // }
         if (control?.errors) {
-            console.log(control);
             switch (Object.keys(control.errors)[0]) {
                 case ErrorType.REQUIRED:
                     return this.translateService.instant('VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED');
@@ -5341,7 +5351,14 @@ class ReadOnlyInputComponent {
                 break;
             case ControlType.MS_OPTION:
                 const values = this.metaform.get(this.control.configuration.key)?.value;
-                this.value = values.map((v) => v.userFriendlyMessage);
+                const maxItems = 4;
+                this.value =
+                    values.length <= maxItems
+                        ? values.map((v) => v.userFriendlyMessage).join(', ')
+                        : values
+                            .slice(0, maxItems)
+                            .map((v) => v.userFriendlyMessage)
+                            .join(', ') + ' ...';
                 break;
             case ControlType.DATE:
                 this.value = this.metaform.get(this.control.configuration.key)?.value;
@@ -5379,7 +5396,7 @@ class ReadOnlyInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], 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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$8.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.MS_OPTION\">\n    <div\n      [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], 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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$8.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
                 CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$7.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
 }
@@ -5399,8 +5416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         OverlayPanelModule,
                         PanelModule,
                         ButtonModule,
-                        StripHtmlPipe
-                    ], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"] }]
+                        StripHtmlPipe,
+                    ], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n    <p-editor\n      [attr.data-cy]=\"'editor-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      [readonly]=\"true\"\n      [(ngModel)]=\"value\"\n    ></p-editor>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n    <div\n      class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n      [attr.data-cy]=\"'textarea-' + control?.id\"\n      [hidden]=\"control?.hidden\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n    <p-inputSwitch\n      [attr.data-cy]=\"'switch-' + control?.id\"\n      *ngIf=\"value?.isBoolean; else fallBack\"\n      styleClass=\"mt-2 ml-1 mr-1\"\n      [disabled]=\"true\"\n      [(ngModel)]=\"value.res\"\n    ></p-inputSwitch>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n    <div\n      [attr.data-cy]=\"'date-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | date }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n    <p-checkbox\n      [attr.data-cy]=\"'checkbox-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      styleClass=\"mt-3\"\n      [(ngModel)]=\"value\"\n      [binary]=\"true\"\n      inputId=\"binary\"\n      [disabled]=\"true\"\n    ></p-checkbox>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n    <div\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n      [attr.data-cy]=\"'link-' + control?.id\"\n    >\n      <ng-container *ngFor=\"let item of value\">\n        <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n    <div\n      *ngIf=\"value?.name; else fallBack\"\n      [attr.data-cy]=\"'number-' + control?.id\"\n    >\n      <div>\n        <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n          <div class=\"person-wrap\">\n            <div class=\"person-avatar\">\n              {{ value?.name?.toUpperCase().charAt(0) }}\n            </div>\n            <div>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.name }}\n              </p>\n              <p\n                class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n              >\n                {{ value?.function }}\n              </p>\n            </div>\n          </div></p-button\n        >\n        <p-overlayPanel #op>\n          <div>\n            <span class=\"block mb-2\">\n              <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n              {{ value.email ?? \"  --\" }}\n            </span>\n            <p>\n              <i class=\"pi pi-phone mr-1 text-500\"></i\n              >{{ value.phone ?? \"  --\" }}\n            </p>\n          </div></p-overlayPanel\n        >\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n    <div\n      [attr.data-cy]=\"'password-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      <p-password\n        class=\"ng-invalid ng-dirty\"\n        [disabled]=\"true\"\n        [(ngModel)]=\"value\"\n        [feedback]=\"false\"\n      ></p-password>\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.MS_OPTION\">\n    <div\n      [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value.value }}\n    </div>\n  </ng-container>\n\n  <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n  <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n    <div\n      [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | translate }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n    <div\n      [attr.data-cy]=\"'number-' + control?.id\"\n      *ngIf=\"value != null; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <div\n      [attr.data-cy]=\"'test-' + control?.id\"\n      *ngIf=\"value; else fallBack\"\n      class=\"font-semibold text-500 mt-3 mb-2\"\n    >\n      {{ value | stripHtml }}\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n  <div\n    [attr.data-cy]=\"'test-' + control?.id\"\n    class=\"font-semibold text-500 mt-3 mb-2\"\n  >\n    --\n  </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i2$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
                 type: Input
             }], metaform: [{
@@ -5432,7 +5449,6 @@ class MetaAssignAssetComponent {
         this.parentForm.controls[this.control.configuration.key].setValue(null);
     }
     assignAsset() {
-        console.log(this.control);
         const ref = this.dialogService.open(ObjectItemDialogComponent, {
             header: 'Assign Asset Group',
             width: '700px',
@@ -5461,7 +5477,7 @@ class MetaAssignAssetComponent {
                     //   header: 'Email',
                     //   columnType: tableColumnType.TEXT,
                     // },
-                ]
+                ],
             },
             contentStyle: { overflow: 'auto' },
             draggable: true,
@@ -5851,7 +5867,7 @@ class GroupsFormComponent extends MetaFormAbstract {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n    @for ( group of metaFormControls; track group.groupName; let idx = $index){\n    <div [style]=\"{ order: group.order }\" class=\"w-full\">\n      <p-accordion-panel\n        [value]=\"idx\"\n        [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n      >\n        <p-accordion-header>\n          <ng-template #toggleicon let-active=\"active\">\n            @if (active) {\n            <i class=\"pi pi-minus-circle\"></i>\n            } @else {\n            <i class=\"pi pi-plus-circle\"></i>\n\n            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-area\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-area>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select-object-based\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select-object-based>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n  <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n    @for ( group of metaFormControls; track group.groupName; let idx = $index){\n    <div [style]=\"{ order: group.order }\" class=\"w-full\">\n      <p-accordion-panel\n        [value]=\"idx\"\n        [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n      >\n        <p-accordion-header>\n          <ng-template #toggleicon let-active=\"active\">\n            @if (active) {\n            <i class=\"pi pi-minus-circle\"></i>\n            } @else {\n            <i class=\"pi pi-plus-circle\"></i>\n\n            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-area\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-area>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select-object-based\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select-object-based>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-multiple-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-multiple-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-editor\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-editor>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-checkbox\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-checkbox>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.LINKS_DATA\"\n                  [ngClass]=\"control | fieldCol\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- <phoenix-meta-object-links\n                  [formControlName]=\"control.configuration.key\"\n                  [control]=\"control\"\n                  [parentForm]=\"metaForm\"\n                ></phoenix-meta-object-links> -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.PASSWORD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-password-feild\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-password-feild>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </div>\n    }\n  </form>\n</p-accordion>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: 
                 // InputTextareaModule,
                 CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "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,
@@ -5895,7 +5911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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\n        [value]=\"idx\"\n        [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n      >\n        <p-accordion-header>\n          <ng-template #toggleicon let-active=\"active\">\n            @if (active) {\n            <i class=\"pi pi-minus-circle\"></i>\n            } @else {\n            <i class=\"pi pi-plus-circle\"></i>\n\n            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-area\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-area>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select-object-based\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select-object-based>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <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\n        [value]=\"idx\"\n        [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n      >\n        <p-accordion-header>\n          <ng-template #toggleicon let-active=\"active\">\n            @if (active) {\n            <i class=\"pi pi-minus-circle\"></i>\n            } @else {\n            <i class=\"pi pi-plus-circle\"></i>\n\n            }\n          </ng-template>\n          {{ group.groupName | translate }}\n        </p-accordion-header>\n        <p-accordion-content>\n          <div [style]=\"formStyle\" class=\"grid align-items-end\">\n            <ng-container *ngFor=\"let control of group.ctrl\">\n              <ng-container [ngSwitch]=\"control.configuration.type\">\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-text-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.NUMBER\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-number-input\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-number-input>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-timeperiod\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-timeperiod>\n                  </ng-template>\n                </div>\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CURRENCY\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-currency\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-currency>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_AREA\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-area\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-area>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-single-select-object-based\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-single-select-object-based>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.MS_OPTION\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-multiple-select\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-multiple-select>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-start-due-date\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-start-due-date>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.DATE\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-calendar\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-calendar>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-text-editor\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-text-editor>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.CHECKBOX\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <phoenix-meta-checkbox\n                    [disable]=\"disableForm\"\n                    [formControlName]=\"control.configuration.key\"\n                    [control]=\"control\"\n                    [parentForm]=\"metaForm\"\n                  ></phoenix-meta-checkbox>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.SWITCH\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-switch\n                      [disable]=\"true\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    ></phoenix-meta-switch>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                >\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-responsible\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-responsible>\n                  </ng-template>\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n                  [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n                  class=\"flex flex-column\"\n                  [attr.data-cy]=\"'assign-' + control?.id\"\n                >\n                  <!-- edit field & redonly field content -->\n                  <ng-container *ngIf=\"control.readOnly; else readOnly\">\n                    <phoenix-read-only-input\n                      *ngIf=\"!control?.hidden\"\n                      [control]=\"control\"\n                      [metaform]=\"metaForm\"\n                    ></phoenix-read-only-input>\n                  </ng-container>\n                  <ng-template #readOnly>\n                    <phoenix-meta-assign-asset\n                      [disable]=\"disableForm\"\n                      [formControlName]=\"control.configuration.key\"\n                      [control]=\"control\"\n                      [parentForm]=\"metaForm\"\n                    >\n                    </phoenix-meta-assign-asset>\n                  </ng-template>\n                  <!-- edit field & redonly field content end -->\n                </div>\n\n                <div\n                  [style]=\"{ order: control.order }\"\n                  *ngSwitchCase=\"ControlType.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
             }] } });