@vallift/ngl 22.0.51 → 22.0.53

package/fesm2022/vallift-ngl.mjs

@@ -37,6 +37,10 @@ const DEFAULT_NGL_LIST_RESPONSE = {
     pageSize: 'pageSize',
     totalPages: 'totalPages',
 };
+const DEFAULT_NGL_PAGINATION_CONFIG = {
+    pageSize: 25,
+    pageSizeOptions: [25, 50, 100, 200],
+};
 const NGL_CONFIG = new InjectionToken('NGL_CONFIG');
 
 class BaseApiService {
@@ -1325,13 +1329,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
 
 class PaginationComponent {
+    nglConfig = inject(NGL_CONFIG, { optional: true });
+    paginationConfig = this.nglConfig?.pagination ?? DEFAULT_NGL_PAGINATION_CONFIG;
     totalItems = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-    pageSizeOptions = input([10, 25, 50, 100], /* @ts-ignore */
+    pageSizeOptions = input(this.paginationConfig.pageSizeOptions ??
+        DEFAULT_NGL_PAGINATION_CONFIG.pageSizeOptions, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     type = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    pageSize = 25; // Default page size
+    pageSize = this.paginationConfig.pageSize ?? DEFAULT_NGL_PAGINATION_CONFIG.pageSize;
     pageChange = output();
     currentPage = 1;
     get totalPages() {
@@ -1376,13 +1383,13 @@ class PaginationComponent {
         this.pageChange.emit({ pageNumber: this.currentPage, pageSize: this.pageSize });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div\n  class=\"flex w-full items-center justify-between border-t border-neutral-50 bg-white\"\n  [class.p-4]=\"type() !== 'compact'\"\n  [class.px-4]=\"type() === 'compact'\"\n  [class.py-3]=\"type() === 'compact'\">\n  <div>\n    <p class=\"text-nowrap text-sm text-neutral-600\">\n      Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n    @if (type() !== 'compact') {\n      <span class=\"text-body2\">Items per page:</span>\n\n      <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n        <select\n          #pageSizeSelect\n          [(ngModel)]=\"pageSize\"\n          (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n          class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n          @for (size of pageSizeOptions(); track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToFirstPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage >= totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    @if (type() !== 'compact') {\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"goToLastPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div\n  class=\"flex w-full items-center justify-between border-t border-neutral-50 bg-white\"\n  [class.p-4]=\"type() !== 'compact'\"\n  [class.px-4]=\"type() === 'compact'\"\n  [class.py-3]=\"type() === 'compact'\">\n  <div>\n    <p class=\"text-nowrap text-sm text-neutral-600\">\n      Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n    @if (type() !== 'compact') {\n      <span class=\"text-body2\">Items per page:</span>\n    }\n\n    <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n      <select\n        #pageSizeSelect\n        [(ngModel)]=\"pageSize\"\n        (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n        class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n        @for (size of pageSizeOptions(); track size) {\n          <option [value]=\"size\">{{ size }}</option>\n        }\n      </select>\n    </div>\n\n    @if (type() !== 'compact') {\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToFirstPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage >= totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    @if (type() !== 'compact') {\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"goToLastPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-pagination', standalone: true, imports: [
                         FormsModule,
-                    ], template: "<div\n  class=\"flex w-full items-center justify-between border-t border-neutral-50 bg-white\"\n  [class.p-4]=\"type() !== 'compact'\"\n  [class.px-4]=\"type() === 'compact'\"\n  [class.py-3]=\"type() === 'compact'\">\n  <div>\n    <p class=\"text-nowrap text-sm text-neutral-600\">\n      Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n    @if (type() !== 'compact') {\n      <span class=\"text-body2\">Items per page:</span>\n\n      <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n        <select\n          #pageSizeSelect\n          [(ngModel)]=\"pageSize\"\n          (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n          class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n          @for (size of pageSizeOptions(); track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToFirstPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage >= totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    @if (type() !== 'compact') {\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"goToLastPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex w-full items-center justify-between border-t border-neutral-50 bg-white\"\n  [class.p-4]=\"type() !== 'compact'\"\n  [class.px-4]=\"type() === 'compact'\"\n  [class.py-3]=\"type() === 'compact'\">\n  <div>\n    <p class=\"text-nowrap text-sm text-neutral-600\">\n      Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n    </p>\n  </div>\n\n  <div class=\"flex items-center space-x-4\">\n    @if (type() !== 'compact') {\n      <span class=\"text-body2\">Items per page:</span>\n    }\n\n    <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n      <select\n        #pageSizeSelect\n        [(ngModel)]=\"pageSize\"\n        (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n        class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n        @for (size of pageSizeOptions(); track size) {\n          <option [value]=\"size\">{{ size }}</option>\n        }\n      </select>\n    </div>\n\n    @if (type() !== 'compact') {\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage === 1\"\n        (click)=\"goToFirstPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPreviousPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n      [disabled]=\"currentPage >= totalPages\"\n      (click)=\"goToNextPage()\">\n      <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"currentColor\"/>\n      </svg>\n    </button>\n\n    @if (type() !== 'compact') {\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"goToLastPage()\">\n        <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"currentColor\"/>\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pageSize: [{
                 type: Input
             }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
@@ -3091,14 +3098,18 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
     toolbarContent;
     nglConfig = inject(NGL_CONFIG, { optional: true });
     listResponse = resolveListResponseConfig(this.nglConfig?.listResponse);
+    paginationConfig = this.nglConfig?.pagination ?? DEFAULT_NGL_PAGINATION_CONFIG;
     hasToolbarContent = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasToolbarContent" }] : /* istanbul ignore next */ []));
     columnDefs = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
     state = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    pageSize = input(50, /* @ts-ignore */
+    pageSize = input(this.paginationConfig.pageSize ?? DEFAULT_NGL_PAGINATION_CONFIG.pageSize, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input(this.paginationConfig.pageSizeOptions ??
+        DEFAULT_NGL_PAGINATION_CONFIG.pageSizeOptions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     enableHorizontallyScrollable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "enableHorizontallyScrollable" }] : /* istanbul ignore next */ []));
     enableResizableColumns = input(false, /* @ts-ignore */
@@ -3337,7 +3348,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "type", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "type", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -3358,14 +3369,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         TextButtonSmall,
                         DynamicRendererComponent,
                         ContextMenuButtonComponent
-                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
+                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <app-text-input class=\"shrink-0\"\n                      [iconSrc]=\"'assets/icons/search.svg'\"\n                      placeholder=\"Search...\"\n                      type=\"search\"\n                      [fullWidth]=\"false\"\n                      (changeValue)=\"onSearchTextChanged($event)\">\n      </app-text-input>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
         }], propDecorators: { headerComponents: [{
                 type: ContentChildren,
                 args: ['filter']
             }], toolbarContent: [{
                 type: ViewChild,
                 args: ['toolbarContent']
-            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
+            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
                 type: ViewChild,
                 args: [CdkPortal]
             }] } });
