@bootkit/ng0 0.0.0-alpha.5 → 0.0.0-alpha.51

package/fesm2022/bootkit-ng0-components-table.mjs

@@ -1,65 +1,142 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Input, ContentChild, Directive, input, Component, ContentChildren, NgModule } from '@angular/core';
+import { input, booleanAttribute, model, signal, TemplateRef, ContentChild, Directive, Input, inject, DestroyRef, numberAttribute, HostBinding, ContentChildren, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3 from '@bootkit/ng0/localization';
-import { LocalizationModule } from '@bootkit/ng0/localization';
 import { formatString } from '@bootkit/ng0/common';
-import { ArrayDataSource, AsyncDataSource, DataSource, DataRequest } from '@bootkit/ng0/data';
+import * as i4 from '@bootkit/ng0/localization';
+import { LocalizationService, LocalizationModule } from '@bootkit/ng0/localization';
+import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
+import { PaginationComponent } from '@bootkit/ng0/components/pagination';
+import * as i3 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { NumberDirective } from '@bootkit/ng0/form';
 
 class TableColumnDirective {
-    field;
-    title;
-    emptyCellText;
-    /** Column type */
-    type = 'text';
+    /**
+     * The field in the data source to bind to. If not set, the column will not display any data.
+     */
+    field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
+    /**
+     * The title of the column. This will be displayed in the header row.
+     */
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    /**
+     * Text to display in the cell if the value is null or undefined.
+     */
+    emptyCellText = input(...(ngDevMode ? [undefined, { debugName: "emptyCellText" }] : []));
+    /**
+     * Type of the table cell.
+     */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /**
+     * CSS class(es) to apply to the table cell.
+     */
+    cellClass = input(...(ngDevMode ? [undefined, { debugName: "cellClass" }] : []));
+    /**
+     * @deprecated Use `cellClass` instead.
+     */
+    bold = input(false, ...(ngDevMode ? [{ debugName: "bold", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * @deprecated Use `cellClass` instead.
+     */
+    shrink = input(false, ...(ngDevMode ? [{ debugName: "shrink", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * If true, the column will support filtering.
+     */
+    filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The current filter value of the column.
+     */
+    filterValue = model(...(ngDevMode ? [undefined, { debugName: "filterValue" }] : []));
+    /**
+     * The field to use for filtering. If not set, the `field` property will be used.
+     * @deprecated Use `fieldName` instead.
+     */
+    filterField = input(...(ngDevMode ? [undefined, { debugName: "filterField" }] : []));
+    /**
+     * The current filter operator of the column.
+     */
+    filterOperator = model(...(ngDevMode ? [undefined, { debugName: "filterOperator" }] : []));
+    /**
+     * The list of filter operators to show in the filter dropdown. If not set, a default list will be used based on the column type.
+     */
+    filterOperators = input(...(ngDevMode ? [undefined, { debugName: "filterOperators" }] : []));
+    /**
+     * If true, the filter operators dropdown will be shown.
+     */
+    showFilterOperators = signal(false, ...(ngDevMode ? [{ debugName: "showFilterOperators" }] : []));
+    /**
+     * The name of the field in the data source. If not set, the `field` property will be used.
+     */
+    fieldName = input(...(ngDevMode ? [undefined, { debugName: "fieldName" }] : []));
+    /**
+     * If true, the column will support sorting.
+     */
+    sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The current sort direction of the column.
+     */
+    sortDirection = model('none', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
     template;
-    cellClass;
-    shrink = false;
-    bold = false;
-    badge;
-    filterable = false;
-    filterValue;
-    filterField;
     constructor() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: TableColumnDirective, isStandalone: true, selector: "ng0-table-col", inputs: { field: "field", title: "title", emptyCellText: "emptyCellText", type: "type", cellClass: "cellClass", shrink: "shrink", bold: "bold", badge: "badge", filterable: "filterable", filterValue: "filterValue", filterField: "filterField" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    ngOnInit() {
+        if (this.filterOperator() == undefined) {
+            this.filterOperator.set(this.type() == 'text' ? 'contains' : 'eq');
+        }
+    }
+    /**
+     * Get the list of filter operators to show in the filter dropdown.
+     */
+    getFilterOperators() {
+        let op = this.filterOperators();
+        if (op && op.length > 0)
+            return op;
+        let type = this.type();
+        if (type == 'number' || type == 'currency' || type == 'date' || type == 'time') {
+            return ['eq', 'ne', 'gt', 'gte', 'lt', 'lte',];
+        }
+        else if (type == 'text') {
+            return ['contains', 'startsWith', 'endsWith', 'eq', 'ne'];
+        }
+        else {
+            return [];
+        }
+    }
+    /**
+     * Toggle the sort direction of the column.
+     * @returns void
+     */
+    toggleSortDirection() {
+        if (!this.sortable()) {
+            return;
+        }
+        let dir = this.sortDirection();
+        if (dir === 'none') {
+            this.sortDirection.set('asc');
+        }
+        else if (dir === 'asc') {
+            this.sortDirection.set('desc');
+        }
+        else {
+            this.sortDirection.set('none');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.11", type: TableColumnDirective, isStandalone: true, selector: "ng0-table-col", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyCellText: { classPropertyName: "emptyCellText", publicName: "emptyCellText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, shrink: { classPropertyName: "shrink", publicName: "shrink", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, filterField: { classPropertyName: "filterField", publicName: "filterField", isSignal: true, isRequired: false, transformFunction: null }, filterOperator: { classPropertyName: "filterOperator", publicName: "filterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterValue: "filterValueChange", filterOperator: "filterOperatorChange", sortDirection: "sortDirectionChange" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng0-table-col',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { field: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], emptyCellText: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], template: [{
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyCellText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCellText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], cellClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClass", required: false }] }], bold: [{ type: i0.Input, args: [{ isSignal: true, alias: "bold", required: false }] }], shrink: [{ type: i0.Input, args: [{ isSignal: true, alias: "shrink", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }, { type: i0.Output, args: ["filterValueChange"] }], filterField: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterField", required: false }] }], filterOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperator", required: false }] }, { type: i0.Output, args: ["filterOperatorChange"] }], filterOperators: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperators", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], cellClass: [{
-                type: Input
-            }], shrink: [{
-                type: Input
-            }], bold: [{
-                type: Input
-            }], badge: [{
-                type: Input
-            }], filterable: [{
-                type: Input
-            }], filterValue: [{
-                type: Input
-            }], filterField: [{
-                type: Input
             }] } });
 
 class TableDetailRowDirective {
@@ -68,10 +145,10 @@ class TableDetailRowDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableDetailRowDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: TableDetailRowDirective, isStandalone: true, selector: "[ng0-table-detail-row]", inputs: { showCallback: "showCallback" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableDetailRowDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.11", type: TableDetailRowDirective, isStandalone: true, selector: "[ng0-table-detail-row]", inputs: { showCallback: "showCallback" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableDetailRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableDetailRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ng0-table-detail-row]',
@@ -81,158 +158,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }] } });
 
-class TablePagingComponent {
-    _destroyRef;
-    // @Input() dataSource!: DataSource;
-    autoLoad = true;
-    rowNumber = input(false);
-    constructor(_destroyRef) {
-        this._destroyRef = _destroyRef;
-    }
-    ngOnInit() {
-    }
-    // ngAfterContentInit(): void {
-    // }
-    ngOnDestroy() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TablePagingComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: TablePagingComponent, isStandalone: true, selector: "ng0-table-paging", inputs: { autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: false, isRequired: false, transformFunction: null }, rowNumber: { classPropertyName: "rowNumber", publicName: "rowNumber", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: 
-                // DateModule,
-                LocalizationModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TablePagingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng0-table-paging', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        // DateModule,
-                        LocalizationModule
-                    ], template: "" }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { autoLoad: [{
-                type: Input
-            }] } });
-
+/**
+ * A generic table component that can display data in a tabular format.
+ * It supports features like pagination, sorting, filtering, and row details.
+ * It can be used with any data source that implements the DataSource interface.
+ */
 class TableComponent {
-    _destroyRef;
+    _ls = inject(LocalizationService);
+    _destroyRef = inject(DestroyRef);
+    _changeSubscription;
+    _columns;
+    _detailRow;
+    _dataResult = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataResult" }] : []));
+    _lastRequest; // The last data request made to the data source
+    _loadingRequest; // The current data request being processed
+    _rowStates = new Map();
+    _formatString = formatString;
+    _dataSource;
+    _pagingFormatter;
+    _lastError;
     /**
      * The data source for the table.
      * This can be an array of data, a function that returns an observable of data,
      * or an instance of DataSource.
      */
-    source = input.required();
+    source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
     /**
      * If true, the table will automatically load data when initialized.
      * This is useful for tables that need to display data immediately without user interaction.
      */
-    autoLoad = input(true);
+    autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * If true, the table will show row numbers.
      * This will add a column to the left of the table with the row numbers.
      */
-    showRowNumbers = input(false);
+    showRowNumbers = input(false, ...(ngDevMode ? [{ debugName: "showRowNumbers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * If true, the table will show the header row.
      */
-    showHeader = input(true);
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * If true, the table will support pagination.
-     * If false, the table will load all records at once.
      */
-    pagable = input(true);
+    pageable = input(false, ...(ngDevMode ? [{ debugName: "pageable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The currently selected page in the table.
+     * @default 0
+     */
+    pageIndex = model(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    /**
+     * The number of records to display per page.
+     * @default 10
+     */
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /**
+     * Maximum number of visible pages in the pagination controls.
+     * @default 10
+     */
+    maxVisiblePages = input(10, ...(ngDevMode ? [{ debugName: "maxVisiblePages", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /**
+     * If true, the table will show pagination controls at the bottom.
+     * This will allow users to navigate between pages of data.
+     * @default true
+     */
+    showPagingControls = input(true, ...(ngDevMode ? [{ debugName: "showPagingControls", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Whether to show the first and last buttons in the pagination controls.
+     * @default true
+     */
+    showFirstLastButtons = input(false, ...(ngDevMode ? [{ debugName: "showFirstLastButtons", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Whetheer to show the next and previous buttons in the pagination controls.
+     * @default true
+     */
+    showNextPreviousButtons = input(false, ...(ngDevMode ? [{ debugName: "showNextPreviousButtons", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
-     * If true, the table will show a pagination controls at the bottom.
+     * Array of page size options to display in the page size selector.
+     * If not provided, the default page size options will be used.
+     * @default true
      */
-    showPagination = input(true);
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
     /**
-     * The number of records to show per page.
-     * This is only used if pagable is true.
+     * Whether to show paging info at the bottom of the table.
+     * This will show the number of records displayed and total records.
+     * @default true
      */
-    pageSize = input(10);
+    showPagingInfo = input(true, ...(ngDevMode ? [{ debugName: "showPagingInfo", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
-     * The current page index.
-     * This is only used if pagable is true.
-     * The first page is 0.
+     * If true, the table will support sorting.
+     * This will add a sort icon to each column header.
      */
-    pageIndex = input(0);
+    sortable = input(true, ...(ngDevMode ? [{ debugName: "sortable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
-     * The CSS class to apply to the table element.
+     * The CSS class to apply to the internal table element.
      * This can be used to apply custom styles to the table.
      */
-    tableClass = input();
+    tableClass = input(...(ngDevMode ? [undefined, { debugName: "tableClass" }] : []));
     /**
      * The CSS class to apply to the header element.
      */
-    headerClass = input();
+    headerClass = input(...(ngDevMode ? [undefined, { debugName: "headerClass" }] : []));
     /**
      * The caption of the table.
      */
-    caption = input();
-    height = input();
+    caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : []));
+    /**
+     * The height of the table in pixels.
+     * This can be used to set a fixed height for the table.
+     */
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
     /**
      * If true, the table will support filtering.
      * This will add a filter input to each column header.
      */
-    filterable = input(false);
+    filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The indicator to show while the table is loading data for the first time.
+     */
+    loadingIndicator = input('spinner', ...(ngDevMode ? [{ debugName: "loadingIndicator", transform: v => {
+                if (typeof v === 'boolean') {
+                    return v ? 'spinner' : 'none';
+                }
+                return v;
+            } }] : [{
+            transform: v => {
+                if (typeof v === 'boolean') {
+                    return v ? 'spinner' : 'none';
+                }
+                return v;
+            }
+        }]));
+    /** If true, the table will show a loading cover while data is being loaded.
+     * This can be used to prevent user interaction with the table while loading.
+     * This cover is not displayed when the table is loading for the first time.
+     * Instead, the table will show a loading based on loadingIndicator settings.
+     */
+    loadingCover = input('spinner', ...(ngDevMode ? [{ debugName: "loadingCover", transform: v => {
+                if (typeof v === 'boolean') {
+                    return v ? 'spinner' : 'none';
+                }
+                return v;
+            } }] : [{
+            transform: v => {
+                if (typeof v === 'boolean') {
+                    return v ? 'spinner' : 'none';
+                }
+                return v;
+            }
+        }]));
     // @Input() rowColor?: (row: any) => BootstrapColor;
-    _columns;
-    _detailRow;
-    _data;
-    _totalRecords;
-    _totalPages;
-    _rowStates = new Map();
-    _formatString = formatString;
-    _changeSubscription;
-    _dataSource;
-    constructor(_destroyRef) {
-        this._destroyRef = _destroyRef;
-    }
-    ngOnInit() {
-        if (Array.isArray(this.source())) {
-            this._dataSource = new ArrayDataSource(this.source());
-        }
-        else if (typeof this.source() == 'function') {
-            this._dataSource = new AsyncDataSource(this.source());
-        }
-        else if (this.source() instanceof DataSource) {
-            this._dataSource = this.source();
-        }
-        else if (this.source() == undefined) {
-            this._dataSource = new ArrayDataSource([]);
-        }
-        else {
-            throw new Error('Invalid data source provided to ng0-table.');
-        }
+    ngAfterContentInit() {
+        this._dataSource = dataSourceAttribute(this.source());
+        const locale = this._ls.get();
+        this._pagingFormatter = locale?.definition.components?.table?.pagingInfo ??
+            ((o) => `Showing ${o.firstRecord}-${o.lastRecord} of ${o.totalRecords} records`);
         // this._changeSubscription = this.dataSource().change.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(result => {
         //   this.reload();
         // });
-    }
-    ngAfterContentInit() {
         if (this.autoLoad()) {
-            this.reload();
+            this.load();
         }
     }
-    reload() {
-        const filters = this._columns
-            .filter(x => x.filterable && x.filterValue != '' && x.filterValue != undefined)
-            .map(col => ({ field: col.filterField ?? col.field, value: col.filterValue, operator: 'EQ' }));
-        let pageIndex;
-        let pageSize;
-        if (this.pagable()) {
-            pageIndex = this.pageIndex();
-            pageSize = this.pageSize();
+    /**
+     * Loads data from the data source based on the current state of the table (pagination, sorting, filtering).
+     * This method can be called manually to refresh the data in the table.
+     * It will construct a DataRequest object based on the current pagination, sorting, and filtering settings,
+     * and then call the load method of the data source with that request.
+     */
+    load(pageIndex) {
+        let page;
+        let filters = [];
+        let sort;
+        if (this.filterable()) {
+            this._columns.forEach(col => {
+                if (col.filterable() && col.filterValue() != '' && col.filterValue() != undefined) {
+                    filters.push({ field: col.fieldName() ?? col.filterField() ?? col.field(), value: col.filterValue(), operator: col.filterOperator() });
+                }
+            });
+        }
+        if (this.pageable()) {
+            if (pageIndex != undefined) {
+                this.pageIndex.set(pageIndex);
+            }
+            page = {
+                index: this.pageIndex(),
+                size: this.pageSize(),
+            };
         }
-        var dr = new DataRequest({ pageIndex, pageSize, filters });
-        this._dataSource.load(dr).pipe(takeUntilDestroyed(this._destroyRef)).subscribe(result => {
-            this._data = result.data;
-            this._totalRecords = result.total;
-            this._totalPages = Math.ceil(result.total / this.pageSize());
+        if (this.sortable()) {
+            let col = this._columns.find(c => c.sortable() && c.sortDirection() != 'none' && (c.field() != '' || c.fieldName() != ''));
+            if (col) {
+                sort = {
+                    field: col.fieldName() ?? col.field(),
+                    asc: col.sortDirection() === 'asc'
+                };
+            }
+        }
+        this._loadingRequest = new DataRequest({ page, filters, sort, select: [], computeTotal: true });
+        this._dataSource.load(this._loadingRequest)
+            .pipe(takeUntilDestroyed(this._destroyRef)).subscribe({
+            next: result => {
+                this._dataResult.set(result);
+                this._lastRequest = this._loadingRequest;
+                this._loadingRequest = undefined;
+                this._lastError = undefined;
+            }, error: err => {
+                this._lastError = err;
+                this._lastRequest = this._loadingRequest;
+                this._loadingRequest = undefined;
+            }
         });
     }
-    get loading() {
-        return this._dataSource.loading;
+    /**
+     * Determines if the table is currently loading data.
+     */
+    get isLoading() {
+        return this._dataSource.isLoading;
     }
     _getCellValue(row, col) {
-        var subFields = col.field.split('.');
+        var subFields = col.field().split('.');
         let value = row[subFields[0]];
         for (let i = 1; i < subFields.length; i++) {
             if (value == null)
@@ -241,15 +385,10 @@ class TableComponent {
         }
         return value;
     }
-    onNextPageClick() {
-        // ++this.pageIndex()
-        this.reload();
-    }
-    onPreviousPageClick() {
-        // --this.pageIndex
-        this.reload();
+    _onPageChange(pageIndex) {
+        this.load(pageIndex);
     }
-    onToggleRowDetailClick(row) {
+    _onToggleRowDetailClick(row) {
         var state = this._rowStates.get(row);
         if (!state) {
             this._rowStates.set(row, { expanded: true });
@@ -262,38 +401,57 @@ class TableComponent {
         var state = this._rowStates.get(row);
         return state == undefined ? false : state.expanded;
     }
+    _onToggleFilterOperator(col) {
+        if (col.showFilterOperators()) {
+            col.showFilterOperators.set(false);
+        }
+        else {
+            this._columns.forEach(x => x.showFilterOperators.set(false));
+            col.showFilterOperators.set(true);
+        }
+    }
+    _onSelectFilterOperator(col, filterOperator) {
+        col.filterOperator.set(filterOperator);
+        this._columns.forEach(x => x.showFilterOperators.set(false));
+        this.load(0);
+    }
     ngOnDestroy() {
         this._changeSubscription?.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TableComponent, isStandalone: true, selector: "ng0-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, pagable: { classPropertyName: "pagable", publicName: "pagable", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_detailRow", first: true, predicate: TableDetailRowDirective, descendants: true }, { propertyName: "_columns", predicate: TableColumnDirective }], exportAs: ["ng0Table"], ngImport: i0, template: "<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\r\n    <table class=\"table\" [ngClass]=\"tableClass()\">\r\n        @if(caption()) {\r\n        <caption>{{caption()}}</caption>\r\n        }\r\n\r\n        <thead *ngIf=\"showHeader\" [ngClass]=\"headerClass()\">\r\n            <tr>\r\n                <th *ngIf=\"_detailRow\"></th>\r\n                <th *ngIf=\"showRowNumbers()\" class=\"row-number text-muted\">#</th>\r\n                <th *ngFor=\"let col of _columns\">{{col.title}}</th>\r\n            </tr>\r\n        </thead>\r\n        <thead *ngIf=\"filterable()\">\r\n            <tr>\r\n                <th *ngIf=\"_detailRow\"></th>\r\n\r\n                @if(showRowNumbers()) {\r\n                <th></th>\r\n                }\r\n\r\n                <th *ngFor=\"let col of _columns\">\r\n                    @if(col.filterable) {\r\n                    @if(col.type == 'text') {\r\n                    <input [name]=\"'datatablecol-' + col.field\"\r\n                           type=\"text\"\r\n                           [maxlength]=\"50\"\r\n                           class=\"form-control form-control-sm\"\r\n                           [(ngModel)]=\"col.filterValue\"\r\n                           (keydown.enter)=\"reload()\">\r\n                    }@else if(col.type == 'number') {\r\n                    <input [name]=\"'datatablecol-' + col.field\"\r\n                           type=\"number\"\r\n                           class=\"form-control form-control-sm\"\r\n                           [(ngModel)]=\"col.filterValue\"\r\n                           (keydown.enter)=\"reload()\">\r\n                    }\r\n                    }\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <ng-container *ngIf=\"_data && _data.length! > 0\">\r\n                <ng-container *ngFor=\"let row of _data; let i=index\">\r\n                    <tr [class.table-active]=\"isRowExpanded(row)\">\r\n                        <td class=\"detail-row-expander\" *ngIf=\"_detailRow\">\r\n                            <button class=\"btn\" (click)=\"onToggleRowDetailClick(row)\"\r\n                                    *ngIf=\"_detailRow.showCallback == null || _detailRow.showCallback(row)\">\r\n                                <ng-template [ngIf]=\"isRowExpanded(row)\" [ngIfElse]=\"collapse\"><i\r\n                                       class=\"far fa-minus\"></i></ng-template>\r\n                                <ng-template #collapse><i class=\"far fa-plus\"></i> </ng-template>\r\n                            </button>\r\n                        </td>\r\n\r\n                        <td class=\"row-number text-muted\" *ngIf=\"showRowNumbers()\">{{pageSize() * pageIndex() + i + 1}}</td>\r\n\r\n                        <td *ngFor=\"let col of _columns\" [ngClass]=\"col.cellClass\" [class.shrinked]=\"col.shrink\"\r\n                            [class.fw-bold]=\"col.bold\">\r\n                            @if(col.template){\r\n                            <ng-template [ngIf]=\"col.template\">\r\n                                <ng-container\r\n                                              *ngTemplateOutlet=\"col.template; context: {$implicit: row}\"></ng-container>\r\n                            </ng-template>\r\n                            }@else if(col.field){\r\n                            @let cellValue = _getCellValue(row, col);\r\n                            <div\r\n                                 [class.badge]=\"col.badge\"\r\n                                 [class.text-bg-primary]=\"col.badge?.primary && cellValue === col.badge?.primary\"\r\n                                 [class.text-bg-secondary]=\"col.badge?.secondary && cellValue === col.badge?.secondary\"\r\n                                 [class.text-bg-success]=\"col.badge?.success && cellValue === col.badge?.success\"\r\n                                 [class.text-bg-light]=\"col.badge && cellValue !== col.badge.success && cellValue !== col.badge.secondary  && cellValue !== col.badge.success \">\r\n\r\n                                <ng-container *ngIf=\"col.type=='text'\">\r\n                                    {{cellValue}}\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.type=='date'\">\r\n                                    <span class=\"date-time\">{{cellValue | ng0Date}}</span>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.type=='number'\">\r\n                                    {{cellValue | number}}\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.type=='currency'\">\r\n                                    {{cellValue | number}}\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"$any(col?.type)?.enum\">\r\n                                    {{cellValue | ng0Enum:$any(col.type).enum}}\r\n                                </ng-container>\r\n                                <!-- <ng-container *ngIf=\"$any(col?.type)?.boolean\">\r\n                                    {{cellValue | ng0Bool:$any(col.type).boolean}}\r\n                                </ng-container> -->\r\n                                <ng-container *ngIf=\"$any(col?.type)?.currency\">\r\n                                    {{cellValue | currency:$any(col?.type)?.currency}}\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"cellValue == null && col.emptyCellText\">\r\n                                    {{col.emptyCellText}}\r\n                                </ng-container>\r\n\r\n\r\n                            </div>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n\r\n                    <tr class=\"detail-row\" *ngIf=\"_detailRow && isRowExpanded(row)\">\r\n                        <td [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\" class=\"ps-2 pb-4\">\r\n                            <ng-container\r\n                                          *ngTemplateOutlet=\"_detailRow.templateRef; context: {$implicit: row}\"></ng-container>\r\n                        </td>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n            </ng-container>\r\n\r\n            <tr *ngIf=\"_data?.length === 0\">\r\n                <td [colSpan]=\"_columns.length + (showRowNumbers() ? 1 : 0)\" class=\"text-center text-muted small p-2\">\r\n                    {{'noRecords' | ng0Translate}}\r\n                </td>\r\n            </tr>\r\n            <tr *ngIf=\"_dataSource.loading\" class=\"loading-row\">\r\n                <td [colSpan]=\"_columns.length + (showRowNumbers() ? 1 : 0)\" class=\"text-center\">\r\n                    <div class=\"spinner-border text-primary\" role=\"status\"></div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<!-- <ng0-table-paging></ng0-table-paging> -->\r\n\r\n<!-- <div class=\"mt-auto\" *ngIf=\"pagination()\">\r\n    <div class=\"btn-group me-2\" role=\"group\">\r\n        <button type=\"button\"\r\n                class=\"btn btn-outline-primary\"\r\n                (click)=\"onPreviousPageClick()\"\r\n                [disabled]=\"loading || pageIndex() == 0\">\r\n            {{'previous' | ng0Translate}}\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"btn btn-outline-primary\"\r\n                (click)=\"onNextPageClick()\"\r\n                [disabled]=\"loading || !_totalPages || (pageIndex() == _totalPages-1)\">\r\n            {{'next' | ng0Translate}}\r\n        </button>\r\n    </div>\r\n\r\n    <span *ngIf=\"_totalPages\">\r\n        {{_formatString( 'dataTablePagination' | ng0Translate, pageIndex()+1, _totalPages) }}\r\n    </span>\r\n</div> -->", styles: [":host{display:flex;flex-direction:column;position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}tr.loading-row{position:absolute;inset:0;background-color:#00000014;transition:background-color 1s;z-index:1000}tr.loading-row td{border:none;height:100%;display:flex;justify-content:center;align-items:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i3.TranslatePipe, name: "ng0Translate" }, { kind: "pipe", type: i3.EnumPipe, name: "ng0Enum" }, { kind: "pipe", type: i3.DatePipe, name: "ng0Date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: TableComponent, isStandalone: true, selector: "ng0-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showPagingControls: { classPropertyName: "showPagingControls", publicName: "showPagingControls", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, showNextPreviousButtons: { classPropertyName: "showNextPreviousButtons", publicName: "showNextPreviousButtons", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPagingInfo: { classPropertyName: "showPagingInfo", publicName: "showPagingInfo", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, loadingCover: { classPropertyName: "loadingCover", publicName: "loadingCover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageIndex: "pageIndexChange", pageSize: "pageSizeChange" }, host: { properties: { "class.ng0-loading": "this.isLoading" } }, queries: [{ propertyName: "_detailRow", first: true, predicate: TableDetailRowDirective, descendants: true }, { propertyName: "_columns", predicate: TableColumnDirective }], exportAs: ["ng0Table"], ngImport: i0, template: "@let $dataResult = _dataResult();\n@let $pageable = pageable();\n@let $pageIndex = pageIndex();\n@let $pageSize = pageSize();\n@let $data = $dataResult?.data;\n@let $anyRecords = $data && $data.length > 0;\n@let $totalRecordsCount = $dataResult?.total;\n@let $firstRecordIndex = $pageable ? ($pageSize * $pageIndex) : 0;\n@let $lastRecordIndex = $data ? $firstRecordIndex + $data.length - 1 : 1;\n@let $isLoading = _dataSource.isLoading();\n@let $isFirstLoad = $dataResult == undefined;\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\n@let $tableLocale = _ls.get()?.definition?.components?.table;\n\n<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\n  <table class=\"table\" [ngClass]=\"tableClass()\">\n    @if (caption()) {\n    <caption>{{caption()}}</caption>\n    }\n\n    @if (showHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    }\n\n    @if (filterable()) {\n    <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n    }\n\n    <tbody>\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\n      <tr class=\"ng0-table-loading-row\">\n        <td [attr.colspan]=\"$columnsCount\">\n          @switch (loadingIndicator()) {\n          @case ('spinner') {\n          <div class=\"text-center\">\n            <div class=\"spinner-border\" role=\"status\"></div>\n          </div>\n          }\n          }\n        </td>\n      </tr>\n      } @else {\n      @if ($data) {\n      @if ($data.length > 0) {\n      <ng-container *ngTemplateOutlet=\"dataRowsTemplate\"></ng-container>\n      } @else {\n      <tr class=\"ng0-table-no-records-row\">\n        <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\n          {{ $tableLocale?.noRecords ?? 'No Records.' }}\n        </td>\n      </tr>\n      }\n      } @else if (_lastError) {\n      <ng-container *ngTemplateOutlet=\"nowDataTemplate\"></ng-container>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\n  <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\n<div class=\"ng0-table-loading-cover text-center\">\n  @if (loadingCover() == 'spinner') {\n  <div class=\"spinner-border\" role=\"status\"></div>\n  }\n</div>\n}\n\n<ng-template #filtersTemplate>\n  <thead>\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th></th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th>\n        @if(col.filterable() && (col.field() || col.filterValue())) {\n\n        <div class=\"input-group\">\n          @switch (col.type()) {\n          @case ('text') {\n          <input [name]=\"'filter-' + col.field\"\n                 type=\"search\"\n                 [maxlength]=\"50\"\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          @case ('number') {\n          <input [name]=\"'datatablecol-' + col.field\"\n                 type=\"search\"\n                 ng0Number\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          }\n\n          <button class=\"btn btn-outline-light\"\n                  style=\"border-color: var(--bs-border-color);\"\n                  cdkOverlayOrigin\n                  #trigger=\"cdkOverlayOrigin\"\n                  (click)=\"_onToggleFilterOperator(col)\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976C16.1903 11.8998 16.5085 11.7206 17.145 11.3624L20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3Z\"\n                    stroke=\"#1C274C\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n\n        <ng-template\n                     cdkConnectedOverlay\n                     [cdkConnectedOverlayOrigin]=\"trigger\"\n                     [cdkConnectedOverlayOpen]=\"col.showFilterOperators()\"\n                     (overlayOutsideClick)=\"col.showFilterOperators.set(false)\"\n                     (detach)=\"col.showFilterOperators.set(false)\">\n          <ul class=\"dropdown-menu show\" animate.enter=\"fade-in\">\n            @for (item of col.getFilterOperators(); track $index) {\n            <li>\n              <button class=\"dropdown-item\" [class.active]=\"item == col.filterOperator()\"\n                      (click)=\"_onSelectFilterOperator(col, item)\">\n                {{_ls.get()?.definition?.data?.logicalOperators?.[item] ?? item }}\n              </button>\n            </li>\n            }\n          </ul>\n        </ng-template>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #headerTemplate>\n  <thead [ngClass]=\"headerClass()\">\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th class=\"row-number text-muted\">#</th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th\n          (click)=\"col.toggleSortDirection(); load()\"\n          [class.sortable]=\"sortable() && col.sortable()\"\n          [ngClass]=\"{ \n            'sort-asc': col.sortDirection() == 'asc', \n            'sort-desc': col.sortDirection() == 'desc',\n            'sort-none': col.sortDirection() == 'none'\n          }\">\n        {{ col.title() }}\n\n        @if(sortable() && col.sortable()) {\n        <svg class=\"ng0-table-sort-icon\"\n             width=\"24\"\n             height=\"24\"\n             viewBox=\"0 0 24 24\" fill=\"none\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M12 7L12 16\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8 13L12 17L16 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRowsTemplate>\n  @for (row of $data; track $index) {\n  <tr [class.table-active]=\"isRowExpanded(row)\">\n    @if (_detailRow) {\n    <td class=\"detail-row-expander\">\n      @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\n      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\n        @if (isRowExpanded(row)) {\n        <i class=\"far fa-minus\"></i>\n        } @else {\n        <i class=\"far fa-plus\"></i>\n        }\n      </button>\n      }\n    </td>\n    }\n\n    @if (showRowNumbers()) {\n    <td class=\"ng0-table-row-number\">\n      {{ $firstRecordIndex + $index + 1}}\n    </td>\n    }\n\n    @for (col of _columns; track $index) {\n    <td\n        [ngClass]=\"col.cellClass()\"\n        [class.shrinked]=\"col.shrink()\"\n        [class.fw-bold]=\"col.bold()\">\n      @if (col.template) {\n      <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row }\">\n      </ng-container>\n      } @else if (col.field()) {\n      @let cellValue = _getCellValue(row, col);\n\n      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\n      {{ col.emptyCellText() }}\n      } @else {\n      @if (col.type()) {\n      @let type = $any(col.type());\n\n      @if (type == \"date\") {\n      {{ cellValue | ng0Date }}\n      } @else if (type == \"number\") {\n      {{ cellValue | number }}\n      } @else if (type == \"currency\") {\n      {{ cellValue | currency }}\n      } @else if (type.enum) {\n      {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\n      } @else if (type.boolean || type == \"boolean\") {\n      {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\n      }@else {\n      {{ cellValue }}\n      }\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n\n  @if (_detailRow && isRowExpanded(row)) {\n  <tr class=\"detail-row\">\n    <td\n        [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\n        class=\"ps-2 pb-4\">\n      <ng-container\n                    *ngTemplateOutlet=\"_detailRow.templateRef; context: { $implicit: row }\"></ng-container>\n    </td>\n  </tr>\n  }\n  }\n</ng-template>\n\n<ng-template #footerTemplate>\n  @if ($pageable && showPagingControls() && $anyRecords && $totalRecordsCount! > 0) {\n  <div class=\"ng0-table-pagination me-2\">\n    <ng0-pagination\n                    class=\"mb-0 d-inline-block\"\n                    [showFirstLastButtons]=\"showFirstLastButtons()\"\n                    [showNextPreviousButtons]=\"showNextPreviousButtons()\"\n                    [totalRecords]=\"$totalRecordsCount!\"\n                    [pageSize]=\"pageSize()\"\n                    [selectedPage]=\"pageIndex()\"\n                    (itemClick)=\"_onPageChange($event)\"\n                    [maxVisiblePages]=\"maxVisiblePages()\">\n      <ng-container ngProjectAs=\"first\">\n        <ng-content select=\"paging-first\">\n          {{ \"first\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"last\">\n        <ng-content select=\"paging-last\">\n          {{ \"last\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"next\">\n        <ng-content select=\"paging-next\">\n          {{ \"next\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"previous\">\n        <ng-content select=\"paging-previous\">\n          {{ \"previous\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n    </ng0-pagination>\n  </div>\n\n  @if (pageSizeOptions()) {\n  <div class=\"ng0-table-paging-options\">\n    <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\n      <option [ngValue]=\"10\" selected>10</option>\n    </select>\n  </div>\n  }\n\n  @if (showPagingInfo()) {\n  <div class=\"ng0-table-paging-info ms-auto\">\n    <ng-content select=\"paging-info\">\n      {{\n      _pagingFormatter({firstRecord: $firstRecordIndex, lastRecord: $lastRecordIndex, totalRecords: $totalRecordsCount!,\n      currentPage: $pageIndex!})\n      }}\n    </ng-content>\n  </div>\n  }\n  }\n</ng-template>\n\n<ng-template #nowDataTemplate>\n  <tr class=\"ng0-table-error-row\">\n    <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\n      <div class=\"d-flex align-items-baseline\">\n        <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\n        <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\n          {{ \"retry\" | ng0Translate }}\n        </button>\n      </div>\n    </td>\n  </tr>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;position:relative}@starting-style{.ng0-table-loading-cover{background-color:#0000}}table{margin-bottom:0;height:100%}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable .ng0-table-sort-icon{transition:transform .2s;opacity:0}th.sortable.sort-none:hover .ng0-table-sort-icon{opacity:.4}th.sortable.sort-asc .ng0-table-sort-icon{transform:rotate(0);opacity:1;color:var(--bs-danger)}th.sortable.sort-desc .ng0-table-sort-icon{transform:rotate(180deg);opacity:1;color:var(--bs-primary)}tbody{position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}.ng0-table-loading-cover{position:absolute;inset:0;background-color:#0000000d;transition:background-color .2s;z-index:1000;display:flex;align-items:center;justify-content:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}.ng0-table-footer{margin-top:.5rem}.fade-in{animation:fade-in .5s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "component", type: PaginationComponent, selector: "ng0-pagination", inputs: ["totalRecords", "pageSize", "selectedPage", "maxVisiblePages", "showNextPreviousButtons", "showFirstLastButtons"], outputs: ["itemClick"], exportAs: ["ng0Pagination"] }, { kind: "directive", type: NumberDirective, selector: "[ng0Number]", inputs: ["minFractionDigits", "maxFractionDigits", "useGrouping", "numberType"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "ng0Translate" }, { kind: "pipe", type: i4.TranslateEnumPipe, name: "ng0TranslateEnum" }, { kind: "pipe", type: i4.DatePipe, name: "ng0Date" }, { kind: "pipe", type: i4.LocalizeBooleanPipe, name: "ng0LocalizeBool" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng0-table', exportAs: 'ng0Table', standalone: true, imports: [
+            args: [{ selector: 'ng0-table', exportAs: 'ng0Table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         LocalizationModule,
-                        TablePagingComponent
-                    ], template: "<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\r\n    <table class=\"table\" [ngClass]=\"tableClass()\">\r\n        @if(caption()) {\r\n        <caption>{{caption()}}</caption>\r\n        }\r\n\r\n        <thead *ngIf=\"showHeader\" [ngClass]=\"headerClass()\">\r\n            <tr>\r\n                <th *ngIf=\"_detailRow\"></th>\r\n                <th *ngIf=\"showRowNumbers()\" class=\"row-number text-muted\">#</th>\r\n                <th *ngFor=\"let col of _columns\">{{col.title}}</th>\r\n            </tr>\r\n        </thead>\r\n        <thead *ngIf=\"filterable()\">\r\n            <tr>\r\n                <th *ngIf=\"_detailRow\"></th>\r\n\r\n                @if(showRowNumbers()) {\r\n                <th></th>\r\n                }\r\n\r\n                <th *ngFor=\"let col of _columns\">\r\n                    @if(col.filterable) {\r\n                    @if(col.type == 'text') {\r\n                    <input [name]=\"'datatablecol-' + col.field\"\r\n                           type=\"text\"\r\n                           [maxlength]=\"50\"\r\n                           class=\"form-control form-control-sm\"\r\n                           [(ngModel)]=\"col.filterValue\"\r\n                           (keydown.enter)=\"reload()\">\r\n                    }@else if(col.type == 'number') {\r\n                    <input [name]=\"'datatablecol-' + col.field\"\r\n                           type=\"number\"\r\n                           class=\"form-control form-control-sm\"\r\n                           [(ngModel)]=\"col.filterValue\"\r\n                           (keydown.enter)=\"reload()\">\r\n                    }\r\n                    }\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <ng-container *ngIf=\"_data && _data.length! > 0\">\r\n                <ng-container *ngFor=\"let row of _data; let i=index\">\r\n                    <tr [class.table-active]=\"isRowExpanded(row)\">\r\n                        <td class=\"detail-row-expander\" *ngIf=\"_detailRow\">\r\n                            <button class=\"btn\" (click)=\"onToggleRowDetailClick(row)\"\r\n                                    *ngIf=\"_detailRow.showCallback == null || _detailRow.showCallback(row)\">\r\n                                <ng-template [ngIf]=\"isRowExpanded(row)\" [ngIfElse]=\"collapse\"><i\r\n                                       class=\"far fa-minus\"></i></ng-template>\r\n                                <ng-template #collapse><i class=\"far fa-plus\"></i> </ng-template>\r\n                            </button>\r\n                        </td>\r\n\r\n                        <td class=\"row-number text-muted\" *ngIf=\"showRowNumbers()\">{{pageSize() * pageIndex() + i + 1}}</td>\r\n\r\n                        <td *ngFor=\"let col of _columns\" [ngClass]=\"col.cellClass\" [class.shrinked]=\"col.shrink\"\r\n                            [class.fw-bold]=\"col.bold\">\r\n                            @if(col.template){\r\n                            <ng-template [ngIf]=\"col.template\">\r\n                                <ng-container\r\n                                              *ngTemplateOutlet=\"col.template; context: {$implicit: row}\"></ng-container>\r\n                            </ng-template>\r\n                            }@else if(col.field){\r\n                            @let cellValue = _getCellValue(row, col);\r\n                            <div\r\n                                 [class.badge]=\"col.badge\"\r\n                                 [class.text-bg-primary]=\"col.badge?.primary && cellValue === col.badge?.primary\"\r\n                                 [class.text-bg-secondary]=\"col.badge?.secondary && cellValue === col.badge?.secondary\"\r\n                                 [class.text-bg-success]=\"col.badge?.success && cellValue === col.badge?.success\"\r\n                                 [class.text-bg-light]=\"col.badge && cellValue !== col.badge.success && cellValue !== col.badge.secondary  && cellValue !== col.badge.success \">\r\n\r\n                                <ng-container *ngIf=\"col.type=='text'\">\r\n                                    {{cellValue}}\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.type=='date'\">\r\n                                    <span class=\"date-time\">{{cellValue | ng0Date}}</span>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.type=='number'\">\r\n                                    {{cellValue | number}}\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.type=='currency'\">\r\n                                    {{cellValue | number}}\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"$any(col?.type)?.enum\">\r\n                                    {{cellValue | ng0Enum:$any(col.type).enum}}\r\n                                </ng-container>\r\n                                <!-- <ng-container *ngIf=\"$any(col?.type)?.boolean\">\r\n                                    {{cellValue | ng0Bool:$any(col.type).boolean}}\r\n                                </ng-container> -->\r\n                                <ng-container *ngIf=\"$any(col?.type)?.currency\">\r\n                                    {{cellValue | currency:$any(col?.type)?.currency}}\r\n                                </ng-container>\r\n\r\n                                <ng-container *ngIf=\"cellValue == null && col.emptyCellText\">\r\n                                    {{col.emptyCellText}}\r\n                                </ng-container>\r\n\r\n\r\n                            </div>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n\r\n                    <tr class=\"detail-row\" *ngIf=\"_detailRow && isRowExpanded(row)\">\r\n                        <td [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\" class=\"ps-2 pb-4\">\r\n                            <ng-container\r\n                                          *ngTemplateOutlet=\"_detailRow.templateRef; context: {$implicit: row}\"></ng-container>\r\n                        </td>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n            </ng-container>\r\n\r\n            <tr *ngIf=\"_data?.length === 0\">\r\n                <td [colSpan]=\"_columns.length + (showRowNumbers() ? 1 : 0)\" class=\"text-center text-muted small p-2\">\r\n                    {{'noRecords' | ng0Translate}}\r\n                </td>\r\n            </tr>\r\n            <tr *ngIf=\"_dataSource.loading\" class=\"loading-row\">\r\n                <td [colSpan]=\"_columns.length + (showRowNumbers() ? 1 : 0)\" class=\"text-center\">\r\n                    <div class=\"spinner-border text-primary\" role=\"status\"></div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<!-- <ng0-table-paging></ng0-table-paging> -->\r\n\r\n<!-- <div class=\"mt-auto\" *ngIf=\"pagination()\">\r\n    <div class=\"btn-group me-2\" role=\"group\">\r\n        <button type=\"button\"\r\n                class=\"btn btn-outline-primary\"\r\n                (click)=\"onPreviousPageClick()\"\r\n                [disabled]=\"loading || pageIndex() == 0\">\r\n            {{'previous' | ng0Translate}}\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"btn btn-outline-primary\"\r\n                (click)=\"onNextPageClick()\"\r\n                [disabled]=\"loading || !_totalPages || (pageIndex() == _totalPages-1)\">\r\n            {{'next' | ng0Translate}}\r\n        </button>\r\n    </div>\r\n\r\n    <span *ngIf=\"_totalPages\">\r\n        {{_formatString( 'dataTablePagination' | ng0Translate, pageIndex()+1, _totalPages) }}\r\n    </span>\r\n</div> -->", styles: [":host{display:flex;flex-direction:column;position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}tr.loading-row{position:absolute;inset:0;background-color:#00000014;transition:background-color 1s;z-index:1000}tr.loading-row td{border:none;height:100%;display:flex;justify-content:center;align-items:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { _columns: [{
+                        PaginationComponent,
+                        NumberDirective,
+                        OverlayModule
+                    ], template: "@let $dataResult = _dataResult();\n@let $pageable = pageable();\n@let $pageIndex = pageIndex();\n@let $pageSize = pageSize();\n@let $data = $dataResult?.data;\n@let $anyRecords = $data && $data.length > 0;\n@let $totalRecordsCount = $dataResult?.total;\n@let $firstRecordIndex = $pageable ? ($pageSize * $pageIndex) : 0;\n@let $lastRecordIndex = $data ? $firstRecordIndex + $data.length - 1 : 1;\n@let $isLoading = _dataSource.isLoading();\n@let $isFirstLoad = $dataResult == undefined;\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\n@let $tableLocale = _ls.get()?.definition?.components?.table;\n\n<div class=\"table-responsive\" [style.height]=\"height()\" [class.table-scrollable]=\"height()! > 0\">\n  <table class=\"table\" [ngClass]=\"tableClass()\">\n    @if (caption()) {\n    <caption>{{caption()}}</caption>\n    }\n\n    @if (showHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    }\n\n    @if (filterable()) {\n    <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n    }\n\n    <tbody>\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\n      <tr class=\"ng0-table-loading-row\">\n        <td [attr.colspan]=\"$columnsCount\">\n          @switch (loadingIndicator()) {\n          @case ('spinner') {\n          <div class=\"text-center\">\n            <div class=\"spinner-border\" role=\"status\"></div>\n          </div>\n          }\n          }\n        </td>\n      </tr>\n      } @else {\n      @if ($data) {\n      @if ($data.length > 0) {\n      <ng-container *ngTemplateOutlet=\"dataRowsTemplate\"></ng-container>\n      } @else {\n      <tr class=\"ng0-table-no-records-row\">\n        <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\n          {{ $tableLocale?.noRecords ?? 'No Records.' }}\n        </td>\n      </tr>\n      }\n      } @else if (_lastError) {\n      <ng-container *ngTemplateOutlet=\"nowDataTemplate\"></ng-container>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\n  <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\n<div class=\"ng0-table-loading-cover text-center\">\n  @if (loadingCover() == 'spinner') {\n  <div class=\"spinner-border\" role=\"status\"></div>\n  }\n</div>\n}\n\n<ng-template #filtersTemplate>\n  <thead>\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th></th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th>\n        @if(col.filterable() && (col.field() || col.filterValue())) {\n\n        <div class=\"input-group\">\n          @switch (col.type()) {\n          @case ('text') {\n          <input [name]=\"'filter-' + col.field\"\n                 type=\"search\"\n                 [maxlength]=\"50\"\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          @case ('number') {\n          <input [name]=\"'datatablecol-' + col.field\"\n                 type=\"search\"\n                 ng0Number\n                 class=\"form-control form-control-sm\"\n                 [(ngModel)]=\"col.filterValue\"\n                 (keydown.enter)=\"load(0)\">\n          }\n          }\n\n          <button class=\"btn btn-outline-light\"\n                  style=\"border-color: var(--bs-border-color);\"\n                  cdkOverlayOrigin\n                  #trigger=\"cdkOverlayOrigin\"\n                  (click)=\"_onToggleFilterOperator(col)\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976C16.1903 11.8998 16.5085 11.7206 17.145 11.3624L20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3Z\"\n                    stroke=\"#1C274C\" stroke-width=\"1.5\" />\n            </svg>\n          </button>\n        </div>\n\n        <ng-template\n                     cdkConnectedOverlay\n                     [cdkConnectedOverlayOrigin]=\"trigger\"\n                     [cdkConnectedOverlayOpen]=\"col.showFilterOperators()\"\n                     (overlayOutsideClick)=\"col.showFilterOperators.set(false)\"\n                     (detach)=\"col.showFilterOperators.set(false)\">\n          <ul class=\"dropdown-menu show\" animate.enter=\"fade-in\">\n            @for (item of col.getFilterOperators(); track $index) {\n            <li>\n              <button class=\"dropdown-item\" [class.active]=\"item == col.filterOperator()\"\n                      (click)=\"_onSelectFilterOperator(col, item)\">\n                {{_ls.get()?.definition?.data?.logicalOperators?.[item] ?? item }}\n              </button>\n            </li>\n            }\n          </ul>\n        </ng-template>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #headerTemplate>\n  <thead [ngClass]=\"headerClass()\">\n    <tr>\n      @if (_detailRow) {\n      <th></th>\n      }\n\n      @if (showRowNumbers()) {\n      <th class=\"row-number text-muted\">#</th>\n      }\n\n      @for (col of _columns; track $index) {\n      <th\n          (click)=\"col.toggleSortDirection(); load()\"\n          [class.sortable]=\"sortable() && col.sortable()\"\n          [ngClass]=\"{ \n            'sort-asc': col.sortDirection() == 'asc', \n            'sort-desc': col.sortDirection() == 'desc',\n            'sort-none': col.sortDirection() == 'none'\n          }\">\n        {{ col.title() }}\n\n        @if(sortable() && col.sortable()) {\n        <svg class=\"ng0-table-sort-icon\"\n             width=\"24\"\n             height=\"24\"\n             viewBox=\"0 0 24 24\" fill=\"none\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M12 7L12 16\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8 13L12 17L16 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRowsTemplate>\n  @for (row of $data; track $index) {\n  <tr [class.table-active]=\"isRowExpanded(row)\">\n    @if (_detailRow) {\n    <td class=\"detail-row-expander\">\n      @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\n      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\n        @if (isRowExpanded(row)) {\n        <i class=\"far fa-minus\"></i>\n        } @else {\n        <i class=\"far fa-plus\"></i>\n        }\n      </button>\n      }\n    </td>\n    }\n\n    @if (showRowNumbers()) {\n    <td class=\"ng0-table-row-number\">\n      {{ $firstRecordIndex + $index + 1}}\n    </td>\n    }\n\n    @for (col of _columns; track $index) {\n    <td\n        [ngClass]=\"col.cellClass()\"\n        [class.shrinked]=\"col.shrink()\"\n        [class.fw-bold]=\"col.bold()\">\n      @if (col.template) {\n      <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row }\">\n      </ng-container>\n      } @else if (col.field()) {\n      @let cellValue = _getCellValue(row, col);\n\n      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\n      {{ col.emptyCellText() }}\n      } @else {\n      @if (col.type()) {\n      @let type = $any(col.type());\n\n      @if (type == \"date\") {\n      {{ cellValue | ng0Date }}\n      } @else if (type == \"number\") {\n      {{ cellValue | number }}\n      } @else if (type == \"currency\") {\n      {{ cellValue | currency }}\n      } @else if (type.enum) {\n      {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\n      } @else if (type.boolean || type == \"boolean\") {\n      {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\n      }@else {\n      {{ cellValue }}\n      }\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n\n  @if (_detailRow && isRowExpanded(row)) {\n  <tr class=\"detail-row\">\n    <td\n        [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\n        class=\"ps-2 pb-4\">\n      <ng-container\n                    *ngTemplateOutlet=\"_detailRow.templateRef; context: { $implicit: row }\"></ng-container>\n    </td>\n  </tr>\n  }\n  }\n</ng-template>\n\n<ng-template #footerTemplate>\n  @if ($pageable && showPagingControls() && $anyRecords && $totalRecordsCount! > 0) {\n  <div class=\"ng0-table-pagination me-2\">\n    <ng0-pagination\n                    class=\"mb-0 d-inline-block\"\n                    [showFirstLastButtons]=\"showFirstLastButtons()\"\n                    [showNextPreviousButtons]=\"showNextPreviousButtons()\"\n                    [totalRecords]=\"$totalRecordsCount!\"\n                    [pageSize]=\"pageSize()\"\n                    [selectedPage]=\"pageIndex()\"\n                    (itemClick)=\"_onPageChange($event)\"\n                    [maxVisiblePages]=\"maxVisiblePages()\">\n      <ng-container ngProjectAs=\"first\">\n        <ng-content select=\"paging-first\">\n          {{ \"first\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"last\">\n        <ng-content select=\"paging-last\">\n          {{ \"last\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"next\">\n        <ng-content select=\"paging-next\">\n          {{ \"next\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n\n      <ng-container ngProjectAs=\"previous\">\n        <ng-content select=\"paging-previous\">\n          {{ \"previous\" | ng0Translate }}\n        </ng-content>\n      </ng-container>\n    </ng0-pagination>\n  </div>\n\n  @if (pageSizeOptions()) {\n  <div class=\"ng0-table-paging-options\">\n    <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\n      <option [ngValue]=\"10\" selected>10</option>\n    </select>\n  </div>\n  }\n\n  @if (showPagingInfo()) {\n  <div class=\"ng0-table-paging-info ms-auto\">\n    <ng-content select=\"paging-info\">\n      {{\n      _pagingFormatter({firstRecord: $firstRecordIndex, lastRecord: $lastRecordIndex, totalRecords: $totalRecordsCount!,\n      currentPage: $pageIndex!})\n      }}\n    </ng-content>\n  </div>\n  }\n  }\n</ng-template>\n\n<ng-template #nowDataTemplate>\n  <tr class=\"ng0-table-error-row\">\n    <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\n      <div class=\"d-flex align-items-baseline\">\n        <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\n        <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\n          {{ \"retry\" | ng0Translate }}\n        </button>\n      </div>\n    </td>\n  </tr>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;position:relative}@starting-style{.ng0-table-loading-cover{background-color:#0000}}table{margin-bottom:0;height:100%}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable .ng0-table-sort-icon{transition:transform .2s;opacity:0}th.sortable.sort-none:hover .ng0-table-sort-icon{opacity:.4}th.sortable.sort-asc .ng0-table-sort-icon{transform:rotate(0);opacity:1;color:var(--bs-danger)}th.sortable.sort-desc .ng0-table-sort-icon{transform:rotate(180deg);opacity:1;color:var(--bs-primary)}tbody{position:relative}td.row-number{width:0}td.shrinked{width:0;white-space:nowrap}.ng0-table-loading-cover{position:absolute;inset:0;background-color:#0000000d;transition:background-color .2s;z-index:1000;display:flex;align-items:center;justify-content:center}.table-scrollable{overflow-y:auto;direction:ltr;scroll-padding:20px}.table-scrollable::-webkit-scrollbar{width:8px}.table-scrollable::-webkit-scrollbar-track{background-color:#00000008}.table-scrollable::-webkit-scrollbar-thumb{background-color:var(--bs-secondary)}.table-scrollable thead th{position:sticky;top:0}.ng0-table-footer{margin-top:.5rem}.fade-in{animation:fade-in .5s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { _columns: [{
                 type: ContentChildren,
                 args: [TableColumnDirective]
             }], _detailRow: [{
                 type: ContentChild,
                 args: [TableDetailRowDirective]
+            }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], autoLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLoad", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showPagingControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagingControls", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], showNextPreviousButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextPreviousButtons", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPagingInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagingInfo", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], headerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerClass", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], loadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIndicator", required: false }] }], loadingCover: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingCover", required: false }] }], isLoading: [{
+                type: HostBinding,
+                args: ['class.ng0-loading']
             }] } });
 
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: TableModule, imports: [TableComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.11", ngImport: i0, type: TableModule, imports: [TableComponent,
             TableColumnDirective,
             TableDetailRowDirective], exports: [TableComponent,
             TableColumnDirective,
             TableDetailRowDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableModule, imports: [TableComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableModule, imports: [TableComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [