@neoprototype/neop-ui-lib 1.2.2 → 1.2.3

package/fesm2022/neoprototype-neop-ui-lib.mjs

@@ -2187,23 +2187,48 @@ class NpTableComponent {
             return;
         }
         const sortFn = column.sortFn;
-        this._dataSource.sort((a, b) => {
-            if (sortFn) {
-                const result = sortFn(a, b);
-                return this.sortDirection === 'asc' ? result : -result;
-            }
-            const aValue = a[column.key];
-            const bValue = b[column.key];
-            const aNum = parseFloat(aValue);
-            const bNum = parseFloat(bValue);
-            const isNumber = !isNaN(aNum) && !isNaN(bNum);
-            if (isNumber) {
-                return this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+        const sortLogic = (arrayToSort) => {
+            return arrayToSort.sort((a, b) => {
+                if (sortFn) {
+                    const result = sortFn(a, b);
+                    return this.sortDirection === 'asc' ? result : -result;
+                }
+                const aValue = a[column.key];
+                const bValue = b[column.key];
+                const aNum = parseFloat(aValue);
+                const bNum = parseFloat(bValue);
+                const isNumber = !isNaN(aNum) && !isNaN(bNum);
+                if (isNumber) {
+                    return this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+                }
+                return this.sortDirection === 'asc'
+                    ? String(aValue || '').localeCompare(String(bValue || ''))
+                    : String(bValue || '').localeCompare(String(aValue || ''));
+            });
+        };
+        if (this.npCustomRowCondition) {
+            let finalData = [];
+            let currentGroupItems = [];
+            this.originalDataSource.forEach((row, index) => {
+                if (this.npCustomRowCondition(row, index)) {
+                    if (currentGroupItems.length > 0) {
+                        finalData = finalData.concat(sortLogic(currentGroupItems));
+                        currentGroupItems = [];
+                    }
+                    finalData.push(row);
+                }
+                else {
+                    currentGroupItems.push(row);
+                }
+            });
+            if (currentGroupItems.length > 0) {
+                finalData = finalData.concat(sortLogic(currentGroupItems));
             }
-            return this.sortDirection === 'asc'
-                ? String(aValue).localeCompare(String(bValue))
-                : String(bValue).localeCompare(String(aValue));
-        });
+            this._dataSource = finalData;
+        }
+        else {
+            this._dataSource = sortLogic([...this.originalDataSource]);
+        }
         this.currentPage = 1;
     }
     onChangeSelectColumn($event) {
@@ -2543,7 +2568,7 @@ class NpTableComponent {
         this.syncRowHeight();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", dataSource: "dataSource", pageSize: "pageSize", npSelectableType: "npSelectableType", npSortable: "npSortable", npFilterable: "npFilterable", npDeleteable: "npDeleteable", npShowPagination: "npShowPagination", npPaginationType: "npPaginationType", state: "state", npClassName: "npClassName", npLeftClass: "npLeftClass", npRightClass: "npRightClass", npFixedColumnRange: "npFixedColumnRange", npScrollWidth: "npScrollWidth", npScrollHeight: "npScrollHeight", npReverse: "npReverse", npBordered: "npBordered", npCustomRowTemplate: "npCustomRowTemplate", npCustomRowCondition: "npCustomRowCondition", npDraggable: "npDraggable" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked", npRowDrop: "npRowDrop" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== \"error\") {\n  @if (npFixedColumnRange == null) {\n    <div\n      class=\"np-table w-full relative overflow-y-auto\"\n      [ngClass]=\"npScrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n      [style.height]=\"npScrollHeight\"\n      style=\"overflow-x: hidden\"\n    >\n      <table class=\"w-full mx-auto {{ npClassName }}\">\n        <thead\n          class=\"sticky top-0 bg-white z-99\"\n          [ngClass]=\"{\n            'np-table-shadow':\n              npScrollHeight.length > 0 && npScrollHeight !== '0px',\n          }\"\n        >\n          <tr\n            *ngIf=\"selectedCount > 0 && npDeleteable\"\n            style=\"background-color: rgba(234, 236, 240, 1)\"\n          >\n            <td\n              [attr.colspan]=\"\n                columns.length +\n                (npSelectableType !== null ? 1 : 0) +\n                (npDraggable ? 1 : 0)\n              \"\n              class=\"px-4 py-2\"\n            >\n              <div class=\"flex justify-between items-center\">\n                <div class=\"text-sm font-medium text-gray-700\">\n                  {{ selectedCount }} selected\n                </div>\n                <np-button\n                  npType=\"secondary\"\n                  npSize=\"sm\"\n                  (click)=\"onDeleteSelected()\"\n                  >Delete</np-button\n                >\n              </div>\n            </td>\n          </tr>\n\n          <tr>\n            <th\n              *ngIf=\"\n                npDraggable && state !== 'loading' && _dataSource.length > 0\n              \"\n              class=\"border-gray-200\"\n            ></th>\n\n            <th\n              class=\"select-column\"\n              *ngIf=\"npSelectableType !== null && state !== 'loading'\"\n            >\n              <np-checkbox\n                *ngIf=\"npSelectableType === 'checkbox'\"\n                npType=\"checkbox\"\n                size=\"sm\"\n                [input]=\"selectAllFc\"\n                [isIndeterminate]=\"isIndeterminateAll\"\n              ></np-checkbox>\n            </th>\n\n            <ng-container *ngFor=\"let col of columns\">\n              <th\n                [class.border-r]=\"npBordered && state !== 'loading'\"\n                #middleHeader\n                class=\"border-gray-200 {{ col?.npClassName }}\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                ></ng-container>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody\n          cdkDropList\n          [cdkDropListData]=\"_dataSource\"\n          (cdkDropListDropped)=\"onRowDrop($event)\"\n        >\n          @if (state === \"loading\") {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px] w-full\"\n              >\n                <np-loading-indicator\n                  npSize=\"md\"\n                  npType=\"outlined\"\n                ></np-loading-indicator>\n              </td>\n            </tr>\n          } @else if (_dataSource.length > 0) {\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  (cdkDragStarted)=\"onDragStarted($event)\"\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      columns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of columns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n            <tr *ngIf=\"npShowPagination\">\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                style=\"padding: 12px 0px !important\"\n              >\n                <div class=\"w-full px-3\">\n                  <np-pagination\n                    [npType]=\"npPaginationType\"\n                    [totalItems]=\"filteredData.length\"\n                    [(pageIndex)]=\"currentPage\"\n                    [pageSize]=\"pageSize\"\n                    [pageSizeOptions]=\"currentPageSize\"\n                    [npReverse]=\"npReverse\"\n                    (pageSizeChange)=\"onPageSizeChange($event)\"\n                  ></np-pagination>\n                </div>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px]\"\n              >\n                <div\n                  class=\"flex flex-col gap-4 h-full items-center justify-center\"\n                >\n                  <i\n                    class=\"fa-regular fa-file-circle-xmark fa-2xl\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  ></i>\n                  <np-typography\n                    npType=\"text\"\n                    npSize=\"sm\"\n                    npWeight=\"medium\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  >\n                    No data\n                  </np-typography>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight === \"\") {\n    <div class=\"flex flex-col w-full\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div #tableContainer class=\"flex w-full\">\n        <table\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          class=\"np-table fixed-left z-10 {{ npLeftClass }}\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n        >\n          <thead class=\"contents\">\n            <tr>\n              <th\n                *ngIf=\"\n                  npDraggable && state !== 'loading' && _dataSource.length > 0\n                \"\n                class=\"border-gray-200\"\n              ></th>\n\n              <th\n                class=\"select-column\"\n                *ngIf=\"\n                  npSelectableType !== null &&\n                  state !== 'loading' &&\n                  _dataSource.length > 0\n                \"\n              >\n                <np-checkbox\n                  [npType]=\"npSelectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  (cdkDragStarted)=\"onDragStarted($event)\"\n                  #leftRow\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      fixedLeftColumns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of fixedLeftColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n          [style.max-width]=\"npScrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n        >\n          <table\n            class=\"np-table scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead>\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table\n          *ngIf=\"!isAtEnd\"\n          class=\"np-table rounded-r-xl fixed-right z-10 {{ npLeftClass }}\"\n        >\n          <thead>\n            <tr>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  (cdkDragStarted)=\"onDragStarted($event)\"\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"fixedRightColumns.length\"\n                    class=\"px-4 py-3 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  ></td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  @for (col of fixedRightColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight != \"\") {\n    <div class=\"flex flex-col\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div\n        #tableContainer\n        class=\"flex w-full relative\"\n        [style.max-height]=\"npScrollHeight\"\n      >\n        <div\n          #tableLeft\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n          class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n          style=\"border-right: none\"\n        >\n          <table class=\"rounded-l-xl fixed-left z-10 {{ npLeftClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                <th\n                  *ngIf=\"\n                    npDraggable && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200\"\n                ></th>\n\n                <th\n                  class=\"select-column\"\n                  *ngIf=\"\n                    npSelectableType !== null &&\n                    state !== 'loading' &&\n                    _dataSource.length > 0\n                  \"\n                >\n                  <np-checkbox\n                    [npType]=\"npSelectableType\"\n                    size=\"sm\"\n                    [input]=\"selectAllFc\"\n                    [isIndeterminate]=\"isIndeterminateAll\"\n                  ></np-checkbox>\n                </th>\n                <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    #leftRow\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"\n                        fixedLeftColumns.length +\n                        (npSelectableType !== null ? 1 : 0) +\n                        (npDraggable ? 1 : 0)\n                      \"\n                      class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          npCustomRowTemplate || null;\n                          context: { $implicit: row, index: i }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                    <td\n                      *ngIf=\"npDraggable\"\n                      class=\"text-center text-gray-400 border-gray-200\"\n                      cdkDragHandle\n                    >\n                      <i\n                        class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                      ></i>\n                    </td>\n\n                    <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                      <np-checkbox\n                        [npType]=\"npSelectableType\"\n                        size=\"sm\"\n                        [input]=\"row.selectFc\"\n                        (valueChange)=\"onChangeSelectColumn($event)\"\n                      ></np-checkbox>\n                    </td>\n                    @for (col of fixedLeftColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n          [style.max-width]=\"npScrollWidth\"\n          [style.max-height]=\"npScrollHeight\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n          [ngStyle]=\"{\n            'border-right': isAtEnd ? '' : 'none',\n          }\"\n        >\n          <table\n            class=\"scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead class=\"sticky-header\">\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          #tableRight\n          *ngIf=\"!isAtEnd\"\n          class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n        >\n          <table class=\"rounded-r-xl fixed-right z-10 {{ npRightClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                @for (col of fixedRightColumns; track col) {\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"fixedRightColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of fixedRightColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n} @else {\n  <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n    <div\n      class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\"\n    >\n      <img src=\"assets/images/error-table.png\" alt=\"error\" />\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\"\n      >\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"\n              color: rgba(71, 84, 103, 1);\n              max-width: 352px;\n              text-align: center;\n            \"\n          >\n            We had some trouble loading this page. <br />\n            Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div\n          *ngIf=\"(npSortable && !col.template) || (col.template && col.sortFn)\"\n          (click)=\"onSortColumn(col)\"\n          class=\"cursor-pointer\"\n        >\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'asc'\"\n            class=\"fa-duotone fa-solid fa-sort\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'desc'\"\n            class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey !== col.key || !sortDirection\"\n            class=\"fa-solid fa-sort\"\n            style=\"color: #d0d5d3\"\n          ></i>\n        </div>\n\n        <div\n          class=\"cursor-pointer relative\"\n          (click)=\"toggleFilter(col.key)\"\n          *ngIf=\"\n            (npFilterable && !col.template) || (col.template && col.filterFn)\n          \"\n        >\n          <ng-container\n            *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\"\n          >\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span\n                class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"\n              ></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i\n              class=\"fa-solid fa-filter\"\n              [ngStyle]=\"{\n                color: activeFilterKey === col.key ? '#000' : '#d0d5dd',\n              }\"\n            ></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              npType=\"string\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n              iconRight=\"fa-thin fa-xmark\"\n              (iconRightClick)=\"onClearSearch(col.key)\"\n            ></np-input-field>\n            <div\n              class=\"flex pt-2 cursor-pointer text-gray-500\"\n              (click)=\"onClearFilter(col.key)\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div>\n                <div\n                  *ngFor=\"let value of col.filterListAfterSearch\"\n                  class=\"w-full flex items-center\"\n                >\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    npType=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div\n                *ngIf=\"col.filterListAfterSearch.length === 0\"\n                class=\"text-center py-[50px]\"\n              >\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1)\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td [class.border-r]=\"npBordered\" class=\"border-gray-200\">\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container\n        *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        {{ row[col.key] }}\n      </div>\n    </ng-template>\n  </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}.cdk-drag-preview{background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:table}.cdk-drag-preview .cdk-drag-handle{padding:12px;display:flex;height:100%;align-items:center;width:min-content}.cdk-drag-placeholder{opacity:.2;background-color:#f3f4f6;border:2px dashed #d1d5db}.cdk-drag-animating,tbody.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["npType", "totalItems", "pageSize", "npReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "npClassName", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "npType"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", dataSource: "dataSource", pageSize: "pageSize", npSelectableType: "npSelectableType", npSortable: "npSortable", npFilterable: "npFilterable", npDeleteable: "npDeleteable", npShowPagination: "npShowPagination", npPaginationType: "npPaginationType", state: "state", npClassName: "npClassName", npLeftClass: "npLeftClass", npRightClass: "npRightClass", npFixedColumnRange: "npFixedColumnRange", npScrollWidth: "npScrollWidth", npScrollHeight: "npScrollHeight", npReverse: "npReverse", npBordered: "npBordered", npCustomRowTemplate: "npCustomRowTemplate", npCustomRowCondition: "npCustomRowCondition", npDraggable: "npDraggable" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked", npRowDrop: "npRowDrop" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== \"error\") {\n  @if (npFixedColumnRange == null) {\n    <div\n      class=\"np-table w-full relative overflow-y-auto\"\n      [ngClass]=\"npScrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n      [style.height]=\"npScrollHeight\"\n      style=\"overflow-x: hidden\"\n    >\n      <table class=\"w-full mx-auto {{ npClassName }}\">\n        <thead\n          class=\"sticky top-0 bg-white z-99\"\n          [ngClass]=\"{\n            'np-table-shadow':\n              npScrollHeight.length > 0 && npScrollHeight !== '0px',\n          }\"\n        >\n          <tr\n            *ngIf=\"selectedCount > 0 && npDeleteable\"\n            style=\"background-color: rgba(234, 236, 240, 1)\"\n          >\n            <td\n              [attr.colspan]=\"\n                columns.length +\n                (npSelectableType !== null ? 1 : 0) +\n                (npDraggable ? 1 : 0)\n              \"\n              class=\"px-4 py-2\"\n            >\n              <div class=\"flex justify-between items-center\">\n                <div class=\"text-sm font-medium text-gray-700\">\n                  {{ selectedCount }} selected\n                </div>\n                <np-button\n                  npType=\"secondary\"\n                  npSize=\"sm\"\n                  (click)=\"onDeleteSelected()\"\n                  >Delete</np-button\n                >\n              </div>\n            </td>\n          </tr>\n\n          <tr>\n            <th\n              *ngIf=\"\n                npDraggable && state !== 'loading' && _dataSource.length > 0\n              \"\n              class=\"border-gray-200\"\n            ></th>\n\n            <th\n              class=\"select-column\"\n              *ngIf=\"npSelectableType !== null && state !== 'loading'\"\n            >\n              <np-checkbox\n                *ngIf=\"npSelectableType === 'checkbox'\"\n                npType=\"checkbox\"\n                size=\"sm\"\n                [input]=\"selectAllFc\"\n                [isIndeterminate]=\"isIndeterminateAll\"\n              ></np-checkbox>\n            </th>\n\n            <ng-container *ngFor=\"let col of columns\">\n              <th\n                [class.border-r]=\"npBordered && state !== 'loading'\"\n                #middleHeader\n                class=\"border-gray-200 {{ col?.npClassName }}\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                ></ng-container>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody\n          cdkDropList\n          [cdkDropListData]=\"_dataSource\"\n          (cdkDropListDropped)=\"onRowDrop($event)\"\n        >\n          @if (state === \"loading\") {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px] w-full\"\n              >\n                <np-loading-indicator\n                  npSize=\"md\"\n                  npType=\"outlined\"\n                ></np-loading-indicator>\n              </td>\n            </tr>\n          } @else if (_dataSource.length > 0) {\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  class=\"np-custom-row\"\n                  [cdkDragDisabled]=\"true\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      columns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of columns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n            <tr *ngIf=\"npShowPagination\">\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                style=\"padding: 12px 0px !important\"\n              >\n                <div class=\"w-full px-3\">\n                  <np-pagination\n                    [npType]=\"npPaginationType\"\n                    [totalItems]=\"filteredData.length\"\n                    [(pageIndex)]=\"currentPage\"\n                    [pageSize]=\"pageSize\"\n                    [pageSizeOptions]=\"currentPageSize\"\n                    [npReverse]=\"npReverse\"\n                    (pageSizeChange)=\"onPageSizeChange($event)\"\n                  ></np-pagination>\n                </div>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px]\"\n              >\n                <div\n                  class=\"flex flex-col gap-4 h-full items-center justify-center\"\n                >\n                  <i\n                    class=\"fa-regular fa-file-circle-xmark fa-2xl\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  ></i>\n                  <np-typography\n                    npType=\"text\"\n                    npSize=\"sm\"\n                    npWeight=\"medium\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  >\n                    No data\n                  </np-typography>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight === \"\") {\n    <div class=\"flex flex-col w-full\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div #tableContainer class=\"flex w-full\">\n        <table\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          class=\"np-table fixed-left z-10 {{ npLeftClass }}\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n        >\n          <thead class=\"contents\">\n            <tr>\n              <th\n                *ngIf=\"\n                  npDraggable && state !== 'loading' && _dataSource.length > 0\n                \"\n                class=\"border-gray-200\"\n              ></th>\n\n              <th\n                class=\"select-column\"\n                *ngIf=\"\n                  npSelectableType !== null &&\n                  state !== 'loading' &&\n                  _dataSource.length > 0\n                \"\n              >\n                <np-checkbox\n                  [npType]=\"npSelectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  [cdkDragDisabled]=\"true\"\n                  #leftRow\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      fixedLeftColumns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of fixedLeftColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n          [style.max-width]=\"npScrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n        >\n          <table\n            class=\"np-table scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead>\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table\n          *ngIf=\"!isAtEnd\"\n          class=\"np-table rounded-r-xl fixed-right z-10 {{ npLeftClass }}\"\n        >\n          <thead>\n            <tr>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  [cdkDragDisabled]=\"true\"\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"fixedRightColumns.length\"\n                    class=\"px-4 py-3 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  ></td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  @for (col of fixedRightColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight != \"\") {\n    <div class=\"flex flex-col\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div\n        #tableContainer\n        class=\"flex w-full relative\"\n        [style.max-height]=\"npScrollHeight\"\n      >\n        <div\n          #tableLeft\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n          class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n          style=\"border-right: none\"\n        >\n          <table class=\"rounded-l-xl fixed-left z-10 {{ npLeftClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                <th\n                  *ngIf=\"\n                    npDraggable && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200\"\n                ></th>\n\n                <th\n                  class=\"select-column\"\n                  *ngIf=\"\n                    npSelectableType !== null &&\n                    state !== 'loading' &&\n                    _dataSource.length > 0\n                  \"\n                >\n                  <np-checkbox\n                    [npType]=\"npSelectableType\"\n                    size=\"sm\"\n                    [input]=\"selectAllFc\"\n                    [isIndeterminate]=\"isIndeterminateAll\"\n                  ></np-checkbox>\n                </th>\n                <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    #leftRow\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"\n                        fixedLeftColumns.length +\n                        (npSelectableType !== null ? 1 : 0) +\n                        (npDraggable ? 1 : 0)\n                      \"\n                      class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          npCustomRowTemplate || null;\n                          context: { $implicit: row, index: i }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                    <td\n                      *ngIf=\"npDraggable\"\n                      class=\"text-center text-gray-400 border-gray-200\"\n                      cdkDragHandle\n                    >\n                      <i\n                        class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                      ></i>\n                    </td>\n\n                    <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                      <np-checkbox\n                        [npType]=\"npSelectableType\"\n                        size=\"sm\"\n                        [input]=\"row.selectFc\"\n                        (valueChange)=\"onChangeSelectColumn($event)\"\n                      ></np-checkbox>\n                    </td>\n                    @for (col of fixedLeftColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n          [style.max-width]=\"npScrollWidth\"\n          [style.max-height]=\"npScrollHeight\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n          [ngStyle]=\"{\n            'border-right': isAtEnd ? '' : 'none',\n          }\"\n        >\n          <table\n            class=\"scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead class=\"sticky-header\">\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          #tableRight\n          *ngIf=\"!isAtEnd\"\n          class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n        >\n          <table class=\"rounded-r-xl fixed-right z-10 {{ npRightClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                @for (col of fixedRightColumns; track col) {\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"fixedRightColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of fixedRightColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n} @else {\n  <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n    <div\n      class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\"\n    >\n      <img src=\"assets/images/error-table.png\" alt=\"error\" />\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\"\n      >\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"\n              color: rgba(71, 84, 103, 1);\n              max-width: 352px;\n              text-align: center;\n            \"\n          >\n            We had some trouble loading this page. <br />\n            Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div\n          *ngIf=\"(npSortable && !col.template) || (col.template && col.sortFn)\"\n          (click)=\"onSortColumn(col)\"\n          class=\"cursor-pointer\"\n        >\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'asc'\"\n            class=\"fa-duotone fa-solid fa-sort\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'desc'\"\n            class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey !== col.key || !sortDirection\"\n            class=\"fa-solid fa-sort\"\n            style=\"color: #d0d5d3\"\n          ></i>\n        </div>\n\n        <div\n          class=\"cursor-pointer relative\"\n          (click)=\"toggleFilter(col.key)\"\n          *ngIf=\"\n            (npFilterable && !col.template) || (col.template && col.filterFn)\n          \"\n        >\n          <ng-container\n            *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\"\n          >\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span\n                class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"\n              ></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i\n              class=\"fa-solid fa-filter\"\n              [ngStyle]=\"{\n                color: activeFilterKey === col.key ? '#000' : '#d0d5dd',\n              }\"\n            ></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              npType=\"string\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n              iconRight=\"fa-thin fa-xmark\"\n              (iconRightClick)=\"onClearSearch(col.key)\"\n            ></np-input-field>\n            <div\n              class=\"flex pt-2 cursor-pointer text-gray-500\"\n              (click)=\"onClearFilter(col.key)\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div>\n                <div\n                  *ngFor=\"let value of col.filterListAfterSearch\"\n                  class=\"w-full flex items-center\"\n                >\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    npType=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div\n                *ngIf=\"col.filterListAfterSearch.length === 0\"\n                class=\"text-center py-[50px]\"\n              >\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1)\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td [class.border-r]=\"npBordered\" class=\"border-gray-200\">\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container\n        *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        {{ row[col.key] }}\n      </div>\n    </ng-template>\n  </td>\n</ng-template>", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}.cdk-drag-preview{background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:table}.cdk-drag-preview .cdk-drag-handle{padding:12px;display:flex;height:100%;align-items:center;width:min-content}.cdk-drag-placeholder{opacity:.2;background-color:#f3f4f6;border:2px dashed #d1d5db}.cdk-drag-animating,tbody.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["npType", "totalItems", "pageSize", "npReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "npClassName", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "npType"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTableComponent, decorators: [{
             type: Component,
@@ -2558,7 +2583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         NpInputFieldComponent,
                         FormsModule,
                         DragDropModule
-                    ], template: "@if (state !== \"error\") {\n  @if (npFixedColumnRange == null) {\n    <div\n      class=\"np-table w-full relative overflow-y-auto\"\n      [ngClass]=\"npScrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n      [style.height]=\"npScrollHeight\"\n      style=\"overflow-x: hidden\"\n    >\n      <table class=\"w-full mx-auto {{ npClassName }}\">\n        <thead\n          class=\"sticky top-0 bg-white z-99\"\n          [ngClass]=\"{\n            'np-table-shadow':\n              npScrollHeight.length > 0 && npScrollHeight !== '0px',\n          }\"\n        >\n          <tr\n            *ngIf=\"selectedCount > 0 && npDeleteable\"\n            style=\"background-color: rgba(234, 236, 240, 1)\"\n          >\n            <td\n              [attr.colspan]=\"\n                columns.length +\n                (npSelectableType !== null ? 1 : 0) +\n                (npDraggable ? 1 : 0)\n              \"\n              class=\"px-4 py-2\"\n            >\n              <div class=\"flex justify-between items-center\">\n                <div class=\"text-sm font-medium text-gray-700\">\n                  {{ selectedCount }} selected\n                </div>\n                <np-button\n                  npType=\"secondary\"\n                  npSize=\"sm\"\n                  (click)=\"onDeleteSelected()\"\n                  >Delete</np-button\n                >\n              </div>\n            </td>\n          </tr>\n\n          <tr>\n            <th\n              *ngIf=\"\n                npDraggable && state !== 'loading' && _dataSource.length > 0\n              \"\n              class=\"border-gray-200\"\n            ></th>\n\n            <th\n              class=\"select-column\"\n              *ngIf=\"npSelectableType !== null && state !== 'loading'\"\n            >\n              <np-checkbox\n                *ngIf=\"npSelectableType === 'checkbox'\"\n                npType=\"checkbox\"\n                size=\"sm\"\n                [input]=\"selectAllFc\"\n                [isIndeterminate]=\"isIndeterminateAll\"\n              ></np-checkbox>\n            </th>\n\n            <ng-container *ngFor=\"let col of columns\">\n              <th\n                [class.border-r]=\"npBordered && state !== 'loading'\"\n                #middleHeader\n                class=\"border-gray-200 {{ col?.npClassName }}\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                ></ng-container>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody\n          cdkDropList\n          [cdkDropListData]=\"_dataSource\"\n          (cdkDropListDropped)=\"onRowDrop($event)\"\n        >\n          @if (state === \"loading\") {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px] w-full\"\n              >\n                <np-loading-indicator\n                  npSize=\"md\"\n                  npType=\"outlined\"\n                ></np-loading-indicator>\n              </td>\n            </tr>\n          } @else if (_dataSource.length > 0) {\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  (cdkDragStarted)=\"onDragStarted($event)\"\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      columns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of columns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n            <tr *ngIf=\"npShowPagination\">\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                style=\"padding: 12px 0px !important\"\n              >\n                <div class=\"w-full px-3\">\n                  <np-pagination\n                    [npType]=\"npPaginationType\"\n                    [totalItems]=\"filteredData.length\"\n                    [(pageIndex)]=\"currentPage\"\n                    [pageSize]=\"pageSize\"\n                    [pageSizeOptions]=\"currentPageSize\"\n                    [npReverse]=\"npReverse\"\n                    (pageSizeChange)=\"onPageSizeChange($event)\"\n                  ></np-pagination>\n                </div>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px]\"\n              >\n                <div\n                  class=\"flex flex-col gap-4 h-full items-center justify-center\"\n                >\n                  <i\n                    class=\"fa-regular fa-file-circle-xmark fa-2xl\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  ></i>\n                  <np-typography\n                    npType=\"text\"\n                    npSize=\"sm\"\n                    npWeight=\"medium\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  >\n                    No data\n                  </np-typography>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight === \"\") {\n    <div class=\"flex flex-col w-full\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div #tableContainer class=\"flex w-full\">\n        <table\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          class=\"np-table fixed-left z-10 {{ npLeftClass }}\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n        >\n          <thead class=\"contents\">\n            <tr>\n              <th\n                *ngIf=\"\n                  npDraggable && state !== 'loading' && _dataSource.length > 0\n                \"\n                class=\"border-gray-200\"\n              ></th>\n\n              <th\n                class=\"select-column\"\n                *ngIf=\"\n                  npSelectableType !== null &&\n                  state !== 'loading' &&\n                  _dataSource.length > 0\n                \"\n              >\n                <np-checkbox\n                  [npType]=\"npSelectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  (cdkDragStarted)=\"onDragStarted($event)\"\n                  #leftRow\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      fixedLeftColumns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of fixedLeftColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n          [style.max-width]=\"npScrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n        >\n          <table\n            class=\"np-table scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead>\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table\n          *ngIf=\"!isAtEnd\"\n          class=\"np-table rounded-r-xl fixed-right z-10 {{ npLeftClass }}\"\n        >\n          <thead>\n            <tr>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  (cdkDragStarted)=\"onDragStarted($event)\"\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"fixedRightColumns.length\"\n                    class=\"px-4 py-3 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  ></td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  @for (col of fixedRightColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight != \"\") {\n    <div class=\"flex flex-col\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div\n        #tableContainer\n        class=\"flex w-full relative\"\n        [style.max-height]=\"npScrollHeight\"\n      >\n        <div\n          #tableLeft\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n          class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n          style=\"border-right: none\"\n        >\n          <table class=\"rounded-l-xl fixed-left z-10 {{ npLeftClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                <th\n                  *ngIf=\"\n                    npDraggable && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200\"\n                ></th>\n\n                <th\n                  class=\"select-column\"\n                  *ngIf=\"\n                    npSelectableType !== null &&\n                    state !== 'loading' &&\n                    _dataSource.length > 0\n                  \"\n                >\n                  <np-checkbox\n                    [npType]=\"npSelectableType\"\n                    size=\"sm\"\n                    [input]=\"selectAllFc\"\n                    [isIndeterminate]=\"isIndeterminateAll\"\n                  ></np-checkbox>\n                </th>\n                <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    #leftRow\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"\n                        fixedLeftColumns.length +\n                        (npSelectableType !== null ? 1 : 0) +\n                        (npDraggable ? 1 : 0)\n                      \"\n                      class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          npCustomRowTemplate || null;\n                          context: { $implicit: row, index: i }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                    <td\n                      *ngIf=\"npDraggable\"\n                      class=\"text-center text-gray-400 border-gray-200\"\n                      cdkDragHandle\n                    >\n                      <i\n                        class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                      ></i>\n                    </td>\n\n                    <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                      <np-checkbox\n                        [npType]=\"npSelectableType\"\n                        size=\"sm\"\n                        [input]=\"row.selectFc\"\n                        (valueChange)=\"onChangeSelectColumn($event)\"\n                      ></np-checkbox>\n                    </td>\n                    @for (col of fixedLeftColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n          [style.max-width]=\"npScrollWidth\"\n          [style.max-height]=\"npScrollHeight\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n          [ngStyle]=\"{\n            'border-right': isAtEnd ? '' : 'none',\n          }\"\n        >\n          <table\n            class=\"scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead class=\"sticky-header\">\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          #tableRight\n          *ngIf=\"!isAtEnd\"\n          class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n        >\n          <table class=\"rounded-r-xl fixed-right z-10 {{ npRightClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                @for (col of fixedRightColumns; track col) {\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    (cdkDragStarted)=\"onDragStarted($event)\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"fixedRightColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of fixedRightColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n} @else {\n  <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n    <div\n      class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\"\n    >\n      <img src=\"assets/images/error-table.png\" alt=\"error\" />\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\"\n      >\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"\n              color: rgba(71, 84, 103, 1);\n              max-width: 352px;\n              text-align: center;\n            \"\n          >\n            We had some trouble loading this page. <br />\n            Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div\n          *ngIf=\"(npSortable && !col.template) || (col.template && col.sortFn)\"\n          (click)=\"onSortColumn(col)\"\n          class=\"cursor-pointer\"\n        >\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'asc'\"\n            class=\"fa-duotone fa-solid fa-sort\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'desc'\"\n            class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey !== col.key || !sortDirection\"\n            class=\"fa-solid fa-sort\"\n            style=\"color: #d0d5d3\"\n          ></i>\n        </div>\n\n        <div\n          class=\"cursor-pointer relative\"\n          (click)=\"toggleFilter(col.key)\"\n          *ngIf=\"\n            (npFilterable && !col.template) || (col.template && col.filterFn)\n          \"\n        >\n          <ng-container\n            *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\"\n          >\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span\n                class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"\n              ></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i\n              class=\"fa-solid fa-filter\"\n              [ngStyle]=\"{\n                color: activeFilterKey === col.key ? '#000' : '#d0d5dd',\n              }\"\n            ></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              npType=\"string\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n              iconRight=\"fa-thin fa-xmark\"\n              (iconRightClick)=\"onClearSearch(col.key)\"\n            ></np-input-field>\n            <div\n              class=\"flex pt-2 cursor-pointer text-gray-500\"\n              (click)=\"onClearFilter(col.key)\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div>\n                <div\n                  *ngFor=\"let value of col.filterListAfterSearch\"\n                  class=\"w-full flex items-center\"\n                >\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    npType=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div\n                *ngIf=\"col.filterListAfterSearch.length === 0\"\n                class=\"text-center py-[50px]\"\n              >\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1)\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td [class.border-r]=\"npBordered\" class=\"border-gray-200\">\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container\n        *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        {{ row[col.key] }}\n      </div>\n    </ng-template>\n  </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}.cdk-drag-preview{background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:table}.cdk-drag-preview .cdk-drag-handle{padding:12px;display:flex;height:100%;align-items:center;width:min-content}.cdk-drag-placeholder{opacity:.2;background-color:#f3f4f6;border:2px dashed #d1d5db}.cdk-drag-animating,tbody.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], template: "@if (state !== \"error\") {\n  @if (npFixedColumnRange == null) {\n    <div\n      class=\"np-table w-full relative overflow-y-auto\"\n      [ngClass]=\"npScrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n      [style.height]=\"npScrollHeight\"\n      style=\"overflow-x: hidden\"\n    >\n      <table class=\"w-full mx-auto {{ npClassName }}\">\n        <thead\n          class=\"sticky top-0 bg-white z-99\"\n          [ngClass]=\"{\n            'np-table-shadow':\n              npScrollHeight.length > 0 && npScrollHeight !== '0px',\n          }\"\n        >\n          <tr\n            *ngIf=\"selectedCount > 0 && npDeleteable\"\n            style=\"background-color: rgba(234, 236, 240, 1)\"\n          >\n            <td\n              [attr.colspan]=\"\n                columns.length +\n                (npSelectableType !== null ? 1 : 0) +\n                (npDraggable ? 1 : 0)\n              \"\n              class=\"px-4 py-2\"\n            >\n              <div class=\"flex justify-between items-center\">\n                <div class=\"text-sm font-medium text-gray-700\">\n                  {{ selectedCount }} selected\n                </div>\n                <np-button\n                  npType=\"secondary\"\n                  npSize=\"sm\"\n                  (click)=\"onDeleteSelected()\"\n                  >Delete</np-button\n                >\n              </div>\n            </td>\n          </tr>\n\n          <tr>\n            <th\n              *ngIf=\"\n                npDraggable && state !== 'loading' && _dataSource.length > 0\n              \"\n              class=\"border-gray-200\"\n            ></th>\n\n            <th\n              class=\"select-column\"\n              *ngIf=\"npSelectableType !== null && state !== 'loading'\"\n            >\n              <np-checkbox\n                *ngIf=\"npSelectableType === 'checkbox'\"\n                npType=\"checkbox\"\n                size=\"sm\"\n                [input]=\"selectAllFc\"\n                [isIndeterminate]=\"isIndeterminateAll\"\n              ></np-checkbox>\n            </th>\n\n            <ng-container *ngFor=\"let col of columns\">\n              <th\n                [class.border-r]=\"npBordered && state !== 'loading'\"\n                #middleHeader\n                class=\"border-gray-200 {{ col?.npClassName }}\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                ></ng-container>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody\n          cdkDropList\n          [cdkDropListData]=\"_dataSource\"\n          (cdkDropListDropped)=\"onRowDrop($event)\"\n        >\n          @if (state === \"loading\") {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px] w-full\"\n              >\n                <np-loading-indicator\n                  npSize=\"md\"\n                  npType=\"outlined\"\n                ></np-loading-indicator>\n              </td>\n            </tr>\n          } @else if (_dataSource.length > 0) {\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  class=\"np-custom-row\"\n                  [cdkDragDisabled]=\"true\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      columns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of columns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n            <tr *ngIf=\"npShowPagination\">\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                style=\"padding: 12px 0px !important\"\n              >\n                <div class=\"w-full px-3\">\n                  <np-pagination\n                    [npType]=\"npPaginationType\"\n                    [totalItems]=\"filteredData.length\"\n                    [(pageIndex)]=\"currentPage\"\n                    [pageSize]=\"pageSize\"\n                    [pageSizeOptions]=\"currentPageSize\"\n                    [npReverse]=\"npReverse\"\n                    (pageSizeChange)=\"onPageSizeChange($event)\"\n                  ></np-pagination>\n                </div>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td\n                [attr.colspan]=\"\n                  columns.length +\n                  (npSelectableType !== null ? 1 : 0) +\n                  (npDraggable ? 1 : 0)\n                \"\n                class=\"h-[400px]\"\n              >\n                <div\n                  class=\"flex flex-col gap-4 h-full items-center justify-center\"\n                >\n                  <i\n                    class=\"fa-regular fa-file-circle-xmark fa-2xl\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  ></i>\n                  <np-typography\n                    npType=\"text\"\n                    npSize=\"sm\"\n                    npWeight=\"medium\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  >\n                    No data\n                  </np-typography>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight === \"\") {\n    <div class=\"flex flex-col w-full\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div #tableContainer class=\"flex w-full\">\n        <table\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          class=\"np-table fixed-left z-10 {{ npLeftClass }}\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n        >\n          <thead class=\"contents\">\n            <tr>\n              <th\n                *ngIf=\"\n                  npDraggable && state !== 'loading' && _dataSource.length > 0\n                \"\n                class=\"border-gray-200\"\n              ></th>\n\n              <th\n                class=\"select-column\"\n                *ngIf=\"\n                  npSelectableType !== null &&\n                  state !== 'loading' &&\n                  _dataSource.length > 0\n                \"\n              >\n                <np-checkbox\n                  [npType]=\"npSelectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  [cdkDragDisabled]=\"true\"\n                  #leftRow\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"\n                      fixedLeftColumns.length +\n                      (npSelectableType !== null ? 1 : 0) +\n                      (npDraggable ? 1 : 0)\n                    \"\n                    class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        npCustomRowTemplate || null;\n                        context: { $implicit: row, index: i }\n                      \"\n                    ></ng-container>\n                  </td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                  <td\n                    *ngIf=\"npDraggable\"\n                    class=\"text-center text-gray-400 border-gray-200\"\n                    cdkDragHandle\n                  >\n                    <i\n                      class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                    ></i>\n                  </td>\n\n                  <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                    <np-checkbox\n                      [npType]=\"npSelectableType\"\n                      size=\"sm\"\n                      [input]=\"row.selectFc\"\n                      (valueChange)=\"onChangeSelectColumn($event)\"\n                    ></np-checkbox>\n                  </td>\n\n                  @for (col of fixedLeftColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n          [style.max-width]=\"npScrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n        >\n          <table\n            class=\"np-table scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead>\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table\n          *ngIf=\"!isAtEnd\"\n          class=\"np-table rounded-r-xl fixed-right z-10 {{ npLeftClass }}\"\n        >\n          <thead>\n            <tr>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"\n                    npBordered && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200 {{ col?.npClassName }}\"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                  ></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody\n            cdkDropList\n            [cdkDropListData]=\"_dataSource\"\n            (cdkDropListDropped)=\"onRowDrop($event)\"\n          >\n            @for (row of pagedData; track row; let i = $index) {\n              @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                <tr\n                  cdkDrag\n                  [cdkDragDisabled]=\"true\"\n                  class=\"np-custom-row\"\n                  style=\"background-color: #f9fafb\"\n                >\n                  <td\n                    [attr.colspan]=\"fixedRightColumns.length\"\n                    class=\"px-4 py-3 border-gray-200\"\n                    [class.border-r]=\"npBordered\"\n                  ></td>\n                </tr>\n              } @else {\n                <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                  @for (col of fixedRightColumns; track col) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        renderCell;\n                        context: { row: row, col: col }\n                      \"\n                    ></ng-container>\n                  }\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n  @if (npFixedColumnRange != null && npScrollHeight != \"\") {\n    <div class=\"flex flex-col\">\n      <div\n        *ngIf=\"selectedCount > 0 && npDeleteable\"\n        class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n        style=\"background-color: rgba(234, 236, 240, 1)\"\n      >\n        <div class=\"text-sm font-medium text-gray-700\">\n          {{ selectedCount }} selected\n        </div>\n        <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n          >Delete</np-button\n        >\n      </div>\n      <div\n        #tableContainer\n        class=\"flex w-full relative\"\n        [style.max-height]=\"npScrollHeight\"\n      >\n        <div\n          #tableLeft\n          *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n          [ngClass]=\"{\n            'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n          }\"\n          class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n          style=\"border-right: none\"\n        >\n          <table class=\"rounded-l-xl fixed-left z-10 {{ npLeftClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                <th\n                  *ngIf=\"\n                    npDraggable && state !== 'loading' && _dataSource.length > 0\n                  \"\n                  class=\"border-gray-200\"\n                ></th>\n\n                <th\n                  class=\"select-column\"\n                  *ngIf=\"\n                    npSelectableType !== null &&\n                    state !== 'loading' &&\n                    _dataSource.length > 0\n                  \"\n                >\n                  <np-checkbox\n                    [npType]=\"npSelectableType\"\n                    size=\"sm\"\n                    [input]=\"selectAllFc\"\n                    [isIndeterminate]=\"isIndeterminateAll\"\n                  ></np-checkbox>\n                </th>\n                <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    #leftRow\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"\n                        fixedLeftColumns.length +\n                        (npSelectableType !== null ? 1 : 0) +\n                        (npDraggable ? 1 : 0)\n                      \"\n                      class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          npCustomRowTemplate || null;\n                          context: { $implicit: row, index: i }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n                    <td\n                      *ngIf=\"npDraggable\"\n                      class=\"text-center text-gray-400 border-gray-200\"\n                      cdkDragHandle\n                    >\n                      <i\n                        class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n                      ></i>\n                    </td>\n\n                    <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n                      <np-checkbox\n                        [npType]=\"npSelectableType\"\n                        size=\"sm\"\n                        [input]=\"row.selectFc\"\n                        (valueChange)=\"onChangeSelectColumn($event)\"\n                      ></np-checkbox>\n                    </td>\n                    @for (col of fixedLeftColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n          [style.max-width]=\"npScrollWidth\"\n          [style.max-height]=\"npScrollHeight\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable':\n              isAtStart && !npDraggable && npSelectableType === null,\n            'rounded-r-xl border-r-midtable': isAtEnd,\n          }\"\n          [ngStyle]=\"{\n            'border-right': isAtEnd ? '' : 'none',\n          }\"\n        >\n          <table\n            class=\"scrollable min-w-fit w-full\"\n            style=\"border-left: none; border-right: none\"\n          >\n            <thead class=\"sticky-header\">\n              <tr>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200 {{ col?.npClassName }}\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"scrollableColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of scrollableColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <div\n          #tableRight\n          *ngIf=\"!isAtEnd\"\n          class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\"\n          [style.max-height]=\"npScrollHeight\"\n        >\n          <table class=\"rounded-r-xl fixed-right z-10 {{ npRightClass }}\">\n            <thead class=\"sticky-header\">\n              <tr>\n                @for (col of fixedRightColumns; track col) {\n                  <th\n                    [class.border-r]=\"\n                      npBordered &&\n                      state !== 'loading' &&\n                      _dataSource.length > 0\n                    \"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n                    ></ng-container>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody\n              cdkDropList\n              [cdkDropListData]=\"_dataSource\"\n              (cdkDropListDropped)=\"onRowDrop($event)\"\n            >\n              @for (row of pagedData; track row; let i = $index) {\n                @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n                  <tr\n                    cdkDrag\n                    [cdkDragDisabled]=\"true\"\n                    class=\"np-custom-row\"\n                    style=\"background-color: #f9fafb\"\n                  >\n                    <td\n                      [attr.colspan]=\"fixedRightColumns.length\"\n                      class=\"px-4 py-3 border-gray-200\"\n                      [class.border-r]=\"npBordered\"\n                    ></td>\n                  </tr>\n                } @else {\n                  <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n                    @for (col of fixedRightColumns; track col) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          renderCell;\n                          context: { row: row, col: col }\n                        \"\n                      ></ng-container>\n                    }\n                  </tr>\n                }\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      <div\n        class=\"mt-3 w-full\"\n        *ngIf=\"npShowPagination\"\n        [style.width]=\"paginationWidth\"\n      >\n        <np-pagination\n          [npType]=\"npPaginationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n} @else {\n  <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n    <div\n      class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\"\n    >\n      <img src=\"assets/images/error-table.png\" alt=\"error\" />\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\"\n      >\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography\n            npType=\"text\"\n            npSize=\"sm\"\n            npWeight=\"regular\"\n            style=\"\n              color: rgba(71, 84, 103, 1);\n              max-width: 352px;\n              text-align: center;\n            \"\n          >\n            We had some trouble loading this page. <br />\n            Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div\n          *ngIf=\"(npSortable && !col.template) || (col.template && col.sortFn)\"\n          (click)=\"onSortColumn(col)\"\n          class=\"cursor-pointer\"\n        >\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'asc'\"\n            class=\"fa-duotone fa-solid fa-sort\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey === col.key && sortDirection === 'desc'\"\n            class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n            style=\"\n              --fa-primary-color: #475467;\n              --fa-secondary-color: #475467;\n              --fa-secondary-opacity: 0.5;\n            \"\n          ></i>\n          <i\n            *ngIf=\"sortKey !== col.key || !sortDirection\"\n            class=\"fa-solid fa-sort\"\n            style=\"color: #d0d5d3\"\n          ></i>\n        </div>\n\n        <div\n          class=\"cursor-pointer relative\"\n          (click)=\"toggleFilter(col.key)\"\n          *ngIf=\"\n            (npFilterable && !col.template) || (col.template && col.filterFn)\n          \"\n        >\n          <ng-container\n            *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\"\n          >\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span\n                class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"\n              ></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i\n              class=\"fa-solid fa-filter\"\n              [ngStyle]=\"{\n                color: activeFilterKey === col.key ? '#000' : '#d0d5dd',\n              }\"\n            ></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              npType=\"string\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n              iconRight=\"fa-thin fa-xmark\"\n              (iconRightClick)=\"onClearSearch(col.key)\"\n            ></np-input-field>\n            <div\n              class=\"flex pt-2 cursor-pointer text-gray-500\"\n              (click)=\"onClearFilter(col.key)\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div>\n                <div\n                  *ngFor=\"let value of col.filterListAfterSearch\"\n                  class=\"w-full flex items-center\"\n                >\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    npType=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div\n                *ngIf=\"col.filterListAfterSearch.length === 0\"\n                class=\"text-center py-[50px]\"\n              >\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1)\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td [class.border-r]=\"npBordered\" class=\"border-gray-200\">\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container\n        *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"\n      ></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        {{ row[col.key] }}\n      </div>\n    </ng-template>\n  </td>\n</ng-template>", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}.cdk-drag-preview{background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:table}.cdk-drag-preview .cdk-drag-handle{padding:12px;display:flex;height:100%;align-items:center;width:min-content}.cdk-drag-placeholder{opacity:.2;background-color:#f3f4f6;border:2px dashed #d1d5db}.cdk-drag-animating,tbody.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { filterIcons: [{
                 type: ViewChildren,
                 args: ['filterIcon']
@@ -2726,10 +2751,10 @@ class NpTabComponent {
         if (!wrapper)
             return;
         const scrollLeft = wrapper.scrollLeft;
-        const scrollWidth = wrapper.scrollWidth;
+        const npScrollWidth = wrapper.npScrollWidth;
         const clientWidth = wrapper.clientWidth;
         this.scrollLeftButton = scrollLeft > 0;
-        this.scrollRightButton = scrollLeft + clientWidth < Math.ceil(scrollWidth);
+        this.scrollRightButton = scrollLeft + clientWidth < Math.ceil(npScrollWidth);
     };
     scrollLeft() {
         const wrapper = this.headerWrapperRef?.nativeElement;