@@ -4177,14 +4188,18 @@ class SignalDataTableComponent extends BaseControlValueAccessorV3 {
     toolbarContent;
     nglConfig = inject(NGL_CONFIG, { optional: true });
     listResponse = resolveListResponseConfig(this.nglConfig?.listResponse);
+    paginationConfig = this.nglConfig?.pagination ?? DEFAULT_NGL_PAGINATION_CONFIG;
     hasToolbarContent = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasToolbarContent" }] : /* istanbul ignore next */ []));
     columnDefs = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
     state = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    pageSize = input(50, /* @ts-ignore */
+    pageSize = input(this.paginationConfig.pageSize ?? DEFAULT_NGL_PAGINATION_CONFIG.pageSize, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input(this.paginationConfig.pageSizeOptions ??
+        DEFAULT_NGL_PAGINATION_CONFIG.pageSizeOptions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     enableHorizontallyScrollable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "enableHorizontallyScrollable" }] : /* istanbul ignore next */ []));
     enableResizableColumns = input(false, /* @ts-ignore */
@@ -4424,7 +4439,7 @@ class SignalDataTableComponent extends BaseControlValueAccessorV3 {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDataTableComponent, isStandalone: true, selector: "app-signal-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"true\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "type", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SignalTextField, selector: "lib-signal-text-field", inputs: ["label", "placeholder", "hint", "inputType", "mask", "prefixText", "prefixIcon", "postfixText", "postfixIcon", "enablePrefixBackground", "enablePostfixBackground", "id", "fieldName", "autocomplete", "minLength", "maxLength", "pattern", "showClearButton", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "enter", "clear", "keyDown", "postfixIconClick"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDataTableComponent, isStandalone: true, selector: "app-signal-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"true\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "type", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SignalTextField, selector: "lib-signal-text-field", inputs: ["label", "placeholder", "hint", "inputType", "mask", "prefixText", "prefixIcon", "postfixText", "postfixIcon", "enablePrefixBackground", "enablePostfixBackground", "id", "fieldName", "autocomplete", "minLength", "maxLength", "pattern", "showClearButton", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "enter", "clear", "keyDown", "postfixIconClick"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDataTableComponent, decorators: [{
             type: Component,
@@ -4445,14 +4460,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         TextButtonSmall,
                         DynamicRendererComponent,
                         ContextMenuButtonComponent,
-                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"true\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
+                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  <div\n    class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n    [class.hidden]=\"!showToolbar()\">\n    @if (enableSearch()) {\n      <lib-signal-text-field\n        class=\"shrink-0\"\n        [inputType]=\"'search'\"\n        [placeholder]=\"'Search...'\"\n        [prefixIcon]=\"'assets/icons/search.svg'\"\n        [debounceValueChange]=\"true\"\n        (valueChange)=\"onSearchTextChanged($event)\">\n      </lib-signal-text-field>\n    }\n    <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().loading()) {\n        <tbody aria-busy=\"true\" aria-live=\"polite\">\n          @for (row of skeletonRows(); track row) {\n            <tr class=\"border-b border-gray-100\">\n              @if (expandableComponent()) {\n                <td class=\"px-4 py-3\">\n                  <app-shimmer type=\"table-cell\" />\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n                    <app-shimmer type=\"table-cell\" />\n                  </td>\n                }\n              }\n\n              @if (enableColumnsConfig()) {\n                <td class=\"px-1 py-3\"></td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (!state().loading() && state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (!state().loading() && getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
         }], propDecorators: { headerComponents: [{
                 type: ContentChildren,
                 args: ['filter']
             }], toolbarContent: [{
                 type: ViewChild,
                 args: ['toolbarContent']
-            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
+            }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], enableHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHorizontallyScrollable", required: false }] }], enableResizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizableColumns", required: false }] }], enableClickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClickableRows", required: false }] }], expandableComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableComponent", required: false }] }], enableColumnsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnsConfig", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], disableInitialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialLoad", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], tableStateChanged: [{ type: i0.Output, args: ["tableStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], onRowClicked: [{ type: i0.Output, args: ["onRowClicked"] }], portal: [{
                 type: ViewChild,
                 args: [CdkPortal]
             }] } });
@@ -15438,6 +15453,7 @@ function provideNglConfig(config) {
         button: { ...DEFAULT_NGL_BUTTON_CONFIG, ...config.button },
         overlay: { ...DEFAULT_NGL_OVERLAY_CONFIG, ...config.overlay },
         listResponse: { ...DEFAULT_NGL_LIST_RESPONSE, ...config.listResponse },
+        pagination: { ...DEFAULT_NGL_PAGINATION_CONFIG, ...config.pagination },
     };
     const providers = [
         provideEnvironmentNgxMask(),
@@ -15530,5 +15546,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_NGL_OVERLAY_CONFIG, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_NGL_OVERLAY_CONFIG, DEFAULT_NGL_PAGINATION_CONFIG, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map