@fuentis/phoenix-ui 0.0.9-alpha.97 → 0.0.9-alpha.98

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -54,7 +54,7 @@ import * as i11 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i12 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i1$3 from 'primeng/calendar';
+import * as i1$4 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 import * as i3$9 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
@@ -63,6 +63,8 @@ import { EditorModule } from 'primeng/editor';
 import { PanelModule } from 'primeng/panel';
 import { Subject, BehaviorSubject, combineLatestWith, debounceTime, switchMap, of, distinctUntilChanged, combineLatest } from 'rxjs';
 import * as i4$2 from '@angular/common/http';
+import * as i1$3 from 'primeng/dynamicdialog';
+import { DialogService } from 'primeng/dynamicdialog';
 import * as i3$5 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i3$6 from 'primeng/inputnumber';
@@ -77,7 +79,7 @@ import * as i5$1 from 'primeng/image';
 import { ImageModule } from 'primeng/image';
 import { TextareaModule } from 'primeng/textarea';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i1$4 from '@angular/platform-browser';
+import * as i1$5 from '@angular/platform-browser';
 import { MessagesModule } from 'primeng/messages';
 import * as i3$b from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
@@ -1516,6 +1518,7 @@ class TableComponent {
     isLoading = signal(false);
     lastLoadedIndex = 0; // Tracks the last loaded index to prevent redundant loading
     originalData = []; // Holds origin table data
+    selectionTypeEnum = tableSelectionType;
     hasLoadedInitialData = false; // Prevents multiple initial calls
     // Enum for column types
     columnTypeEnum = tableColumnType;
@@ -1594,12 +1597,13 @@ class TableComponent {
     }
     // **Apply Filters**
     applyFilters(filters) {
-        this.allData = this.originalData.filter(item => {
-            return Object.keys(filters).every(key => {
+        this.allData = this.originalData.filter((item) => {
+            return Object.keys(filters).every((key) => {
                 const filterValue = filters[key]?.key || filters[key];
                 const itemValue = item[key]?.key || item[key];
                 return filterValue
-                    ? itemValue?.toString().toLowerCase() === filterValue.toString().toLowerCase()
+                    ? itemValue?.toString().toLowerCase() ===
+                        filterValue.toString().toLowerCase()
                     : true;
             });
         });
@@ -1611,7 +1615,7 @@ class TableComponent {
     }
     // **Apply Column Selection**
     applyColumns(selectedColumns) {
-        this.selectedColumns.set(this.columns.filter(col => selectedColumns.includes(col.field)));
+        this.selectedColumns.set(this.columns.filter((col) => selectedColumns.includes(col.field)));
     }
     // **Handle Search Query**
     onSearch(query) {
@@ -1640,11 +1644,11 @@ class TableComponent {
     // **Filter table data on search**
     filterTableData() {
         const query = this.searchQuery();
-        const filteredData = this.allData.filter(item => Object.values(item).some(value => value?.toString().toLowerCase().includes(query)));
+        const filteredData = this.allData.filter((item) => Object.values(item).some((value) => value?.toString().toLowerCase().includes(query)));
         this.tableDataSignal.set(filteredData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n  } @else {\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    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action\n          [actionConfig]=\"action\"\n          [selectedData]=\"selectedItems\"\n          (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n        ></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n      <button\n        class=\"p-button p-button-text p-button-plain\"\n        (click)=\"selectedItems.set([])\"\n        aria-label=\"Clear Selection\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n        <th\n          pResizableColumn\n          class=\"custom-th font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\n        <!-- create empty th placeholders for actions -->\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        <td>\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\n            </ng-container>\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({ action, rowData })\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns; let even = even\">\n          <tr>\n            <td *ngFor=\"let col of columns; let even = even\">\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '60%',\n                  }\"\n              ></p-skeleton>\n            </td>\n\n            <td>\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '20%',\n                  }\"\n              ></p-skeleton>\n            </td>\n          </tr>\n        </td>\n      </tr>\n    </ng-template>\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  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ tableDataSignal().length }}\n  </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}: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.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: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n  } @else {\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    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action\n          [actionConfig]=\"action\"\n          [selectedData]=\"selectedItems\"\n          (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n        ></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n      <button\n        class=\"p-button p-button-text p-button-plain\"\n        (click)=\"selectedItems.set([])\"\n        aria-label=\"Clear Selection\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\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        <th\n          pResizableColumn\n          class=\"custom-th font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\n        <!-- create empty th placeholders for actions -->\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              [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 [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\n            </ng-container>\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({ action, rowData })\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns; let even = even\">\n          <tr>\n            <td *ngFor=\"let col of columns; let even = even\">\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '60%',\n                  }\"\n              ></p-skeleton>\n            </td>\n\n            <td>\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '20%',\n                  }\"\n              ></p-skeleton>\n            </td>\n          </tr>\n        </td>\n      </tr>\n    </ng-template>\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  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ tableDataSignal().length }}\n  </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}: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.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: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1658,8 +1662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         AvatarModule,
                         TooltipModule,
                         TableCellPipe,
-                        SkeletonModule
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n  } @else {\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    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action\n          [actionConfig]=\"action\"\n          [selectedData]=\"selectedItems\"\n          (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n        ></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n      <button\n        class=\"p-button p-button-text p-button-plain\"\n        (click)=\"selectedItems.set([])\"\n        aria-label=\"Clear Selection\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n        <th\n          pResizableColumn\n          class=\"custom-th font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\n        <!-- create empty th placeholders for actions -->\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        <td>\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\n            </ng-container>\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({ action, rowData })\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns; let even = even\">\n          <tr>\n            <td *ngFor=\"let col of columns; let even = even\">\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '60%',\n                  }\"\n              ></p-skeleton>\n            </td>\n\n            <td>\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '20%',\n                  }\"\n              ></p-skeleton>\n            </td>\n          </tr>\n        </td>\n      </tr>\n    </ng-template>\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  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ tableDataSignal().length }}\n  </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}: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"] }]
+                        SkeletonModule,
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length <= 0){\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  >\n  </table-caption>\n  } @else {\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    <span>{{ selectedItems().length }} items selected</span>\n    <div>\n      <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n        <phoenix-phoenix-data-table-action\n          [actionConfig]=\"action\"\n          [selectedData]=\"selectedItems\"\n          (actionClick)=\"actionClick.emit({ action, selectedItems })\"\n        ></phoenix-phoenix-data-table-action>\n      </ng-container>\n\n      <button\n        class=\"p-button p-button-text p-button-plain\"\n        (click)=\"selectedItems.set([])\"\n        aria-label=\"Clear Selection\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n\n  <p-table\n    [columns]=\"selectedColumns()\"\n    [value]=\"tableDataSignal()\"\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    [size]=\"'small'\"\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        <th\n          pResizableColumn\n          class=\"custom-th font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\n        <!-- create empty th placeholders for actions -->\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              [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 [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\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            <!-- TAG case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                'background-color': rowData[col.field + 'Color'] || '#ccc',\n                \n              }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                >\n                </p-tag>\n              </ng-container>\n            </ng-container>\n\n            <!-- PERSON case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                >\n                </p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <!-- LIST case -->\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  *ngFor=\"let item of rowData[col.field]\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.LIST | lowercase)\n                  \"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <!-- DEFAULT case -->\n            <ng-container *ngSwitchDefault>\n              <span\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></span>\n            </ng-container>\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({ action, rowData })\"\n            ></phoenix-phoenix-data-table-action\n          ></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns; let even = even\">\n          <tr>\n            <td *ngFor=\"let col of columns; let even = even\">\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '60%',\n                  }\"\n              ></p-skeleton>\n            </td>\n\n            <td>\n              <p-skeleton\n                [ngStyle]=\"{\n                    width: '20%',\n                  }\"\n              ></p-skeleton>\n            </td>\n          </tr>\n        </td>\n      </tr>\n    </ng-template>\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  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    Total records: {{ tableDataSignal().length }}\n  </div>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}: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"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -2051,6 +2055,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+class ActionsComponent {
+    actions;
+    actionClick = new EventEmitter();
+    onActionClick(actionId) {
+        this.actionClick.emit(actionId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ActionsComponent, isStandalone: true, selector: "pho-actions", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"flex gap-2\">\n  <ng-container *ngFor=\"let action of actions\">\n    <p-button\n      *ngIf=\"action.visible !== false\"\n      [label]=\"action.label\"\n      [icon]=\"action.icon || ''\"\n      [styleClass]=\"action.class || ''\"\n      [severity]=\"action.severity || 'primary'\"\n      [disabled]=\"action.disabled || false\"\n      [loading]=\"action.loading || false\"\n      [id]=\"action.id\"\n      (onClick)=\"onActionClick(action.actionId)\"\n    ></p-button>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pho-actions', imports: [CommonModule, ButtonModule], template: "<div class=\"flex gap-2\">\n  <ng-container *ngFor=\"let action of actions\">\n    <p-button\n      *ngIf=\"action.visible !== false\"\n      [label]=\"action.label\"\n      [icon]=\"action.icon || ''\"\n      [styleClass]=\"action.class || ''\"\n      [severity]=\"action.severity || 'primary'\"\n      [disabled]=\"action.disabled || false\"\n      [loading]=\"action.loading || false\"\n      [id]=\"action.id\"\n      (onClick)=\"onActionClick(action.actionId)\"\n    ></p-button>\n  </ng-container>\n</div>\n" }]
+        }], propDecorators: { actions: [{
+                type: Input,
+                args: ['actions']
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class ObjectItemDialogComponent {
+    ref;
+    config;
+    table;
+    employee;
+    selectedEmployee;
+    employees;
+    columns;
+    disableButton = true;
+    tableData = [];
+    constructor(ref, config) {
+        this.ref = ref;
+        this.config = config;
+        this.columns = [
+            {
+                field: 'name',
+                header: 'Name',
+                columnType: tableColumnType.TEXT,
+            },
+            {
+                field: 'function',
+                header: 'Function',
+                columnType: tableColumnType.TEXT,
+            },
+            {
+                field: 'phone',
+                header: 'Phone',
+                columnType: tableColumnType.TEXT,
+            },
+            {
+                field: 'email',
+                header: 'Email',
+                columnType: tableColumnType.TEXT,
+            },
+        ];
+    }
+    ngOnInit() {
+        this.tableData = this.config.data.tableData;
+    }
+    actions = [
+        {
+            actionId: 'save',
+            label: 'Assign',
+            icon: 'pi pi-check',
+            severity: 'primary',
+        },
+        {
+            actionId: 'cancel',
+            label: 'Cancel',
+            severity: 'secondary',
+        },
+    ];
+    actionClick(key) {
+        if (key === 'save') {
+            this.ref.close(this.table.selectedItems());
+        }
+        else {
+            this.ref.close();
+        }
+    }
+    tableConfiguration = {
+        lazy: false,
+        scrollHeight: '400px',
+        key: 'asd',
+        rows: 20,
+        selectionType: tableSelectionType.RADIO_BTN,
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<phoenix-table\n  #table\n  [data]=\"tableData\"\n  [columns]=\"columns\"\n  [tableConfiguration]=\"tableConfiguration\"\n>\n</phoenix-table>\n<div class=\"absolute bottom-0 right-0 p-4\">\n  <pho-actions\n    (actionClick)=\"actionClick($event)\"\n    [actions]=\"actions\"\n  ></pho-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "tableConfiguration"], outputs: ["actionClick", "rowSelection"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-object-item-dialog', standalone: true, imports: [
+                        TranslateModule,
+                        TableModule,
+                        TooltipModule,
+                        CommonModule,
+                        TableComponent,
+                        ActionsComponent,
+                    ], template: "<phoenix-table\n  #table\n  [data]=\"tableData\"\n  [columns]=\"columns\"\n  [tableConfiguration]=\"tableConfiguration\"\n>\n</phoenix-table>\n<div class=\"absolute bottom-0 right-0 p-4\">\n  <pho-actions\n    (actionClick)=\"actionClick($event)\"\n    [actions]=\"actions\"\n  ></pho-actions>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1$3.DynamicDialogConfig }], propDecorators: { table: [{
+                type: ViewChild,
+                args: ['table']
+            }] } });
+
 class MetaAssignResponsibleComponent {
     control;
     parentForm;
@@ -2070,27 +2178,31 @@ class MetaAssignResponsibleComponent {
     }
     // private phoenixDialog = inject(PhoenixDialogService);
     translateService = inject(TranslateService);
+    dialogService = inject(DialogService);
     person;
     clear() {
         this.parentForm.controls[this.control.configuration.key].setValue(null);
     }
     assignResponsible() {
-        // const ref = this.phoenixDialog.initDialog(
-        //   ObjectItemDialogComponent,
-        //   { appSource: this.control.configuration.app },
-        //   this.translateService.instant('COMMON.LIST_OF_RESPONSIBLE_PERSONS'),
-        //   'large',
-        //   '',
-        //   true
-        // );
-        // ref.onClose.subscribe((response: Assignee) => {
-        //   if (response) {
-        //     this.person = response;
-        //     this.parentForm.controls[this.control.configuration.key].setValue(
-        //       response
-        //     );
-        //   }
-        // });
+        console.log(this.control);
+        const ref = this.dialogService.open(ObjectItemDialogComponent, {
+            header: 'Assign Responsible',
+            width: '700px',
+            height: '400px',
+            modal: true,
+            data: {
+                tableData: this.control.configuration.items,
+            },
+            contentStyle: { overflow: 'auto' },
+            draggable: true,
+            closable: true,
+        });
+        ref.onClose.subscribe((response) => {
+            if (response) {
+                this.person = response;
+                this.parentForm.controls[this.control.configuration.key].setValue(response);
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MetaAssignResponsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: MetaAssignResponsibleComponent, isStandalone: true, selector: "phoenix-meta-assign-responsible", inputs: { control: "control", parentForm: "parentForm", disable: "disable" }, providers: [
@@ -2596,7 +2708,7 @@ class MetaCalendarComponent extends BaseMetaField {
       [appendTo]="'body'"
     ></p-calendar>
     <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
-  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$3.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
+  </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MetaCalendarComponent, decorators: [{
             type: Component,
@@ -3755,7 +3867,7 @@ class MetaStartDueDateComponent {
       </div>
       <phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$3.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1$4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
             type: Component,
@@ -4514,7 +4626,7 @@ class ReadOnlyInputComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$4.DomSanitizer }, { token: i3$2.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i3$2.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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  <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 *ngFor=\"let link of item?.objects\">\n          <phoenix-serach-card\n            [readOnly]=\"true\"\n            [data]=\"link\"\n            [deleteButton]=\"false\"\n            (selectEvent)=\"selectEvent($event)\"\n          />\n        </ng-container> -->\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\n      <!-- <div class=\"person-wrap\">\n        <div class=\"person-avatar\">\n          {{ value?.name?.toUpperCase().charAt(0) }}\n        </div>\n        <div class=\"font-semibold text-500\">\n          <p>\n            {{ value?.name }}\n          </p>\n          <p>\n            {{ value?.function }}\n          </p>\n        </div>\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 *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 }}\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\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n              <phoenix-serach-card\n                [data]=\"link\"\n                (removeButtonEvent)=\"\n                  onLinkRemove(link.name, item.relationLabelKey)\n                \"\n                [deleteButton]=\"true\"\n              />\n            </ng-container> -->\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$a.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 // SerachCardComponent,
                 CheckboxModule }, { kind: "component", type: i11.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$8.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$4.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: i4$3.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: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
@@ -4536,7 +4648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         PanelModule,
                         ButtonModule,
                     ], 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  <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 *ngFor=\"let link of item?.objects\">\n          <phoenix-serach-card\n            [readOnly]=\"true\"\n            [data]=\"link\"\n            [deleteButton]=\"false\"\n            (selectEvent)=\"selectEvent($event)\"\n          />\n        </ng-container> -->\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\n      <!-- <div class=\"person-wrap\">\n        <div class=\"person-avatar\">\n          {{ value?.name?.toUpperCase().charAt(0) }}\n        </div>\n        <div class=\"font-semibold text-500\">\n          <p>\n            {{ value?.name }}\n          </p>\n          <p>\n            {{ value?.function }}\n          </p>\n        </div>\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 *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 }}\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\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n              <phoenix-serach-card\n                [data]=\"link\"\n                (removeButtonEvent)=\"\n                  onLinkRemove(link.name, item.relationLabelKey)\n                \"\n                [deleteButton]=\"true\"\n              />\n            </ng-container> -->\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$4.DomSanitizer }, { type: i3$2.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
+        }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i3$2.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
                 type: Input
             }], metaform: [{
                 type: Input