@bootkit/ng0 0.0.0-alpha.2 → 0.0.0-alpha.21

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

@@ -0,0 +1,461 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, signal, TemplateRef, ContentChild, Directive, Input, HostBinding, ContentChildren, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { formatString } from '@bootkit/ng0/common';
+import * as i1 from '@bootkit/ng0/localization';
+import { LocalizationModule } from '@bootkit/ng0/localization';
+import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
+import { PaginationComponent } from '@bootkit/ng0/components/pagination';
+import * as i4 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { NumberDirective } from '@bootkit/ng0/form';
+
+class TableColumnDirective {
+    /**
+     * 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;
+    constructor() {
+    }
+    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.2.1", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", 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.2.1", ngImport: i0, type: TableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng0-table-col',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+class TableDetailRowDirective {
+    templateRef;
+    showCallback;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableDetailRowDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: TableDetailRowDirective, isStandalone: true, selector: "[ng0-table-detail-row]", inputs: { showCallback: "showCallback" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableDetailRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ng0-table-detail-row]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { showCallback: [{
+                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 {
+    _ls;
+    _destroyRef;
+    /**
+     * 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(...(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, ...(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, ...(ngDevMode ? [{ debugName: "showRowNumbers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * If true, the table will show the header row.
+     */
+    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.
+     */
+    pageable = input(undefined, ...(ngDevMode ? [{ debugName: "pageable", transform: v => {
+                if (v === undefined || v === null || v === false) {
+                    return undefined;
+                }
+                if (v === true) {
+                    v = {};
+                }
+                v.pageIndex = v.pageIndex ?? 1;
+                v.pageSize = v.pageSize ?? 10;
+                v.maxVisiblePages = v.maxVisiblePages ?? 10;
+                v.showPagingControls = v.showPagingControls ?? true;
+                return v;
+            } }] : [{
+            transform: v => {
+                if (v === undefined || v === null || v === false) {
+                    return undefined;
+                }
+                if (v === true) {
+                    v = {};
+                }
+                v.pageIndex = v.pageIndex ?? 1;
+                v.pageSize = v.pageSize ?? 10;
+                v.maxVisiblePages = v.maxVisiblePages ?? 10;
+                v.showPagingControls = v.showPagingControls ?? true;
+                return v;
+            }
+        }]));
+    /**
+     * If true, the table will support sorting.
+     * This will add a sort icon to each column header.
+     */
+    sortable = input(true, ...(ngDevMode ? [{ debugName: "sortable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The CSS class to apply to the table element.
+     * This can be used to apply custom styles to the table.
+     */
+    tableClass = input(...(ngDevMode ? [undefined, { debugName: "tableClass" }] : []));
+    /**
+     * The CSS class to apply to the header element.
+     */
+    headerClass = input(...(ngDevMode ? [undefined, { debugName: "headerClass" }] : []));
+    /**
+     * The caption of the table.
+     */
+    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, ...(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;
+    _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;
+    _changeSubscription;
+    _dataSource;
+    _pagingFormatter;
+    _lastError;
+    constructor(_ls, _destroyRef) {
+        this._ls = _ls;
+        this._destroyRef = _destroyRef;
+    }
+    ngOnInit() {
+    }
+    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();
+        // });
+        if (this.autoLoad()) {
+            this.load(this.pageable()?.pageIndex);
+        }
+    }
+    /**
+     * Load data for the specified page index (optional).
+     * @param pageIndex The page index to load.
+     */
+    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()) {
+            page = {
+                index: pageIndex || this._lastRequest?.page?.index || 1,
+                size: this._lastRequest?.page?.size || 10,
+                zeroBased: false
+            };
+        }
+        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;
+            }
+        });
+    }
+    /**
+     * Determines if the table is currently loading data.
+     */
+    get isLoading() {
+        return this._dataSource.isLoading;
+    }
+    _getCellValue(row, col) {
+        var subFields = col.field().split('.');
+        let value = row[subFields[0]];
+        for (let i = 1; i < subFields.length; i++) {
+            if (value == null)
+                break;
+            value = value[subFields[i]];
+        }
+        return value;
+    }
+    _onPageChange(pageIndex) {
+        this.load(pageIndex);
+    }
+    _onToggleRowDetailClick(row) {
+        var state = this._rowStates.get(row);
+        if (!state) {
+            this._rowStates.set(row, { expanded: true });
+        }
+        else {
+            state.expanded = !state.expanded;
+        }
+    }
+    isRowExpanded(row) {
+        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.2.1", ngImport: i0, type: TableComponent, deps: [{ token: i1.LocalizationService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", 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 }, 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 } }, 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();\r\n@let $pageable = pageable();\r\n@let $pageIndex = _lastRequest?.page?.index ?? 1;\r\n@let $data = $dataResult?.data;\r\n@let $anyRecords = $data && $data.length > 0;\r\n@let $totalRecordsCount = $dataResult?.total;\r\n@let $firstRecord = $pageable ? ($pageable.pageSize! * ($pageIndex - 1) + 1) : 1;\r\n@let $lastRecord = $data ? $firstRecord + $data.length - 1 : 1;\r\n@let $isLoading = _dataSource.isLoading();\r\n@let $isFirstLoad = $dataResult == undefined;\r\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\r\n@let $tableLocale = _ls.get()?.definition?.components?.table;\r\n\r\n<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    @if (showHeader()) {\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    }\r\n\r\n    @if (filterable()) {\r\n    <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\r\n    }\r\n\r\n    <tbody>\r\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\r\n      <tr class=\"ng0-table-loading-row\">\r\n        <td [attr.colspan]=\"$columnsCount\">\r\n          @switch (loadingIndicator()) {\r\n          @case ('spinner') {\r\n          <div class=\"text-center\">\r\n            <div class=\"spinner-border\" role=\"status\"></div>\r\n          </div>\r\n          }\r\n          }\r\n        </td>\r\n      </tr>\r\n      } @else {\r\n      @if ($data) {\r\n      @if ($data.length > 0) {\r\n      <ng-container *ngTemplateOutlet=\"dataRowsTemplate\"></ng-container>\r\n      } @else {\r\n      <tr class=\"ng0-table-no-records-row\">\r\n        <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\r\n          {{ $tableLocale?.noRecords ?? 'No Records.' }}\r\n        </td>\r\n      </tr>\r\n      }\r\n      } @else if (_lastError) {\r\n      <ng-container *ngTemplateOutlet=\"nowDataTemplate\"></ng-container>\r\n      }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\r\n  <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n</div>\r\n\r\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\r\n<div class=\"ng0-table-loading-cover text-center\">\r\n  @if (loadingCover() == 'spinner') {\r\n  <div class=\"spinner-border\" role=\"status\"></div>\r\n  }\r\n</div>\r\n}\r\n\r\n<ng-template #filtersTemplate>\r\n  <thead>\r\n    <tr>\r\n      @if (_detailRow) {\r\n      <th></th>\r\n      }\r\n\r\n      @if (showRowNumbers()) {\r\n      <th></th>\r\n      }\r\n\r\n      @for (col of _columns; track $index) {\r\n      <th>\r\n        @if(col.filterable() && (col.field() || col.filterValue())) {\r\n\r\n        <div class=\"input-group\">\r\n          @switch (col.type()) {\r\n          @case ('text') {\r\n          <input [name]=\"'filter-' + col.field\"\r\n                 type=\"search\"\r\n                 [maxlength]=\"50\"\r\n                 class=\"form-control form-control-sm\"\r\n                 [(ngModel)]=\"col.filterValue\"\r\n                 (keydown.enter)=\"load(0)\">\r\n          }\r\n          @case ('number') {\r\n          <input [name]=\"'datatablecol-' + col.field\"\r\n                 type=\"search\"\r\n                 ng0Number\r\n                 class=\"form-control form-control-sm\"\r\n                 [(ngModel)]=\"col.filterValue\"\r\n                 (keydown.enter)=\"load(0)\">\r\n          }\r\n          }\r\n\r\n          <button class=\"btn btn-outline-light\"\r\n                  style=\"border-color: var(--bs-border-color);\"\r\n                  cdkOverlayOrigin\r\n                  #trigger=\"cdkOverlayOrigin\"\r\n                  (click)=\"_onToggleFilterOperator(col)\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\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\"\r\n                    stroke=\"#1C274C\" stroke-width=\"1.5\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <ng-template\r\n                     cdkConnectedOverlay\r\n                     [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                     [cdkConnectedOverlayOpen]=\"col.showFilterOperators()\"\r\n                     (overlayOutsideClick)=\"col.showFilterOperators.set(false)\"\r\n                     (detach)=\"col.showFilterOperators.set(false)\">\r\n          <ul class=\"dropdown-menu show\" animate.enter=\"fade-in\">\r\n            @for (item of col.getFilterOperators(); track $index) {\r\n            <li>\r\n              <button class=\"dropdown-item\" [class.active]=\"item == col.filterOperator()\"\r\n                      (click)=\"_onSelectFilterOperator(col, item)\">\r\n                {{_ls.get()?.definition?.data?.logicalOperators?.[item] ?? item }}\r\n              </button>\r\n            </li>\r\n            }\r\n          </ul>\r\n        </ng-template>\r\n        }\r\n      </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate>\r\n  <thead [ngClass]=\"headerClass()\">\r\n    <tr>\r\n      @if (_detailRow) {\r\n      <th></th>\r\n      }\r\n\r\n      @if (showRowNumbers()) {\r\n      <th class=\"row-number text-muted\">#</th>\r\n      }\r\n\r\n      @for (col of _columns; track $index) {\r\n      <th\r\n          (click)=\"col.toggleSortDirection(); load()\"\r\n          [class.sortable]=\"sortable() && col.sortable()\"\r\n          [ngClass]=\"{ \r\n            'sort-asc': col.sortDirection() == 'asc', \r\n            'sort-desc': col.sortDirection() == 'desc',\r\n            'sort-none': col.sortDirection() == 'none'\r\n          }\">\r\n        {{ col.title() }}\r\n\r\n        @if(sortable() && col.sortable()) {\r\n        <svg class=\"ng0-table-sort-icon\"\r\n             width=\"24\"\r\n             height=\"24\"\r\n             viewBox=\"0 0 24 24\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12 7L12 16\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path d=\"M8 13L12 17L16 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n        }\r\n      </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n</ng-template>\r\n\r\n<ng-template #dataRowsTemplate>\r\n  @for (row of $data; track $index) {\r\n  <tr [class.table-active]=\"isRowExpanded(row)\">\r\n    @if (_detailRow) {\r\n    <td class=\"detail-row-expander\">\r\n      @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\r\n      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\r\n        @if (isRowExpanded(row)) {\r\n        <i class=\"far fa-minus\"></i>\r\n        } @else {\r\n        <i class=\"far fa-plus\"></i>\r\n        }\r\n      </button>\r\n      }\r\n    </td>\r\n    }\r\n\r\n    @if (showRowNumbers()) {\r\n    <td class=\"ng0-table-row-number\">\r\n      {{ $firstRecord + $index }}\r\n    </td>\r\n    }\r\n\r\n    @for (col of _columns; track $index) {\r\n    <td\r\n        [ngClass]=\"col.cellClass()\"\r\n        [class.shrinked]=\"col.shrink()\"\r\n        [class.fw-bold]=\"col.bold()\">\r\n      @if (col.template) {\r\n      <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row }\">\r\n      </ng-container>\r\n      } @else if (col.field()) {\r\n      @let cellValue = _getCellValue(row, col);\r\n\r\n      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\r\n      {{ col.emptyCellText() }}\r\n      } @else {\r\n      @if (col.type()) {\r\n      @let type = $any(col.type());\r\n\r\n      @if (type == \"date\") {\r\n      {{ cellValue | ng0Date }}\r\n      } @else if (type == \"number\") {\r\n      {{ cellValue | number }}\r\n      } @else if (type == \"currency\") {\r\n      {{ cellValue | currency }}\r\n      } @else if (type.enum) {\r\n      {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\r\n      } @else if (type.boolean || type == \"boolean\") {\r\n      {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\r\n      }@else {\r\n      {{ cellValue }}\r\n      }\r\n      }\r\n      }\r\n      }\r\n    </td>\r\n    }\r\n  </tr>\r\n\r\n  @if (_detailRow && isRowExpanded(row)) {\r\n  <tr class=\"detail-row\">\r\n    <td\r\n        [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\r\n        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  }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n  @if ($pageable && $pageable.showPagingControls && $anyRecords && $totalRecordsCount! > 0) {\r\n  <div class=\"ng0-table-pagination me-2\">\r\n    <ng0-pagination\r\n                    class=\"mb-0 d-inline-block\"\r\n                    [showFirstLastButtons]=\"$pageable.showFirstLastButtons == true\"\r\n                    [showNextPreviousButtons]=\"$pageable.showNextPreviousButtons == true\"\r\n                    [totalRecords]=\"$totalRecordsCount!\"\r\n                    [pageSize]=\"$pageable.pageSize!\"\r\n                    [selectedPage]=\"$pageIndex\"\r\n                    (itemClick)=\"_onPageChange($event)\"\r\n                    [maxVisiblePages]=\"$pageable.maxVisiblePages!\">\r\n      <ng-container ngProjectAs=\"first\">\r\n        <ng-content select=\"paging-first\">\r\n          {{ \"first\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n\r\n      <ng-container ngProjectAs=\"last\">\r\n        <ng-content select=\"paging-last\">\r\n          {{ \"last\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n\r\n      <ng-container ngProjectAs=\"next\">\r\n        <ng-content select=\"paging-next\">\r\n          {{ \"next\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n\r\n      <ng-container ngProjectAs=\"previous\">\r\n        <ng-content select=\"paging-previous\">\r\n          {{ \"previous\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n    </ng0-pagination>\r\n  </div>\r\n\r\n  @if ($pageable.showPageSizeOptions || $pageable.showPageSizeOptions == undefined) {\r\n  <div class=\"ng0-table-paging-options\">\r\n    <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\r\n      <option [ngValue]=\"10\" selected>10</option>\r\n    </select>\r\n  </div>\r\n  }\r\n\r\n  @if ($pageable.showPagingInfo == undefined || $pageable.showPagingInfo) {\r\n  <div class=\"ng0-table-paging-info ms-auto\">\r\n    <ng-content select=\"paging-info\">\r\n      {{\r\n      _pagingFormatter({firstRecord: $firstRecord, lastRecord: $lastRecord, totalRecords: $totalRecordsCount!,\r\n      currentPage: $pageIndex!})\r\n      }}\r\n    </ng-content>\r\n  </div>\r\n  }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nowDataTemplate>\r\n  <tr class=\"ng0-table-error-row\">\r\n    <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\r\n        <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\r\n          {{ \"retry\" | ng0Translate }}\r\n        </button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\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}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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.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: i4.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: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.TranslatePipe, name: "ng0Translate" }, { kind: "pipe", type: i1.TranslateEnumPipe, name: "ng0TranslateEnum" }, { kind: "pipe", type: i1.DatePipe, name: "ng0Date" }, { kind: "pipe", type: i1.LocalizeBooleanPipe, name: "ng0LocalizeBool" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng0-table', exportAs: 'ng0Table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        LocalizationModule,
+                        PaginationComponent,
+                        NumberDirective,
+                        OverlayModule
+                    ], template: "@let $dataResult = _dataResult();\r\n@let $pageable = pageable();\r\n@let $pageIndex = _lastRequest?.page?.index ?? 1;\r\n@let $data = $dataResult?.data;\r\n@let $anyRecords = $data && $data.length > 0;\r\n@let $totalRecordsCount = $dataResult?.total;\r\n@let $firstRecord = $pageable ? ($pageable.pageSize! * ($pageIndex - 1) + 1) : 1;\r\n@let $lastRecord = $data ? $firstRecord + $data.length - 1 : 1;\r\n@let $isLoading = _dataSource.isLoading();\r\n@let $isFirstLoad = $dataResult == undefined;\r\n@let $columnsCount = _columns.length + (showRowNumbers() ? 1 : 0);\r\n@let $tableLocale = _ls.get()?.definition?.components?.table;\r\n\r\n<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    @if (showHeader()) {\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    }\r\n\r\n    @if (filterable()) {\r\n    <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\r\n    }\r\n\r\n    <tbody>\r\n      @if ($isLoading && $isFirstLoad && loadingIndicator()) {\r\n      <tr class=\"ng0-table-loading-row\">\r\n        <td [attr.colspan]=\"$columnsCount\">\r\n          @switch (loadingIndicator()) {\r\n          @case ('spinner') {\r\n          <div class=\"text-center\">\r\n            <div class=\"spinner-border\" role=\"status\"></div>\r\n          </div>\r\n          }\r\n          }\r\n        </td>\r\n      </tr>\r\n      } @else {\r\n      @if ($data) {\r\n      @if ($data.length > 0) {\r\n      <ng-container *ngTemplateOutlet=\"dataRowsTemplate\"></ng-container>\r\n      } @else {\r\n      <tr class=\"ng0-table-no-records-row\">\r\n        <td [attr.colSpan]=\"$columnsCount\" class=\"text-center p-2\">\r\n          {{ $tableLocale?.noRecords ?? 'No Records.' }}\r\n        </td>\r\n      </tr>\r\n      }\r\n      } @else if (_lastError) {\r\n      <ng-container *ngTemplateOutlet=\"nowDataTemplate\"></ng-container>\r\n      }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<div class=\"ng0-table-footer d-flex align-items-baseline\">\r\n  <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n</div>\r\n\r\n@if ($isLoading && !$isFirstLoad && loadingCover()) {\r\n<div class=\"ng0-table-loading-cover text-center\">\r\n  @if (loadingCover() == 'spinner') {\r\n  <div class=\"spinner-border\" role=\"status\"></div>\r\n  }\r\n</div>\r\n}\r\n\r\n<ng-template #filtersTemplate>\r\n  <thead>\r\n    <tr>\r\n      @if (_detailRow) {\r\n      <th></th>\r\n      }\r\n\r\n      @if (showRowNumbers()) {\r\n      <th></th>\r\n      }\r\n\r\n      @for (col of _columns; track $index) {\r\n      <th>\r\n        @if(col.filterable() && (col.field() || col.filterValue())) {\r\n\r\n        <div class=\"input-group\">\r\n          @switch (col.type()) {\r\n          @case ('text') {\r\n          <input [name]=\"'filter-' + col.field\"\r\n                 type=\"search\"\r\n                 [maxlength]=\"50\"\r\n                 class=\"form-control form-control-sm\"\r\n                 [(ngModel)]=\"col.filterValue\"\r\n                 (keydown.enter)=\"load(0)\">\r\n          }\r\n          @case ('number') {\r\n          <input [name]=\"'datatablecol-' + col.field\"\r\n                 type=\"search\"\r\n                 ng0Number\r\n                 class=\"form-control form-control-sm\"\r\n                 [(ngModel)]=\"col.filterValue\"\r\n                 (keydown.enter)=\"load(0)\">\r\n          }\r\n          }\r\n\r\n          <button class=\"btn btn-outline-light\"\r\n                  style=\"border-color: var(--bs-border-color);\"\r\n                  cdkOverlayOrigin\r\n                  #trigger=\"cdkOverlayOrigin\"\r\n                  (click)=\"_onToggleFilterOperator(col)\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\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\"\r\n                    stroke=\"#1C274C\" stroke-width=\"1.5\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <ng-template\r\n                     cdkConnectedOverlay\r\n                     [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                     [cdkConnectedOverlayOpen]=\"col.showFilterOperators()\"\r\n                     (overlayOutsideClick)=\"col.showFilterOperators.set(false)\"\r\n                     (detach)=\"col.showFilterOperators.set(false)\">\r\n          <ul class=\"dropdown-menu show\" animate.enter=\"fade-in\">\r\n            @for (item of col.getFilterOperators(); track $index) {\r\n            <li>\r\n              <button class=\"dropdown-item\" [class.active]=\"item == col.filterOperator()\"\r\n                      (click)=\"_onSelectFilterOperator(col, item)\">\r\n                {{_ls.get()?.definition?.data?.logicalOperators?.[item] ?? item }}\r\n              </button>\r\n            </li>\r\n            }\r\n          </ul>\r\n        </ng-template>\r\n        }\r\n      </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n</ng-template>\r\n\r\n<ng-template #headerTemplate>\r\n  <thead [ngClass]=\"headerClass()\">\r\n    <tr>\r\n      @if (_detailRow) {\r\n      <th></th>\r\n      }\r\n\r\n      @if (showRowNumbers()) {\r\n      <th class=\"row-number text-muted\">#</th>\r\n      }\r\n\r\n      @for (col of _columns; track $index) {\r\n      <th\r\n          (click)=\"col.toggleSortDirection(); load()\"\r\n          [class.sortable]=\"sortable() && col.sortable()\"\r\n          [ngClass]=\"{ \r\n            'sort-asc': col.sortDirection() == 'asc', \r\n            'sort-desc': col.sortDirection() == 'desc',\r\n            'sort-none': col.sortDirection() == 'none'\r\n          }\">\r\n        {{ col.title() }}\r\n\r\n        @if(sortable() && col.sortable()) {\r\n        <svg class=\"ng0-table-sort-icon\"\r\n             width=\"24\"\r\n             height=\"24\"\r\n             viewBox=\"0 0 24 24\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12 7L12 16\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path d=\"M8 13L12 17L16 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n        }\r\n      </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n</ng-template>\r\n\r\n<ng-template #dataRowsTemplate>\r\n  @for (row of $data; track $index) {\r\n  <tr [class.table-active]=\"isRowExpanded(row)\">\r\n    @if (_detailRow) {\r\n    <td class=\"detail-row-expander\">\r\n      @if (_detailRow.showCallback == null || _detailRow.showCallback(row)) {\r\n      <button class=\"btn\" (click)=\"_onToggleRowDetailClick(row)\">\r\n        @if (isRowExpanded(row)) {\r\n        <i class=\"far fa-minus\"></i>\r\n        } @else {\r\n        <i class=\"far fa-plus\"></i>\r\n        }\r\n      </button>\r\n      }\r\n    </td>\r\n    }\r\n\r\n    @if (showRowNumbers()) {\r\n    <td class=\"ng0-table-row-number\">\r\n      {{ $firstRecord + $index }}\r\n    </td>\r\n    }\r\n\r\n    @for (col of _columns; track $index) {\r\n    <td\r\n        [ngClass]=\"col.cellClass()\"\r\n        [class.shrinked]=\"col.shrink()\"\r\n        [class.fw-bold]=\"col.bold()\">\r\n      @if (col.template) {\r\n      <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row }\">\r\n      </ng-container>\r\n      } @else if (col.field()) {\r\n      @let cellValue = _getCellValue(row, col);\r\n\r\n      @if ((cellValue === null || cellValue === undefined) && col.emptyCellText()) {\r\n      {{ col.emptyCellText() }}\r\n      } @else {\r\n      @if (col.type()) {\r\n      @let type = $any(col.type());\r\n\r\n      @if (type == \"date\") {\r\n      {{ cellValue | ng0Date }}\r\n      } @else if (type == \"number\") {\r\n      {{ cellValue | number }}\r\n      } @else if (type == \"currency\") {\r\n      {{ cellValue | currency }}\r\n      } @else if (type.enum) {\r\n      {{ cellValue | ng0TranslateEnum: type.enum.name : type.enum.fallback }}\r\n      } @else if (type.boolean || type == \"boolean\") {\r\n      {{ cellValue | ng0LocalizeBool: type.boolean.false ?? \"false\" : type.boolean.false ?? \"true\" }}\r\n      }@else {\r\n      {{ cellValue }}\r\n      }\r\n      }\r\n      }\r\n      }\r\n    </td>\r\n    }\r\n  </tr>\r\n\r\n  @if (_detailRow && isRowExpanded(row)) {\r\n  <tr class=\"detail-row\">\r\n    <td\r\n        [attr.colspan]=\"_columns.length + (showRowNumbers() ? 1 : 0) + 1\"\r\n        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  }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n  @if ($pageable && $pageable.showPagingControls && $anyRecords && $totalRecordsCount! > 0) {\r\n  <div class=\"ng0-table-pagination me-2\">\r\n    <ng0-pagination\r\n                    class=\"mb-0 d-inline-block\"\r\n                    [showFirstLastButtons]=\"$pageable.showFirstLastButtons == true\"\r\n                    [showNextPreviousButtons]=\"$pageable.showNextPreviousButtons == true\"\r\n                    [totalRecords]=\"$totalRecordsCount!\"\r\n                    [pageSize]=\"$pageable.pageSize!\"\r\n                    [selectedPage]=\"$pageIndex\"\r\n                    (itemClick)=\"_onPageChange($event)\"\r\n                    [maxVisiblePages]=\"$pageable.maxVisiblePages!\">\r\n      <ng-container ngProjectAs=\"first\">\r\n        <ng-content select=\"paging-first\">\r\n          {{ \"first\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n\r\n      <ng-container ngProjectAs=\"last\">\r\n        <ng-content select=\"paging-last\">\r\n          {{ \"last\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n\r\n      <ng-container ngProjectAs=\"next\">\r\n        <ng-content select=\"paging-next\">\r\n          {{ \"next\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n\r\n      <ng-container ngProjectAs=\"previous\">\r\n        <ng-content select=\"paging-previous\">\r\n          {{ \"previous\" | ng0Translate }}\r\n        </ng-content>\r\n      </ng-container>\r\n    </ng0-pagination>\r\n  </div>\r\n\r\n  @if ($pageable.showPageSizeOptions || $pageable.showPageSizeOptions == undefined) {\r\n  <div class=\"ng0-table-paging-options\">\r\n    <select name=\"pageSizeOptions\" class=\"form-select w-auto d-inline-block\">\r\n      <option [ngValue]=\"10\" selected>10</option>\r\n    </select>\r\n  </div>\r\n  }\r\n\r\n  @if ($pageable.showPagingInfo == undefined || $pageable.showPagingInfo) {\r\n  <div class=\"ng0-table-paging-info ms-auto\">\r\n    <ng-content select=\"paging-info\">\r\n      {{\r\n      _pagingFormatter({firstRecord: $firstRecord, lastRecord: $lastRecord, totalRecords: $totalRecordsCount!,\r\n      currentPage: $pageIndex!})\r\n      }}\r\n    </ng-content>\r\n  </div>\r\n  }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nowDataTemplate>\r\n  <tr class=\"ng0-table-error-row\">\r\n    <td [attr.colSpan]=\"$columnsCount\" class=\"p-2\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <span>{{ $tableLocale?.loadError ?? 'Error loading data.' }} </span>\r\n        <button (click)=\"load()\" class=\"btn btn-warning ms-auto\">\r\n          {{ \"retry\" | ng0Translate }}\r\n        </button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\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}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"] }]
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.DestroyRef }], propDecorators: { _columns: [{
+                type: ContentChildren,
+                args: [TableColumnDirective]
+            }], _detailRow: [{
+                type: ContentChild,
+                args: [TableDetailRowDirective]
+            }], isLoading: [{
+                type: HostBinding,
+                args: ['class.ng0-loading']
+            }] } });
+
+class TableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: TableModule, imports: [TableComponent,
+            TableColumnDirective,
+            TableDetailRowDirective], exports: [TableComponent,
+            TableColumnDirective,
+            TableDetailRowDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableModule, imports: [TableComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TableComponent,
+                        TableColumnDirective,
+                        TableDetailRowDirective,
+                    ],
+                    exports: [
+                        TableComponent,
+                        TableColumnDirective,
+                        TableDetailRowDirective
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TableColumnDirective, TableComponent, TableDetailRowDirective, TableModule };
+//# sourceMappingURL=bootkit-ng0-components-table.mjs.map