@fuentis/phoenix-ui 0.0.9-alpha.141 → 0.0.9-alpha.142

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1532,6 +1532,7 @@ class TableComponent {
         this.loadLazyData({ first: 0, rows: 100 });
     }
     columns = [];
+    selectedColumnsInput = [];
     tableConfiguration;
     actionClick = new EventEmitter();
     rowSelection = new EventEmitter();
@@ -1552,7 +1553,7 @@ class TableComponent {
     dateFormat;
     ngOnChanges(changes) {
         if (this.columns.length > 0) {
-            this.selectedColumns = [...this.columns];
+            this.selectedColumns = [...(this.selectedColumnsInput.length ? this.selectedColumnsInput : this.columns)];
         }
     }
     // Handles lazy loading logic, sorting and pagination based on the event.
@@ -1660,7 +1661,7 @@ class TableComponent {
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, 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      [selectedColumnsInput]=\"selectedColumns\"\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  </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          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 [field]=\"col.field\"></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              [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\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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\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                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\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 emptyCell\">\n                <div\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 *ngSwitchDefault>\n              <div\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-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> -- </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.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$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: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "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", "selectedColumnsInput"], 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"], 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: "directive", type: i3$1.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration" }, 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      [selectedColumnsInput]=\"selectedColumns\"\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  </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          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 [field]=\"col.field\"></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              [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\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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\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                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\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 emptyCell\">\n                <div\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 *ngSwitchDefault>\n              <div\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-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> -- </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.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$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: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "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", "selectedColumnsInput"], 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"], 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: "directive", type: i3$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1680,6 +1681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Input
             }], columns: [{
                 type: Input
+            }], selectedColumnsInput: [{
+                type: Input
             }], tableConfiguration: [{
                 type: Input
             }], actionClick: [{
@@ -2138,7 +2141,7 @@ class ObjectItemDialogComponent {
         selectionType: tableSelectionType.RADIO_BTN,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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.11", 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", "checkBoxSelection", "saveColumns"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
             type: Component,
@@ -5344,7 +5347,7 @@ class QuickPickSidePanelComponent {
     handlePanelFullScreen = new EventEmitter(); // Emits when toggling fullscreen mode
     onCloseEvent = new EventEmitter(); // Emits when the panel close event is triggered
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", loading: "loading", tableConfiguration: "tableConfiguration", panelState: "panelState", modal: "modal", widthClass: "widthClass", isFullScreen: "isFullScreen" }, outputs: { onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", onClose: "onClose", handlePanelFullScreen: "handlePanelFullScreen", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "\n<p-drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n>\n  <ng-template pTemplate=\"header\">\n    <!-- <phoenix-sidepanel-header\n      [expand]=\"false\"\n      [isFullScreen]=\"false\"\n      [panelTitle]=\"title | translate\"\n    ></phoenix-sidepanel-header> -->\n    <div class=\"flex align-items-center justify-content-between\" style=\"width: 100%\">\n      <p-button type=\"button\" (click)=\"handlePanelFullScreen.emit()\" [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\" rounded=\"true\" outlined=\"true\" styleClass=\"h-8 w-8\"></p-button>\n    \n      <span class=\"font-bold text-xl flex-grow-1\">\n        {{ title }}\n      </span>\n    \n      <button (click)=\"onCloseEvent.emit()\" pButton pRipple type=\"button\" icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"></button>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"content\">\n    <div>\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", loading: "loading", tableConfiguration: "tableConfiguration", panelState: "panelState", modal: "modal", widthClass: "widthClass", isFullScreen: "isFullScreen" }, outputs: { onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", onClose: "onClose", handlePanelFullScreen: "handlePanelFullScreen", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "\n<p-drawer\n  [styleClass]=\"widthClass\"\n  [modal]=\"modal\"\n  [(visible)]=\"panelState\"\n  position=\"right\"\n  [closable]=\"false\"\n>\n  <ng-template pTemplate=\"header\">\n    <!-- <phoenix-sidepanel-header\n      [expand]=\"false\"\n      [isFullScreen]=\"false\"\n      [panelTitle]=\"title | translate\"\n    ></phoenix-sidepanel-header> -->\n    <div class=\"flex align-items-center justify-content-between\" style=\"width: 100%\">\n      <p-button type=\"button\" (click)=\"handlePanelFullScreen.emit()\" [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\" rounded=\"true\" outlined=\"true\" styleClass=\"h-8 w-8\"></p-button>\n    \n      <span class=\"font-bold text-xl flex-grow-1\">\n        {{ title }}\n      </span>\n    \n      <button (click)=\"onCloseEvent.emit()\" pButton pRipple type=\"button\" icon=\"pi pi-times\"\n        class=\"p-button-rounded p-button-text mr-2\"></button>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"content\">\n    <div>\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n      ></phoenix-table>\n    </div>\n  </ng-template>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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.11", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
             type: Component,