@jbeche/ng-datatable 0.2.1

package/fesm2022/jbeche-ng-datatable.mjs

@@ -0,0 +1,1422 @@
+import * as i0 from '@angular/core';
+import { Input, Directive, EventEmitter, Output, Component, ViewChild, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, 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 * as i1$1 from '@angular/platform-browser';
+
+class colDef {
+    isUnique;
+    field;
+    title;
+    value;
+    condition;
+    type; // string|date|number|bool
+    width;
+    minWidth;
+    maxWidth;
+    hide;
+    filter; // column filter
+    search; // global search
+    sort;
+    html;
+    cellRenderer; // [Function, string]
+    headerClass;
+    cellClass;
+}
+class Pager {
+    totalRows;
+    currentPage;
+    pageSize;
+    maxPage;
+    startPage;
+    endPage;
+    stringFormat;
+    pages;
+}
+
+class SlotDirective {
+    templateRef;
+    fieldName;
+    value;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SlotDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SlotDirective, isStandalone: false, selector: "[slot]", inputs: { fieldName: ["slot", "fieldName"], value: ["slotValue", "value"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SlotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                    selector: '[slot]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { fieldName: [{
+                type: Input,
+                args: ['slot']
+            }], value: [{
+                type: Input,
+                args: ['slotValue']
+            }] } });
+
+class ColumnFilterComponent {
+    column;
+    close = new EventEmitter();
+    filterChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
+        document.addEventListener('click', this.closeMethod.bind(this));
+    }
+    ngOnDestroy() {
+        document.removeEventListener('click', this.closeMethod.bind(this));
+    }
+    closeMethod() {
+        this.close.emit();
+    }
+    select(condition) {
+        this.column.condition = condition;
+        if (condition === '') {
+            this.column.value = '';
+        }
+        this.filterChange.emit(this.column);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ColumnFilterComponent, isStandalone: false, selector: "column-filter", inputs: { column: "column" }, outputs: { close: "close", filterChange: "filterChange" }, ngImport: i0, template: `
+        <div class="bh-filter-menu bh-absolute bh-z-[1] bh-bg-white bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1">
+            <div class="bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" (click)="closeMethod(); $event.stopPropagation()">
+                <button type="button" [class.active]="column.condition === ''" (click)="select('')">No filter</button>
+                <ng-container *ngIf="column.type === 'string'">
+                    <button type="button" [class.active]="column.condition === 'contain'" (click)="select('contain')">Contain</button>
+                    <button type="button" [class.active]="column.condition === 'not_contain'" (click)="select('not_contain')">Not contain</button>
+                    <button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
+                    <button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not equal</button>
+                    <button type="button" [class.active]="column.condition === 'start_with'" (click)="select('start_with')">Starts with</button>
+                    <button type="button" [class.active]="column.condition === 'end_with'" (click)="select('end_with')">Ends with</button>
+                </ng-container>
+                <ng-container *ngIf="column.type === 'number'">
+                    <button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
+                    <button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not Equal</button>
+                    <button type="button" [class.active]="column.condition === 'greater_than'" (click)="select('greater_than')">Greater than</button>
+                    <button type="button" [class.active]="column.condition === 'greater_than_equal'" (click)="select('greater_than_equal')">Greater than or equal</button>
+                    <button type="button" [class.active]="column.condition === 'less_than'" (click)="select('less_than')">Less than</button>
+                    <button type="button" [class.active]="column.condition === 'less_than_equal'" (click)="select('less_than_equal')">Less than or equal</button>
+                </ng-container>
+                <ng-container *ngIf="column.type === 'date'">
+                    <button type="button" [ngClass]="{ active: column.condition === 'equal' }" (click)="select('equal')">Equal</button>
+                    <button type="button" [ngClass]="{ active: column.condition === 'not_equal' }" (click)="select('not_equal')">Not equal</button>
+                    <button type="button" [ngClass]="{ active: column.condition === 'greater_than' }" (click)="select('greater_than')">Greater than</button>
+                    <button type="button" [ngClass]="{ active: column.condition === 'less_than' }" (click)="select('less_than')">Less than</button>
+                </ng-container>
+
+                <button type="button" [ngClass]="{ active: column.condition === 'is_null' }" (click)="select('is_null')">Is null</button>
+                <button type="button" [ngClass]="{ active: column.condition === 'is_not_null' }" (click)="select('is_not_null')">Not null</button>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'column-filter',
+                    template: `
+        <div class="bh-filter-menu bh-absolute bh-z-[1] bh-bg-white bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1">
+            <div class="bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" (click)="closeMethod(); $event.stopPropagation()">
+                <button type="button" [class.active]="column.condition === ''" (click)="select('')">No filter</button>
+                <ng-container *ngIf="column.type === 'string'">
+                    <button type="button" [class.active]="column.condition === 'contain'" (click)="select('contain')">Contain</button>
+                    <button type="button" [class.active]="column.condition === 'not_contain'" (click)="select('not_contain')">Not contain</button>
+                    <button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
+                    <button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not equal</button>
+                    <button type="button" [class.active]="column.condition === 'start_with'" (click)="select('start_with')">Starts with</button>
+                    <button type="button" [class.active]="column.condition === 'end_with'" (click)="select('end_with')">Ends with</button>
+                </ng-container>
+                <ng-container *ngIf="column.type === 'number'">
+                    <button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
+                    <button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not Equal</button>
+                    <button type="button" [class.active]="column.condition === 'greater_than'" (click)="select('greater_than')">Greater than</button>
+                    <button type="button" [class.active]="column.condition === 'greater_than_equal'" (click)="select('greater_than_equal')">Greater than or equal</button>
+                    <button type="button" [class.active]="column.condition === 'less_than'" (click)="select('less_than')">Less than</button>
+                    <button type="button" [class.active]="column.condition === 'less_than_equal'" (click)="select('less_than_equal')">Less than or equal</button>
+                </ng-container>
+                <ng-container *ngIf="column.type === 'date'">
+                    <button type="button" [ngClass]="{ active: column.condition === 'equal' }" (click)="select('equal')">Equal</button>
+                    <button type="button" [ngClass]="{ active: column.condition === 'not_equal' }" (click)="select('not_equal')">Not equal</button>
+                    <button type="button" [ngClass]="{ active: column.condition === 'greater_than' }" (click)="select('greater_than')">Greater than</button>
+                    <button type="button" [ngClass]="{ active: column.condition === 'less_than' }" (click)="select('less_than')">Less than</button>
+                </ng-container>
+
+                <button type="button" [ngClass]="{ active: column.condition === 'is_null' }" (click)="select('is_null')">Is null</button>
+                <button type="button" [ngClass]="{ active: column.condition === 'is_not_null' }" (click)="select('is_not_null')">Not null</button>
+            </div>
+        </div>
+    `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { column: [{
+                type: Input
+            }], close: [{
+                type: Output,
+                args: ['close']
+            }], filterChange: [{
+                type: Output,
+                args: ['filterChange']
+            }] } });
+
+class IconCheckComponent {
+    viewContainerRef;
+    template;
+    class;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.createEmbeddedView(this.template);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconCheckComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconCheckComponent, isStandalone: false, selector: "icon-check", inputs: { class: "class" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template #template>
+            <svg [ngClass]="class" version="1.1" viewBox="0 0 17 12">
+                <g fill="none" fill-rule="evenodd">
+                    <g transform="translate(-9 -11)" fill="currentColor" fill-rule="nonzero">
+                        <path
+                            d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z"
+                        />
+                    </g>
+                </g>
+            </svg>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconCheckComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'icon-check',
+                    template: `
+        <ng-template #template>
+            <svg [ngClass]="class" version="1.1" viewBox="0 0 17 12">
+                <g fill="none" fill-rule="evenodd">
+                    <g transform="translate(-9 -11)" fill="currentColor" fill-rule="nonzero">
+                        <path
+                            d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z"
+                        />
+                    </g>
+                </g>
+            </svg>
+        </ng-template>
+    `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { template: [{
+                type: ViewChild,
+                args: ['template', { static: true }]
+            }], class: [{
+                type: Input
+            }] } });
+
+class IconDashComponent {
+    viewContainerRef;
+    template;
+    class;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.createEmbeddedView(this.template);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconDashComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconDashComponent, isStandalone: false, selector: "icon-dash", inputs: { class: "class" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template #template>
+            <svg [ngClass]="class" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconDashComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'icon-dash',
+                    template: `
+        <ng-template #template>
+            <svg [ngClass]="class" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+        </ng-template>
+    `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { template: [{
+                type: ViewChild,
+                args: ['template', { static: true }]
+            }], class: [{
+                type: Input
+            }] } });
+
+class IconFilterComponent {
+    viewContainerRef;
+    template;
+    class;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.createEmbeddedView(this.template);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconFilterComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconFilterComponent, isStandalone: false, selector: "icon-filter", inputs: { class: "class" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template #template>
+            <svg [ngClass]="class" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+            </svg>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'icon-filter',
+                    template: `
+        <ng-template #template>
+            <svg [ngClass]="class" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+            </svg>
+        </ng-template>
+    `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { template: [{
+                type: ViewChild,
+                args: ['template', { static: true }]
+            }], class: [{
+                type: Input
+            }] } });
+
+class ColumnHeaderComponent {
+    viewContainerRef;
+    template;
+    selectedAll;
+    all;
+    isFooter;
+    checkAll;
+    selectAll = new EventEmitter();
+    sortChange = new EventEmitter();
+    filterChange = new EventEmitter();
+    isOpenFilter = null;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.viewContainerRef.createEmbeddedView(this.template);
+        this.checkboxChange();
+    }
+    checkboxChange() {
+        if (this.selectedAll) {
+            this.selectedAll.nativeElement.indeterminate = this.checkAll !== 0 ? !this.checkAll : false;
+            this.selectedAll.nativeElement.checked = this.checkAll;
+        }
+    }
+    toggleFilterMenu(col) {
+        if (col) {
+            if (this.isOpenFilter === col.field) {
+                this.isOpenFilter = null;
+            }
+            else {
+                this.isOpenFilter = col.field;
+            }
+        }
+        else {
+            this.isOpenFilter = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnHeaderComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ColumnHeaderComponent, isStandalone: false, selector: "column-header", inputs: { all: "all", isFooter: "isFooter", checkAll: "checkAll" }, outputs: { selectAll: "selectAll", sortChange: "sortChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }, { propertyName: "selectedAll", first: true, predicate: ["selectedAll"], descendants: true }], ngImport: i0, template: `
+        <ng-template #template>
+            <tr>
+                <th
+                    *ngIf="all.hasCheckbox"
+                    [class]="'bh-w-px'"
+                    [ngClass]="{
+                        'bh-sticky bh-bg-blue-light bh-z-[1]': all.stickyHeader || all.stickyFirstColumn,
+                        'bh-top-0': all.stickyHeader,
+                        'bh-left-0': all.stickyFirstColumn
+                    }"
+                >
+                    <div class="bh-checkbox">
+                        <input #selectedAll type="checkbox" (click)="selectAll.emit(selectedAll.checked); $event.stopPropagation()" />
+                        <div>
+                            <icon-check class="check"></icon-check>
+                            <icon-dash class="intermediate"></icon-dash>
+                        </div>
+                    </div>
+                </th>
+
+                <ng-container *ngFor="let col of all.columns; let j = index">
+                    <th
+                        *ngIf="!col.hide"
+                        [class]="'bh-select-none bh-z-[1]'"
+                        [ngClass]="[
+                            all.sortable && col.sort ? 'bh-cursor-pointer' : '',
+                            j === 0 && all.stickyFirstColumn ? 'bh-sticky bh-left-0 bh-bg-blue-light' : '',
+                            all.hasCheckbox && j === 0 && all.stickyFirstColumn ? 'bh-left-[52px]' : ''
+                        ]"
+                        [style]="{ width: col.width, 'min-width': col.minWidth, 'max-width': col.maxWidth }"
+                    >
+                        <div class="bh-flex bh-items-center" [ngClass]="[col.headerClass ? col.headerClass : '']" (click)="all.sortable && col.sort && sortChange.emit(col.field)">
+                            {{ col.title }}
+                            <span *ngIf="all.sortable && col.sort" class="bh-ml-3 bh-sort bh-flex bh-items-center" [ngClass]="[all.sortColumn, all.sortDirection]">
+                                <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
+                                    <polygon
+                                        points="3.11,6.25 10.89,6.25 7,1.75"
+                                        fill="currentColor"
+                                        class="bh-text-black/20"
+                                        [ngClass]="[all.sortColumn === col.field && all.sortDirection === 'asc' ? '!bh-text-primary' : '']"
+                                    ></polygon>
+                                    <polygon
+                                        points="7,12.25 10.89,7.75 3.11,7.75"
+                                        fill="currentColor"
+                                        class="bh-text-black/20"
+                                        [ngClass]="[all.sortColumn === col.field && all.sortDirection === 'desc' ? '!bh-text-primary' : '']"
+                                    ></polygon>
+                                </svg>
+                            </span>
+                        </div>
+
+                        <ng-container *ngIf="all.columnFilter && !isFooter">
+                            <div *ngIf="col.filter" class="bh-filter bh-relative">
+                                <input *ngIf="col.type === 'string'" [(ngModel)]="col.value" type="text" class="bh-form-control" (keyup)="filterChange.emit()" />
+                                <input *ngIf="col.type === 'number'" [(ngModel)]="col.value" type="number" class="bh-form-control" (keyup)="filterChange.emit()" />
+                                <input *ngIf="col.type === 'date'" [(ngModel)]="col.value" type="date" class="bh-form-control" (change)="filterChange.emit()" />
+                                <select *ngIf="col.type === 'bool'" [(ngModel)]="col.value" class="bh-form-control" (change)="filterChange.emit()" (click)="isOpenFilter = null">
+                                    <option [ngValue]="undefined">All</option>
+                                    <option [ngValue]="true">True</option>
+                                    <option [ngValue]="false">False</option>
+                                </select>
+
+                                <button *ngIf="col.type !== 'bool'" type="button" (click)="toggleFilterMenu(col); $event.stopPropagation()">
+                                    <icon-filter class="bh-w-4"></icon-filter>
+                                </button>
+
+                                <column-filter
+                                    [ngClass]="{ 'bh-hidden': isOpenFilter !== col.field }"
+                                    [column]="col"
+                                    (close)="toggleFilterMenu()"
+                                    (filterChange)="filterChange.emit()"
+                                ></column-filter>
+                            </div>
+                        </ng-container>
+                    </th>
+                </ng-container>
+            </tr>
+        </ng-template>
+    `, isInline: true, dependencies: [{ 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: 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["column"], outputs: ["close", "filterChange"] }, { kind: "component", type: IconCheckComponent, selector: "icon-check", inputs: ["class"] }, { kind: "component", type: IconDashComponent, selector: "icon-dash", inputs: ["class"] }, { kind: "component", type: IconFilterComponent, selector: "icon-filter", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'column-header',
+                    template: `
+        <ng-template #template>
+            <tr>
+                <th
+                    *ngIf="all.hasCheckbox"
+                    [class]="'bh-w-px'"
+                    [ngClass]="{
+                        'bh-sticky bh-bg-blue-light bh-z-[1]': all.stickyHeader || all.stickyFirstColumn,
+                        'bh-top-0': all.stickyHeader,
+                        'bh-left-0': all.stickyFirstColumn
+                    }"
+                >
+                    <div class="bh-checkbox">
+                        <input #selectedAll type="checkbox" (click)="selectAll.emit(selectedAll.checked); $event.stopPropagation()" />
+                        <div>
+                            <icon-check class="check"></icon-check>
+                            <icon-dash class="intermediate"></icon-dash>
+                        </div>
+                    </div>
+                </th>
+
+                <ng-container *ngFor="let col of all.columns; let j = index">
+                    <th
+                        *ngIf="!col.hide"
+                        [class]="'bh-select-none bh-z-[1]'"
+                        [ngClass]="[
+                            all.sortable && col.sort ? 'bh-cursor-pointer' : '',
+                            j === 0 && all.stickyFirstColumn ? 'bh-sticky bh-left-0 bh-bg-blue-light' : '',
+                            all.hasCheckbox && j === 0 && all.stickyFirstColumn ? 'bh-left-[52px]' : ''
+                        ]"
+                        [style]="{ width: col.width, 'min-width': col.minWidth, 'max-width': col.maxWidth }"
+                    >
+                        <div class="bh-flex bh-items-center" [ngClass]="[col.headerClass ? col.headerClass : '']" (click)="all.sortable && col.sort && sortChange.emit(col.field)">
+                            {{ col.title }}
+                            <span *ngIf="all.sortable && col.sort" class="bh-ml-3 bh-sort bh-flex bh-items-center" [ngClass]="[all.sortColumn, all.sortDirection]">
+                                <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
+                                    <polygon
+                                        points="3.11,6.25 10.89,6.25 7,1.75"
+                                        fill="currentColor"
+                                        class="bh-text-black/20"
+                                        [ngClass]="[all.sortColumn === col.field && all.sortDirection === 'asc' ? '!bh-text-primary' : '']"
+                                    ></polygon>
+                                    <polygon
+                                        points="7,12.25 10.89,7.75 3.11,7.75"
+                                        fill="currentColor"
+                                        class="bh-text-black/20"
+                                        [ngClass]="[all.sortColumn === col.field && all.sortDirection === 'desc' ? '!bh-text-primary' : '']"
+                                    ></polygon>
+                                </svg>
+                            </span>
+                        </div>
+
+                        <ng-container *ngIf="all.columnFilter && !isFooter">
+                            <div *ngIf="col.filter" class="bh-filter bh-relative">
+                                <input *ngIf="col.type === 'string'" [(ngModel)]="col.value" type="text" class="bh-form-control" (keyup)="filterChange.emit()" />
+                                <input *ngIf="col.type === 'number'" [(ngModel)]="col.value" type="number" class="bh-form-control" (keyup)="filterChange.emit()" />
+                                <input *ngIf="col.type === 'date'" [(ngModel)]="col.value" type="date" class="bh-form-control" (change)="filterChange.emit()" />
+                                <select *ngIf="col.type === 'bool'" [(ngModel)]="col.value" class="bh-form-control" (change)="filterChange.emit()" (click)="isOpenFilter = null">
+                                    <option [ngValue]="undefined">All</option>
+                                    <option [ngValue]="true">True</option>
+                                    <option [ngValue]="false">False</option>
+                                </select>
+
+                                <button *ngIf="col.type !== 'bool'" type="button" (click)="toggleFilterMenu(col); $event.stopPropagation()">
+                                    <icon-filter class="bh-w-4"></icon-filter>
+                                </button>
+
+                                <column-filter
+                                    [ngClass]="{ 'bh-hidden': isOpenFilter !== col.field }"
+                                    [column]="col"
+                                    (close)="toggleFilterMenu()"
+                                    (filterChange)="filterChange.emit()"
+                                ></column-filter>
+                            </div>
+                        </ng-container>
+                    </th>
+                </ng-container>
+            </tr>
+        </ng-template>
+    `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { template: [{
+                type: ViewChild,
+                args: ['template', { static: true }]
+            }], selectedAll: [{
+                type: ViewChild,
+                args: ['selectedAll']
+            }], all: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], checkAll: [{
+                type: Input
+            }], selectAll: [{
+                type: Output,
+                args: ['selectAll']
+            }], sortChange: [{
+                type: Output,
+                args: ['sortChange']
+            }], filterChange: [{
+                type: Output,
+                args: ['filterChange']
+            }] } });
+
+class IconLoaderComponent {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconLoaderComponent, isStandalone: false, selector: "icon-loader", ngImport: i0, template: `
+        <svg width="84" height="84" viewBox="0 0 24 24" class="bh-loader bh-text-primary">
+            <circle cx="18" cy="12" r="0" fill="currentColor">
+                <animate
+                    attributeName="r"
+                    begin=".67"
+                    calcMode="spline"
+                    dur="1.5s"
+                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
+                    repeatCount="indefinite"
+                    values="0;2;0;0"
+                />
+            </circle>
+            <circle cx="12" cy="12" r="0" fill="currentColor">
+                <animate
+                    attributeName="r"
+                    begin=".33"
+                    calcMode="spline"
+                    dur="1.5s"
+                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
+                    repeatCount="indefinite"
+                    values="0;2;0;0"
+                />
+            </circle>
+            <circle cx="6" cy="12" r="0" fill="currentColor">
+                <animate
+                    attributeName="r"
+                    begin="0"
+                    calcMode="spline"
+                    dur="1.5s"
+                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
+                    repeatCount="indefinite"
+                    values="0;2;0;0"
+                />
+            </circle>
+        </svg>
+    `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: 'icon-loader',
+                    template: `
+        <svg width="84" height="84" viewBox="0 0 24 24" class="bh-loader bh-text-primary">
+            <circle cx="18" cy="12" r="0" fill="currentColor">
+                <animate
+                    attributeName="r"
+                    begin=".67"
+                    calcMode="spline"
+                    dur="1.5s"
+                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
+                    repeatCount="indefinite"
+                    values="0;2;0;0"
+                />
+            </circle>
+            <circle cx="12" cy="12" r="0" fill="currentColor">
+                <animate
+                    attributeName="r"
+                    begin=".33"
+                    calcMode="spline"
+                    dur="1.5s"
+                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
+                    repeatCount="indefinite"
+                    values="0;2;0;0"
+                />
+            </circle>
+            <circle cx="6" cy="12" r="0" fill="currentColor">
+                <animate
+                    attributeName="r"
+                    begin="0"
+                    calcMode="spline"
+                    dur="1.5s"
+                    keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
+                    repeatCount="indefinite"
+                    values="0;2;0;0"
+                />
+            </circle>
+        </svg>
+    `,
+                }]
+        }], ctorParameters: () => [] });
+
+class NgDataTableComponent {
+    sanitizer;
+    // props
+    loading = false;
+    isServerMode = false;
+    skin = 'bh-table-striped bh-table-hover';
+    totalRows = 0;
+    rows = [];
+    columns = [];
+    hasCheckbox = false;
+    search = '';
+    page = 1;
+    pageSize = 10;
+    pageSizeOptions = [10, 20, 30, 50, 100];
+    showPageSize = true;
+    rowClass = '';
+    cellClass = '';
+    sortable = false;
+    sortColumn = 'id';
+    sortDirection = 'asc';
+    columnFilter = false;
+    pagination = true;
+    showNumbers = true;
+    showNumbersCount = 5;
+    showFirstPage = true;
+    showLastPage = true;
+    firstArrow = '';
+    lastArrow = '';
+    nextArrow = '';
+    previousArrow = '';
+    paginationInfo = 'Showing {0} to {1} of {2} entries';
+    noDataContent = 'No data available';
+    stickyHeader = false;
+    height = '500px';
+    stickyFirstColumn = false;
+    cloneHeaderInFooter = false;
+    selectRowOnClick = false;
+    showFooterRow = false;
+    // events
+    changeServer = new EventEmitter();
+    sortChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    rowSelect = new EventEmitter();
+    filterChange = new EventEmitter();
+    rowClick = new EventEmitter();
+    rowDBClick = new EventEmitter();
+    // variables
+    filterItems = [];
+    currentPage = this.page;
+    currentPageSize = this.pagination ? this.pageSize : this.rows.length;
+    oldPageSize = this.pageSize;
+    currentSortColumn = this.sortColumn;
+    oldSortColumn = this.sortColumn;
+    currentSortDirection = this.sortDirection;
+    oldSortDirection = this.sortDirection;
+    filterRowCount = this.totalRows;
+    selectedAll = null;
+    currentLoader = this.loading;
+    currentSearch = this.search;
+    oldColumns;
+    uniqueKey = '';
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    ngOnInit() {
+        this.initDeafultValues();
+        this.changeRows();
+    }
+    ngOnChanges(changes) {
+        // watch loading
+        if (changes['loading'] && !changes['loading'].firstChange) {
+            this.currentLoader = this.loading;
+        }
+        // watch rows and columns
+        if ((changes['rows'] && !changes['rows'].firstChange) || (changes['columns'] && !changes['columns'].firstChange)) {
+            if (!this.isServerMode) {
+                this.currentPage = 1;
+                this.oldColumns = this.noReact(this.columns);
+            }
+            this.changeRows();
+        }
+        // watch page
+        if (!this.isServerMode) {
+            if (changes['page'] && !changes['page'].firstChange) {
+                this.movePage(this.page);
+            }
+        }
+        // watch pagesize
+        if (changes['pageSize'] && !changes['pageSize'].firstChange) {
+            this.currentPageSize = this.pagination ? this.pageSize : this.rows.length;
+            if (!this.isServerMode) {
+                this.changePageSize();
+            }
+        }
+        // watch search
+        if (changes['search'] && !changes['search'].firstChange) {
+            this.currentSearch = this.search;
+            this.changeSearch();
+        }
+        // watch sort column and direction
+        if (!this.isServerMode) {
+            if ((changes['sortColumn'] && !changes['sortColumn'].firstChange) || (changes['sortDirection'] && !changes['sortDirection'].firstChange)) {
+                this.sortChangeMethod(this.sortColumn, this.sortDirection);
+            }
+        }
+    }
+    initDeafultValues() {
+        this.currentLoader = this.loading;
+        this.currentSearch = this.search;
+        this.currentSortColumn = this.sortColumn;
+        this.currentSortDirection = this.sortDirection;
+        this.filterRowCount = this.totalRows;
+        this.currentPage = this.page;
+        if (this.pagination) {
+            const exists = this.pageSizeOptions.find((d) => d === this.pageSize);
+            this.currentPageSize = exists ? this.pageSize : 10;
+        }
+        else {
+            this.currentPageSize = this.rows.length;
+        }
+        this.oldPageSize = this.pageSize;
+        this.oldSortColumn = this.sortColumn;
+        this.oldSortDirection = this.sortDirection;
+        // set default columns values
+        for (const item of this.columns || []) {
+            const type = item.type?.toLowerCase() || 'string';
+            item.type = type;
+            item.isUnique = item.isUnique !== undefined ? item.isUnique : false;
+            item.hide = item.hide !== undefined ? item.hide : false;
+            item.filter = item.filter !== undefined ? item.filter : true;
+            item.search = item.search !== undefined ? item.search : true;
+            item.sort = item.sort !== undefined ? item.sort : true;
+            item.html = item.html !== undefined ? item.html : false;
+            item.condition = !type || type === 'string' ? 'contain' : 'equal';
+        }
+        this.oldColumns = this.noReact(this.columns);
+        this.setUniqueKey();
+    }
+    props;
+    get getProps() {
+        return {
+            loading: this.currentLoader,
+            isServerMode: this.isServerMode,
+            skin: this.skin,
+            totalRows: this.filterRowCount,
+            rows: this.rows,
+            columns: this.columns,
+            hasCheckbox: this.hasCheckbox,
+            search: this.currentSearch,
+            page: this.currentPage,
+            pageSize: this.currentPageSize,
+            pageSizeOptions: this.pageSizeOptions,
+            showPageSize: this.showPageSize,
+            rowClass: this.rowClass,
+            cellClass: this.cellClass,
+            sortable: this.sortable,
+            sortColumn: this.currentSortColumn,
+            sortDirection: this.currentSortDirection,
+            columnFilter: this.columnFilter,
+            pagination: this.pagination,
+            showNumbers: this.showNumbers,
+            showNumbersCount: this.showNumbersCount,
+            showFirstPage: this.showFirstPage,
+            showLastPage: this.showLastPage,
+            firstArrow: this.firstArrow,
+            lastArrow: this.lastArrow,
+            nextArrow: this.nextArrow,
+            previousArrow: this.previousArrow,
+            paginationInfo: this.paginationInfo,
+            noDataContent: this.noDataContent,
+            stickyHeader: this.stickyHeader,
+            height: this.height,
+            stickyFirstColumn: this.stickyFirstColumn,
+            cloneHeaderInFooter: this.cloneHeaderInFooter,
+            selectRowOnClick: this.selectRowOnClick,
+            showFooterRow: this.showFooterRow,
+        };
+    }
+    isFunction(value) {
+        return typeof value === 'function';
+    }
+    stringFormat() {
+        const args = [this.filterRowCount ? this.offset() : 0, this.limit(), this.filterRowCount];
+        return this.paginationInfo.replace(/{(\d+)}/g, (match, number) => {
+            return typeof args[number] != 'undefined' ? args[number] : match;
+        });
+    }
+    setUniqueKey() {
+        const col = this.columns.find((d) => d.isUnique);
+        this.uniqueKey = col?.field || '';
+    }
+    maxPage() {
+        const totalPages = this.currentPageSize < 1 ? 1 : Math.ceil(this.filterRowCount / this.currentPageSize);
+        return Math.max(totalPages || 0, 1);
+    }
+    offset() {
+        return (this.currentPage - 1) * this.currentPageSize + 1;
+    }
+    limit() {
+        const limit = this.currentPage * this.currentPageSize;
+        return this.filterRowCount >= limit ? limit : this.filterRowCount;
+    }
+    pager = new Pager();
+    getPager() {
+        // total pages
+        let totalPages = this.maxPage();
+        // pages
+        let startPage, endPage;
+        let isMaxSized = typeof this.showNumbersCount !== 'undefined' && this.showNumbersCount < totalPages;
+        // recompute if maxSize
+        if (isMaxSized) {
+            // Current page is displayed in the middle of the visible ones
+            startPage = Math.max(this.currentPage - Math.floor(this.showNumbersCount / 2), 1);
+            endPage = startPage + this.showNumbersCount - 1;
+            // Adjust if limit is exceeded
+            if (endPage > totalPages) {
+                endPage = totalPages;
+                startPage = endPage - this.showNumbersCount + 1;
+            }
+        }
+        else {
+            startPage = 1;
+            endPage = totalPages;
+        }
+        const pages = Array.from(Array(endPage + 1 - startPage).keys()).map((i) => startPage + i);
+        return {
+            totalRows: this.isServerMode ? this.totalRows : this.filterItems.length,
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+            maxPage: totalPages,
+            startPage: startPage,
+            endPage: endPage,
+            stringFormat: this.stringFormat(),
+            pages: pages,
+        };
+    }
+    setPager() {
+        this.pager = this.getPager();
+    }
+    filterRows() {
+        let result = [];
+        let rows = this.rows || [];
+        if (this.isServerMode) {
+            this.filterRowCount = this.totalRows || 0;
+            result = rows;
+        }
+        else {
+            this.columns?.forEach((d) => {
+                if (d.filter && ((d.value !== undefined && d.value !== null && d.value !== '') || d.condition === 'is_null' || d.condition === 'is_not_null')) {
+                    // string filters
+                    if (d.type === 'string') {
+                        if (d.value && !d.condition) {
+                            d.condition = 'contain';
+                        }
+                        if (d.condition === 'contain') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field)?.toString().toLowerCase().includes(d.value.toLowerCase());
+                            });
+                        }
+                        else if (d.condition === 'not_contain') {
+                            rows = rows.filter((item) => {
+                                return !this.cellValue(item, d.field)?.toString().toLowerCase().includes(d.value.toLowerCase());
+                            });
+                        }
+                        else if (d.condition === 'equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field)?.toString().toLowerCase() === d.value.toLowerCase();
+                            });
+                        }
+                        else if (d.condition === 'not_equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field)?.toString().toLowerCase() !== d.value.toLowerCase();
+                            });
+                        }
+                        else if (d.condition === 'start_with') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field)?.toString().toLowerCase().indexOf(d.value.toLowerCase()) === 0;
+                            });
+                        }
+                        else if (d.condition === 'end_with') {
+                            rows = rows.filter((item) => {
+                                return (this.cellValue(item, d.field)
+                                    ?.toString()
+                                    .toLowerCase()
+                                    .substr(d.value.length * -1) === d.value.toLowerCase());
+                            });
+                        }
+                    }
+                    // number filters
+                    else if (d.type === 'number') {
+                        if (d.value && !d.condition) {
+                            d.condition = 'equal';
+                        }
+                        if (d.condition === 'equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && parseFloat(this.cellValue(item, d.field)) === parseFloat(d.value);
+                            });
+                        }
+                        else if (d.condition === 'not_equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && parseFloat(this.cellValue(item, d.field)) !== parseFloat(d.value);
+                            });
+                        }
+                        else if (d.condition === 'greater_than') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && parseFloat(this.cellValue(item, d.field)) > parseFloat(d.value);
+                            });
+                        }
+                        else if (d.condition === 'greater_than_equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && parseFloat(this.cellValue(item, d.field)) >= parseFloat(d.value);
+                            });
+                        }
+                        else if (d.condition === 'less_than') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && parseFloat(this.cellValue(item, d.field)) < parseFloat(d.value);
+                            });
+                        }
+                        else if (d.condition === 'less_than_equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && parseFloat(this.cellValue(item, d.field)) <= parseFloat(d.value);
+                            });
+                        }
+                    }
+                    // date filters
+                    if (d.type === 'date') {
+                        if (d.value && !d.condition) {
+                            d.condition = 'equal';
+                        }
+                        if (d.condition === 'equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && this.dateFormat(this.cellValue(item, d.field)) === d.value;
+                            });
+                        }
+                        else if (d.condition === 'not_equal') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && this.dateFormat(this.cellValue(item, d.field)) !== d.value;
+                            });
+                        }
+                        else if (d.condition === 'greater_than') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && this.dateFormat(this.cellValue(item, d.field)) > d.value;
+                            });
+                        }
+                        else if (d.condition === 'less_than') {
+                            rows = rows.filter((item) => {
+                                return this.cellValue(item, d.field) && this.dateFormat(this.cellValue(item, d.field)) < d.value;
+                            });
+                        }
+                    }
+                    // boolean filters
+                    else if (d.type === 'bool') {
+                        rows = rows.filter((item) => {
+                            return this.cellValue(item, d.field) === d.value;
+                        });
+                    }
+                    if (d.condition === 'is_null') {
+                        rows = rows.filter((item) => {
+                            return this.cellValue(item, d.field) == null || this.cellValue(item, d.field) === '';
+                        });
+                        d.value = '';
+                    }
+                    else if (d.condition === 'is_not_null') {
+                        d.value = '';
+                        rows = rows.filter((item) => {
+                            return this.cellValue(item, d.field);
+                        });
+                    }
+                }
+            });
+            if (this.currentSearch && rows.length) {
+                let final = [];
+                const keys = (this.columns || [])
+                    .filter((d) => d.search && !d.hide)
+                    .map((d) => {
+                    return d.field;
+                });
+                for (let j = 0; j < rows.length; j++) {
+                    for (let i = 0; i < keys.length; i++) {
+                        if (this.cellValue(rows[j], keys[i])?.toString().toLowerCase().includes(this.currentSearch.toLowerCase())) {
+                            final.push(rows[j]);
+                            break;
+                        }
+                    }
+                }
+                rows = final;
+            }
+            // sort rows
+            const collator = new Intl.Collator(undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            });
+            const sortOrder = this.currentSortDirection === 'desc' ? -1 : 1;
+            rows.sort((a, b) => {
+                const valA = this.currentSortColumn?.split('.').reduce((obj, key) => obj?.[key], a);
+                const valB = this.currentSortColumn?.split('.').reduce((obj, key) => obj?.[key], b);
+                return collator.compare(valA, valB) * sortOrder;
+            });
+            this.filterRowCount = rows.length || 0;
+            result = rows.slice(this.offset() - 1, this.limit());
+        }
+        this.filterItems = result || [];
+        this.setPager();
+    }
+    // page change
+    movePage(page = 1) {
+        if (this.currentLoader || page < 1 || page > this.maxPage()) {
+            return;
+        }
+        this.currentPage = page;
+        this.clearSelectedRows();
+        if (this.isServerMode) {
+            this.changeForServer('page');
+        }
+        else {
+            this.filterRows();
+            this.pageChange.emit(this.currentPage);
+        }
+    }
+    // row update
+    changeRows() {
+        this.clearSelectedRows();
+        this.filterRows();
+    }
+    // pagesize changed
+    changePageSize() {
+        this.currentPage = 1;
+        this.clearSelectedRows();
+        if (this.isServerMode) {
+            this.changeForServer('pagesize', true);
+        }
+        else {
+            this.filterRows();
+            this.pageSizeChange.emit(this.currentPageSize);
+        }
+    }
+    // sorting
+    sortChangeMethod(field, dir = '') {
+        let direction = dir || 'asc';
+        if (field === this.currentSortColumn) {
+            if (this.currentSortDirection === 'asc') {
+                direction = 'desc';
+            }
+        }
+        const offset = (this.currentPage - 1) * this.currentPageSize;
+        const limit = this.currentPageSize;
+        this.currentSortColumn = field;
+        this.currentSortDirection = direction;
+        this.clearSelectedRows();
+        if (this.isServerMode) {
+            this.changeForServer('sort');
+        }
+        else {
+            this.filterRows();
+            this.sortChange.emit({ offset, limit, field, direction });
+        }
+    }
+    // checkboax
+    header1;
+    header2;
+    checkboxChange() {
+        this.checkIfAllSelected();
+        const rows = this.getSelectedRows();
+        this.rowSelect.emit(rows);
+    }
+    selectAll(checked, isAll = false) {
+        this.filterItems.map((d) => (d.selected = checked));
+        if (isAll) {
+            this.checkboxChange();
+        }
+        else {
+            this.checkIfAllSelected();
+        }
+    }
+    checkIfAllSelected() {
+        const cnt = this.filterItems.filter((d) => d.selected);
+        this.selectedAll = cnt.length && cnt.length === this.filterItems.length;
+        setTimeout(() => {
+            this.header1?.checkboxChange();
+            if (this.cloneHeaderInFooter) {
+                this.header2?.checkboxChange();
+            }
+        });
+    }
+    // columns filter
+    filterChangeMethod() {
+        this.currentPage = 1;
+        this.clearSelectedRows();
+        if (this.isServerMode) {
+            this.changeForServer('filter', true);
+        }
+        else {
+            this.filterRows();
+            this.filterChange.emit(this.columns);
+        }
+    }
+    // search
+    changeSearch() {
+        this.currentPage = 1;
+        this.clearSelectedRows();
+        if (this.isServerMode) {
+            this.changeForServer('search', true);
+        }
+        else {
+            this.filterRows();
+            this.searchChange.emit(this.currentSearch);
+        }
+    }
+    cellValue(item, field = '') {
+        return field?.split('.').reduce((obj, key) => obj?.[key], item);
+    }
+    dateFormat(date) {
+        try {
+            if (!date) {
+                return '';
+            }
+            const dt = new Date(date);
+            const day = dt.getDate();
+            const month = dt.getMonth() + 1;
+            const year = dt.getFullYear();
+            return year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
+        }
+        catch { }
+        return '';
+    }
+    //row click
+    timer = null;
+    delay = 230;
+    onRowClick(item, index) {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            if (this.selectRowOnClick) {
+                if (this.isRowSelected(index)) {
+                    this.unselectRow(index);
+                }
+                else {
+                    this.selectRow(index);
+                }
+                this.checkboxChange();
+            }
+            this.rowClick.emit(item);
+        }, this.delay);
+    }
+    onRowDoubleClick(item) {
+        clearTimeout(this.timer);
+        this.rowDBClick.emit(item);
+    }
+    // emit change event for server side pagination
+    changeForServer(changeType, isResetPage = false) {
+        if (this.isServerMode) {
+            if (changeType === 'page') {
+                this.setPager();
+            }
+            this.setDefaultCondition();
+            const res = {
+                current_page: Number(isResetPage ? 1 : this.currentPage),
+                pagesize: Number(this.currentPageSize),
+                offset: Number((this.currentPage - 1) * this.currentPageSize),
+                sort_column: this.currentSortColumn,
+                sort_direction: this.currentSortDirection,
+                search: this.currentSearch,
+                column_filters: this.columns,
+                change_type: changeType,
+            };
+            this.changeServer.emit(res);
+        }
+    }
+    // set default conditions when values exists and condition empty
+    setDefaultCondition() {
+        for (let i = 0; i < this.columns.length; i++) {
+            let d = this.columns[i];
+            if (d.filter && ((d.value !== undefined && d.value !== null && d.value !== '') || d.condition === 'is_null' || d.condition === 'is_not_null')) {
+                if (d.type === 'string' && d.value && !d.condition) {
+                    d.condition = 'contain';
+                }
+                if (d.type === 'number' && d.value && !d.condition) {
+                    d.condition = 'equal';
+                }
+                if (d.type === 'date' && d.value && !d.condition) {
+                    d.condition = 'equal';
+                }
+            }
+        }
+    }
+    // methods
+    reset() {
+        this.columns = this.noReact(this.oldColumns);
+        this.currentSearch = '';
+        this.currentPage = 1;
+        this.currentPageSize = this.oldPageSize;
+        this.currentSortColumn = this.oldSortColumn;
+        this.currentSortDirection = this.oldSortDirection;
+        this.clearSelectedRows();
+        if (this.isServerMode) {
+            this.changeForServer('reset', true);
+        }
+        else {
+            this.filterRows();
+        }
+    }
+    getSelectedRows() {
+        return this.filterItems.filter((d) => d.selected);
+    }
+    getColumnFilters() {
+        return this.columns;
+    }
+    clearSelectedRows() {
+        if (this.filterItems) {
+            this.selectAll(false);
+        }
+    }
+    selectRow(index) {
+        if (!this.isRowSelected(index)) {
+            const rows = this.filterItems.find((d, i) => i === index);
+            if (rows) {
+                rows.selected = true;
+            }
+        }
+    }
+    unselectRow(index) {
+        if (this.isRowSelected(index)) {
+            const rows = this.filterItems.find((d, i) => i === index);
+            rows.selected = false;
+        }
+    }
+    isRowSelected(index) {
+        const rows = this.filterItems.find((d, i) => i === index);
+        if (rows) {
+            return rows.selected;
+        }
+        return false;
+    }
+    // trackby
+    trackFilterItems(index, item) {
+        return this.uniqueKey ? item[this.uniqueKey] : (this.currentPage - 1) * this.pageSize + index;
+    }
+    // slots
+    slots;
+    defaultTemplate;
+    slotsMap = new Map();
+    ngAfterContentInit() {
+        this.slots.forEach((template) => {
+            const fieldName = template.fieldName;
+            if (fieldName) {
+                this.slotsMap.set(fieldName, template.templateRef);
+            }
+        });
+    }
+    hasSlot(fieldName = '') {
+        return this.slotsMap.has(fieldName);
+    }
+    getSlot(fieldName = '') {
+        return this.slotsMap.get(fieldName) || this.defaultTemplate;
+    }
+    // Sanitize and trust the HTML content
+    sanitizeHtml(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    noReact(value) {
+        return JSON.parse(JSON.stringify(value));
+    }
+    getRange(size) {
+        return Array.from({ length: size }, (_, index) => index + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NgDataTableComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: NgDataTableComponent, isStandalone: false, selector: "ng-datatable", inputs: { loading: "loading", isServerMode: "isServerMode", skin: "skin", totalRows: "totalRows", rows: "rows", columns: "columns", hasCheckbox: "hasCheckbox", search: "search", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", showPageSize: "showPageSize", rowClass: "rowClass", cellClass: "cellClass", sortable: "sortable", sortColumn: "sortColumn", sortDirection: "sortDirection", columnFilter: "columnFilter", pagination: "pagination", showNumbers: "showNumbers", showNumbersCount: "showNumbersCount", showFirstPage: "showFirstPage", showLastPage: "showLastPage", firstArrow: "firstArrow", lastArrow: "lastArrow", nextArrow: "nextArrow", previousArrow: "previousArrow", paginationInfo: "paginationInfo", noDataContent: "noDataContent", stickyHeader: "stickyHeader", height: "height", stickyFirstColumn: "stickyFirstColumn", cloneHeaderInFooter: "cloneHeaderInFooter", selectRowOnClick: "selectRowOnClick", showFooterRow: "showFooterRow" }, outputs: { changeServer: "changeServer", sortChange: "sortChange", searchChange: "searchChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", rowSelect: "rowSelect", filterChange: "filterChange", rowClick: "rowClick", rowDBClick: "rowDBClick" }, queries: [{ propertyName: "slots", predicate: SlotDirective }], viewQueries: [{ propertyName: "header1", first: true, predicate: ["header1"], descendants: true }, { propertyName: "header2", first: true, predicate: ["header2"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bh-datatable bh-antialiased bh-relative bh-text-black bh-text-sm bh-font-normal\">\n    <div class=\"bh-table-responsive\" [ngClass]=\"{'bh-min-h-[300px]': currentLoader }\" [style]=\"{ height: stickyHeader && height }\">\n        <table [ngClass]=\"[skin]\">\n            <thead [ngClass]=\"{ 'bh-sticky bh-top-0 bh-z-10': stickyHeader }\">\n                <column-header\n                    #header1\n                    [all]=\"getProps\"\n                    [checkAll]=\"selectedAll\"\n                    (selectAll)=\"selectAll($event, true)\"\n                    (sortChange)=\"sortChangeMethod($event)\"\n                    (filterChange)=\"filterChangeMethod()\"\n                ></column-header>\n            </thead>\n\n            <tbody>\n                <ng-container *ngIf=\"filterRowCount\">\n                    <tr\n                        *ngFor=\"let item of filterItems; let i = index; trackBy:trackFilterItems.bind(this)\"\n                        [ngClass]=\"[(isFunction(rowClass) ? rowClass(item) : rowClass), selectRowOnClick? 'bh-cursor-pointer':'']\"\n                        (click)=\"onRowClick(item, i)\"\n                        (dblclick)=\"onRowDoubleClick(item)\"\n                    >\n                        <td *ngIf=\"hasCheckbox\" [ngClass]=\"{'bh-sticky bh-left-0 bh-bg-blue-light': stickyFirstColumn}\">\n                            <div class=\"bh-checkbox\" (click)=\"$event.stopPropagation();\">\n                                <input type=\"checkbox\" value=\"{{item[uniqueKey] ? item[uniqueKey] : i}}\" [(ngModel)]=\"item.selected\" (change)=\"checkboxChange();\" />\n                                <div>\n                                    <icon-check class=\"check\"></icon-check>\n                                </div>\n                            </div>\n                        </td>\n                        <ng-container *ngFor=\"let col of columns; let j = index\">\n                            <td\n                                *ngIf=\"!col.hide\"\n                                [ngClass]=\"[\n                                    (isFunction(cellClass) ? cellClass(item) : cellClass),\n                                    j === 0 && stickyFirstColumn ? 'bh-sticky bh-left-0 bh-bg-blue-light' : '',\n                                    hasCheckbox && j === 0 && stickyFirstColumn ? 'bh-left-[52px]' : '',\n                                    col.cellClass ? col.cellClass : ''\n                                    ]\"\n                            >\n                                <ng-container *ngIf=\"hasSlot(col.field)\">\n                                    <ng-container [ngTemplateOutlet]=\"getSlot(col.field)\" [ngTemplateOutletContext]=\"{ data: item }\"></ng-container>\n                                </ng-container>\n                                <div *ngIf=\"!hasSlot(col.field) && col.cellRenderer\" [innerHTML]=\"sanitizeHtml(col.cellRenderer(item))\"></div>\n                                <ng-container *ngIf=\"!hasSlot(col.field) && !col.cellRenderer\"> {{ cellValue(item, col.field) }} </ng-container>\n                            </td>\n                        </ng-container>\n                    </tr>\n                    <!-- Footer row -->\n                    <tr *ngIf=\"showFooterRow\" class=\"footer-row\">\n                        <td *ngIf=\"hasCheckbox\"></td>\n                        <ng-container *ngFor=\"let col of columns; let j = index\">\n                            <td *ngIf=\"!col.hide\">\n                                <ng-container *ngIf=\"hasSlot(col.field + '_footer')\">\n                                    <ng-container [ngTemplateOutlet]=\"getSlot(col.field + '_footer')\" [ngTemplateOutletContext]=\"{ data: col }\"></ng-container>\n                                </ng-container>\n                            </td>\n                        </ng-container>\n                    </tr>\n                </ng-container>\n                <tr *ngIf=\"!filterRowCount && !currentLoader\">\n                    <td [attr.colspan]=\"columns.length + 1\">{{ noDataContent }}</td>\n                </tr>\n\n                <ng-container *ngIf=\"!filterRowCount && currentLoader\">\n                    <tr *ngFor=\"let k of getRange(pageSize)\" class=\"!bh-bg-white bh-h-11 !bh-border-transparent\">\n                        <td [attr.colspan]=\"columns.length + 1\" class=\"!bh-p-0 !bh-border-transparent\">\n                            <div class=\"bh-skeleton-box bh-h-8\"></div>\n                        </td>\n                    </tr>\n                </ng-container>\n            </tbody>\n\n            <tfoot *ngIf=\"cloneHeaderInFooter\" [ngClass]=\"{ 'bh-sticky bh-bottom-0': stickyHeader }\">\n                <column-header\n                    #header2\n                    [all]=\"getProps\"\n                    [isFooter]=\"true\"\n                    [checkAll]=\"selectedAll\"\n                    (selectAll)=\"selectAll($event)\"\n                    (sortChange)=\"sortChangeMethod($event)\"\n                    (filterChange)=\"filterChangeMethod()\"\n                ></column-header>\n            </tfoot>\n        </table>\n\n        <div *ngIf=\"filterRowCount && currentLoader\" class=\"bh-absolute bh-inset-0 bh-bg-blue-light/50 bh-grid bh-place-content-center\">\n            <icon-loader></icon-loader>\n        </div>\n    </div>\n\n    <div *ngIf=\"pagination && filterRowCount\" class=\"bh-pagination bh-py-5\">\n        <div class=\"bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4\">\n            <div class=\"bh-pagination-info bh-flex bh-items-center\">\n                <span class=\"bh-mr-2\"> {{ pager.stringFormat }} </span>\n                <select *ngIf=\"showPageSize\" [(ngModel)]=\"currentPageSize\" class=\"bh-pagesize\" (ngModelChange)=\"changePageSize()\">\n                    <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">{{ option }}</option>\n                </select>\n            </div>\n\n            <div class=\"bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1\">\n                <button *ngIf=\"showFirstPage\" type=\"button\" class=\"bh-page-item first-page\" [class.disabled]=\"currentPage <= 1\" (click)=\"movePage(1)\">\n                    <span *ngIf=\"firstArrow\" [innerHTML]=\"sanitizeHtml(firstArrow)\"></span>\n                    <svg *ngIf=\"!firstArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <g fill=\"currentColor\" fill-rule=\"evenodd\">\n                            <path d=\"M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\" />\n                            <path d=\"M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\" />\n                        </g>\n                    </svg>\n                </button>\n                <button type=\"button\" class=\"bh-page-item previous-page\" [class.disabled]=\"currentPage <= 1\" (click)=\"movePage(currentPage - 1)\">\n                    <span *ngIf=\"previousArrow\" [innerHTML]=\"sanitizeHtml(previousArrow)\"></span>\n                    <svg *ngIf=\"!previousArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <path\n                            fill=\"currentColor\"\n                            fill-rule=\"evenodd\"\n                            d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n                        />\n                    </svg>\n                </button>\n\n                <ng-container *ngIf=\"showNumbers\">\n                    <button\n                        *ngFor=\"let page of pager.pages\"\n                        type=\"button\"\n                        class=\"bh-page-item\"\n                        [class.disabled]=\"currentPage === page\"\n                        [class.bh-active]=\"page === currentPage\"\n                        (click)=\"movePage(page)\"\n                    >\n                        {{ page }}\n                    </button>\n                </ng-container>\n\n                <button type=\"button\" class=\"bh-page-item next-page\" [class.disabled]=\"currentPage >= maxPage()\" (click)=\"movePage(currentPage + 1)\">\n                    <span *ngIf=\"nextArrow\" [innerHTML]=\"sanitizeHtml(nextArrow)\"> </span>\n                    <svg *ngIf=\"!nextArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <path\n                            fill=\"currentColor\"\n                            fill-rule=\"evenodd\"\n                            d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z\"\n                        />\n                    </svg>\n                </button>\n\n                <button *ngIf=\"showLastPage\" type=\"button\" class=\"bh-page-item last-page\" [class.disabled]=\"currentPage >= maxPage()\" (click)=\"movePage(maxPage())\">\n                    <span *ngIf=\"lastArrow\" [innerHTML]=\"sanitizeHtml(lastArrow)\"> </span>\n                    <svg *ngIf=\"!lastArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <g fill=\"currentColor\" fill-rule=\"evenodd\">\n                            <path d=\"M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708z\" />\n                            <path d=\"M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708z\" />\n                        </g>\n                    </svg>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{border:0 solid transparent;box-sizing:border-box}.bh-datatable .bh-table-responsive{position:relative;width:100%;overflow:auto;border-radius:.25rem}.bh-datatable .bh-table-responsive table{width:100%;max-width:100%;border-collapse:collapse!important}.bh-datatable .bh-table-responsive table tfoot tr,.bh-datatable .bh-table-responsive table thead tr{--tw-bg-opacity:1;background-color:rgb(246 247 250/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive table tbody tr td,.bh-datatable .bh-table-responsive table tfoot tr th,.bh-datatable .bh-table-responsive table thead tr th{padding:.75rem 1rem;text-align:left}.bh-datatable .bh-table-responsive table tfoot tr th,.bh-datatable .bh-table-responsive table thead tr th{vertical-align:top;font-weight:700}.bh-datatable .bh-table-responsive table tbody tr{border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(246 247 250/var(--tw-border-opacity,1))}.bh-datatable .bh-table-responsive table.bh-table-striped tbody tr:nth-child(odd){background-color:#e0e6ed26}.bh-datatable .bh-table-responsive table.bh-table-hover tbody tr:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive table.bh-table-compact tbody tr td,.bh-datatable .bh-table-responsive table.bh-table-compact thead tr th{padding:.5rem .75rem}.bh-datatable .bh-table-responsive table.bh-table-bordered tbody tr td,.bh-datatable .bh-table-responsive table.bh-table-bordered thead tr th{border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(246 247 250/var(--tw-border-opacity,1))}.bh-datatable .bh-pagination .bh-page-item{display:grid;height:2rem;width:2rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;place-content:center;border-radius:9999px;border:1px solid rgba(14,23,38,.3);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem .625rem;--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1));outline-width:0}.bh-datatable .bh-pagination .bh-page-item:hover{--tw-border-opacity:1;border-color:rgb(67 97 238/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(67 97 238/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.bh-datatable .bh-pagination .bh-page-item{-webkit-appearance:button;background-image:none}.bh-datatable .bh-pagination .bh-page-item.disabled:not(.bh-active){pointer-events:none;opacity:.5}.bh-datatable .bh-pagination .bh-page-item.bh-active{--tw-border-opacity:1;border-color:rgb(67 97 238/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(67 97 238/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.bh-datatable .bh-table-responsive button,.bh-datatable .bh-table-responsive input{outline:2px solid transparent;outline-offset:2px}.bh-datatable .bh-pagination-info .bh-pagesize{box-sizing:border-box;border-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem .5rem;font-weight:400;--tw-text-opacity:1;color:rgb(14 23 38/var(--tw-text-opacity,1));outline-width:0}.bh-datatable .bh-pagination-info .bh-pagesize:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(224,230,237,.4)}.bh-datatable .bh-table-responsive table th .bh-filter{margin-top:.125rem;display:flex;height:30px;width:100%;align-items:center}.bh-datatable .bh-table-responsive table th .bh-filter>.bh-form-control{box-sizing:border-box;height:100%;width:100%;min-width:60px;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.25rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:400;--tw-text-opacity:1;color:rgb(14 23 38/var(--tw-text-opacity,1));outline-width:0}.bh-datatable .bh-table-responsive table th .bh-filter>.bh-form-control:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(224,230,237,.4)}.bh-datatable .bh-table-responsive table th .bh-filter>select{border-radius:.25rem}.bh-datatable .bh-table-responsive table th .bh-filter>button{display:grid;height:30px;width:30px;flex-shrink:0;cursor:pointer;place-content:center;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(224 230 237/var(--tw-bg-opacity,1));color:#0e1726b3}.bh-datatable .bh-table-responsive table th .bh-filter>button:hover{color:#0e1726e6}.bh-datatable .bh-table-responsive table th .bh-filter>button{-webkit-appearance:button;background-image:none}.bh-datatable .bh-filter-menu button{display:flex;width:100%;cursor:pointer;border:1px solid transparent;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem 1rem;text-align:left}.bh-datatable .bh-filter-menu button:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1));font-weight:700}.bh-datatable .bh-filter-menu button{-webkit-appearance:button;background-image:none}.bh-datatable .bh-filter-menu button.active{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1));font-weight:700}.bh-datatable .bh-table-responsive input[type=checkbox]{position:absolute;height:1.25rem;width:1.25rem;opacity:0}.bh-datatable .bh-table-responsive input[type=checkbox]+div{display:grid;height:1.25rem;width:1.25rem;place-content:center;border-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive input[type=checkbox]+div svg{pointer-events:none;display:none;height:.75rem;width:.75rem;fill:currentColor;--tw-text-opacity:1;color:rgb(67 97 238/var(--tw-text-opacity,1))}.bh-datatable .bh-table-responsive input[type=checkbox]:checked+div,.bh-datatable .bh-table-responsive input[type=checkbox]:indeterminate+div{--tw-border-opacity:1;border-color:rgb(67 97 238/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(67 97 238/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive input[type=checkbox]:checked+div svg.check,.bh-datatable .bh-table-responsive input[type=checkbox]:indeterminate+div svg.intermediate{display:flex;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.bh-absolute{position:absolute}.bh-relative{position:relative}.bh-sticky{position:sticky}.bh-inset-0{inset:0}.bh-bottom-0{bottom:0}.bh-left-0{left:0}.bh-left-\\[52px\\]{left:52px}.bh-right-0{right:0}.bh-top-0{top:0}.bh-top-full{top:100%}.bh-z-10{z-index:10}.bh-z-\\[1\\]{z-index:1}.bh-mb-2{margin-bottom:.5rem}.bh-ml-3{margin-left:.75rem}.bh-mr-2{margin-right:.5rem}.bh-mt-1{margin-top:.25rem}.bh-flex{display:flex}.bh-inline-flex{display:inline-flex}.bh-grid{display:grid}.bh-hidden{display:none}.bh-h-11{height:2.75rem}.bh-h-8{height:2rem}.bh-min-h-\\[300px\\]{min-height:300px}.bh-w-32{width:8rem}.bh-w-4{width:1rem}.bh-w-px{width:1px}.bh-cursor-pointer{cursor:pointer}.bh-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.bh-flex-col{flex-direction:column}.bh-flex-wrap{flex-wrap:wrap}.bh-place-content-center{place-content:center}.bh-items-center{align-items:center}.bh-gap-4{gap:1rem}.bh-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.bh-overflow-hidden{overflow:hidden}.bh-rounded{border-radius:.25rem}.bh-rounded-md{border-radius:.375rem}.bh-border{border-width:1px}.bh-border-solid{border-style:solid}.\\!bh-border-transparent{border-color:transparent!important}.bh-border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.bh-border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.\\!bh-bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bh-bg-blue-light{--tw-bg-opacity:1;background-color:rgb(246 247 250/var(--tw-bg-opacity,1))}.bh-bg-blue-light\\/50{background-color:#f6f7fa80}.bh-bg-gray-200{background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bh-bg-gray-200,.bh-bg-white{--tw-bg-opacity:1}.bh-bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\!bh-p-0{padding:0!important}.bh-p-10{padding:2.5rem}.bh-p-2{padding:.5rem}.bh-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.bh-text-\\[13px\\]{font-size:13px}.bh-text-sm{font-size:.875rem;line-height:1.25rem}.bh-font-normal{font-weight:400}.\\!bh-text-primary{--tw-text-opacity:1!important;color:rgb(67 97 238/var(--tw-text-opacity,1))!important}.bh-text-black{--tw-text-opacity:1;color:rgb(14 23 38/var(--tw-text-opacity,1))}.bh-text-black\\/20{color:#0e172633}.bh-text-primary{--tw-text-opacity:1;color:rgb(67 97 238/var(--tw-text-opacity,1))}.bh-antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bh-shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.bh-outline-0{outline-width:0}.bh-filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.bh-skeleton-box{position:relative;width:100%;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bh-skeleton-box:after{position:absolute;inset:0;--tw-translate-x:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:bhshimmer 2s infinite;background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.025) 20%,rgba(0,0,0,.05) 50%,transparent);--tw-content:\"\";content:var(--tw-content)}@keyframes bhshimmer{to{transform:translate(100%)}}.hover\\:bh-opacity-80:hover{opacity:.8}.focus\\:bh-border-gray-200:focus{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}@media(min-width:640px){.sm\\:bh-ml-auto{margin-left:auto}.sm\\:bh-flex-row{flex-direction:row}}\n"], dependencies: [{ 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: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ColumnHeaderComponent, selector: "column-header", inputs: ["all", "isFooter", "checkAll"], outputs: ["selectAll", "sortChange", "filterChange"] }, { kind: "component", type: IconCheckComponent, selector: "icon-check", inputs: ["class"] }, { kind: "component", type: IconLoaderComponent, selector: "icon-loader" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NgDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ng-datatable', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bh-datatable bh-antialiased bh-relative bh-text-black bh-text-sm bh-font-normal\">\n    <div class=\"bh-table-responsive\" [ngClass]=\"{'bh-min-h-[300px]': currentLoader }\" [style]=\"{ height: stickyHeader && height }\">\n        <table [ngClass]=\"[skin]\">\n            <thead [ngClass]=\"{ 'bh-sticky bh-top-0 bh-z-10': stickyHeader }\">\n                <column-header\n                    #header1\n                    [all]=\"getProps\"\n                    [checkAll]=\"selectedAll\"\n                    (selectAll)=\"selectAll($event, true)\"\n                    (sortChange)=\"sortChangeMethod($event)\"\n                    (filterChange)=\"filterChangeMethod()\"\n                ></column-header>\n            </thead>\n\n            <tbody>\n                <ng-container *ngIf=\"filterRowCount\">\n                    <tr\n                        *ngFor=\"let item of filterItems; let i = index; trackBy:trackFilterItems.bind(this)\"\n                        [ngClass]=\"[(isFunction(rowClass) ? rowClass(item) : rowClass), selectRowOnClick? 'bh-cursor-pointer':'']\"\n                        (click)=\"onRowClick(item, i)\"\n                        (dblclick)=\"onRowDoubleClick(item)\"\n                    >\n                        <td *ngIf=\"hasCheckbox\" [ngClass]=\"{'bh-sticky bh-left-0 bh-bg-blue-light': stickyFirstColumn}\">\n                            <div class=\"bh-checkbox\" (click)=\"$event.stopPropagation();\">\n                                <input type=\"checkbox\" value=\"{{item[uniqueKey] ? item[uniqueKey] : i}}\" [(ngModel)]=\"item.selected\" (change)=\"checkboxChange();\" />\n                                <div>\n                                    <icon-check class=\"check\"></icon-check>\n                                </div>\n                            </div>\n                        </td>\n                        <ng-container *ngFor=\"let col of columns; let j = index\">\n                            <td\n                                *ngIf=\"!col.hide\"\n                                [ngClass]=\"[\n                                    (isFunction(cellClass) ? cellClass(item) : cellClass),\n                                    j === 0 && stickyFirstColumn ? 'bh-sticky bh-left-0 bh-bg-blue-light' : '',\n                                    hasCheckbox && j === 0 && stickyFirstColumn ? 'bh-left-[52px]' : '',\n                                    col.cellClass ? col.cellClass : ''\n                                    ]\"\n                            >\n                                <ng-container *ngIf=\"hasSlot(col.field)\">\n                                    <ng-container [ngTemplateOutlet]=\"getSlot(col.field)\" [ngTemplateOutletContext]=\"{ data: item }\"></ng-container>\n                                </ng-container>\n                                <div *ngIf=\"!hasSlot(col.field) && col.cellRenderer\" [innerHTML]=\"sanitizeHtml(col.cellRenderer(item))\"></div>\n                                <ng-container *ngIf=\"!hasSlot(col.field) && !col.cellRenderer\"> {{ cellValue(item, col.field) }} </ng-container>\n                            </td>\n                        </ng-container>\n                    </tr>\n                    <!-- Footer row -->\n                    <tr *ngIf=\"showFooterRow\" class=\"footer-row\">\n                        <td *ngIf=\"hasCheckbox\"></td>\n                        <ng-container *ngFor=\"let col of columns; let j = index\">\n                            <td *ngIf=\"!col.hide\">\n                                <ng-container *ngIf=\"hasSlot(col.field + '_footer')\">\n                                    <ng-container [ngTemplateOutlet]=\"getSlot(col.field + '_footer')\" [ngTemplateOutletContext]=\"{ data: col }\"></ng-container>\n                                </ng-container>\n                            </td>\n                        </ng-container>\n                    </tr>\n                </ng-container>\n                <tr *ngIf=\"!filterRowCount && !currentLoader\">\n                    <td [attr.colspan]=\"columns.length + 1\">{{ noDataContent }}</td>\n                </tr>\n\n                <ng-container *ngIf=\"!filterRowCount && currentLoader\">\n                    <tr *ngFor=\"let k of getRange(pageSize)\" class=\"!bh-bg-white bh-h-11 !bh-border-transparent\">\n                        <td [attr.colspan]=\"columns.length + 1\" class=\"!bh-p-0 !bh-border-transparent\">\n                            <div class=\"bh-skeleton-box bh-h-8\"></div>\n                        </td>\n                    </tr>\n                </ng-container>\n            </tbody>\n\n            <tfoot *ngIf=\"cloneHeaderInFooter\" [ngClass]=\"{ 'bh-sticky bh-bottom-0': stickyHeader }\">\n                <column-header\n                    #header2\n                    [all]=\"getProps\"\n                    [isFooter]=\"true\"\n                    [checkAll]=\"selectedAll\"\n                    (selectAll)=\"selectAll($event)\"\n                    (sortChange)=\"sortChangeMethod($event)\"\n                    (filterChange)=\"filterChangeMethod()\"\n                ></column-header>\n            </tfoot>\n        </table>\n\n        <div *ngIf=\"filterRowCount && currentLoader\" class=\"bh-absolute bh-inset-0 bh-bg-blue-light/50 bh-grid bh-place-content-center\">\n            <icon-loader></icon-loader>\n        </div>\n    </div>\n\n    <div *ngIf=\"pagination && filterRowCount\" class=\"bh-pagination bh-py-5\">\n        <div class=\"bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4\">\n            <div class=\"bh-pagination-info bh-flex bh-items-center\">\n                <span class=\"bh-mr-2\"> {{ pager.stringFormat }} </span>\n                <select *ngIf=\"showPageSize\" [(ngModel)]=\"currentPageSize\" class=\"bh-pagesize\" (ngModelChange)=\"changePageSize()\">\n                    <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">{{ option }}</option>\n                </select>\n            </div>\n\n            <div class=\"bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1\">\n                <button *ngIf=\"showFirstPage\" type=\"button\" class=\"bh-page-item first-page\" [class.disabled]=\"currentPage <= 1\" (click)=\"movePage(1)\">\n                    <span *ngIf=\"firstArrow\" [innerHTML]=\"sanitizeHtml(firstArrow)\"></span>\n                    <svg *ngIf=\"!firstArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <g fill=\"currentColor\" fill-rule=\"evenodd\">\n                            <path d=\"M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\" />\n                            <path d=\"M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\" />\n                        </g>\n                    </svg>\n                </button>\n                <button type=\"button\" class=\"bh-page-item previous-page\" [class.disabled]=\"currentPage <= 1\" (click)=\"movePage(currentPage - 1)\">\n                    <span *ngIf=\"previousArrow\" [innerHTML]=\"sanitizeHtml(previousArrow)\"></span>\n                    <svg *ngIf=\"!previousArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <path\n                            fill=\"currentColor\"\n                            fill-rule=\"evenodd\"\n                            d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n                        />\n                    </svg>\n                </button>\n\n                <ng-container *ngIf=\"showNumbers\">\n                    <button\n                        *ngFor=\"let page of pager.pages\"\n                        type=\"button\"\n                        class=\"bh-page-item\"\n                        [class.disabled]=\"currentPage === page\"\n                        [class.bh-active]=\"page === currentPage\"\n                        (click)=\"movePage(page)\"\n                    >\n                        {{ page }}\n                    </button>\n                </ng-container>\n\n                <button type=\"button\" class=\"bh-page-item next-page\" [class.disabled]=\"currentPage >= maxPage()\" (click)=\"movePage(currentPage + 1)\">\n                    <span *ngIf=\"nextArrow\" [innerHTML]=\"sanitizeHtml(nextArrow)\"> </span>\n                    <svg *ngIf=\"!nextArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <path\n                            fill=\"currentColor\"\n                            fill-rule=\"evenodd\"\n                            d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z\"\n                        />\n                    </svg>\n                </button>\n\n                <button *ngIf=\"showLastPage\" type=\"button\" class=\"bh-page-item last-page\" [class.disabled]=\"currentPage >= maxPage()\" (click)=\"movePage(maxPage())\">\n                    <span *ngIf=\"lastArrow\" [innerHTML]=\"sanitizeHtml(lastArrow)\"> </span>\n                    <svg *ngIf=\"!lastArrow\" aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\">\n                        <g fill=\"currentColor\" fill-rule=\"evenodd\">\n                            <path d=\"M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708z\" />\n                            <path d=\"M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708z\" />\n                        </g>\n                    </svg>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{border:0 solid transparent;box-sizing:border-box}.bh-datatable .bh-table-responsive{position:relative;width:100%;overflow:auto;border-radius:.25rem}.bh-datatable .bh-table-responsive table{width:100%;max-width:100%;border-collapse:collapse!important}.bh-datatable .bh-table-responsive table tfoot tr,.bh-datatable .bh-table-responsive table thead tr{--tw-bg-opacity:1;background-color:rgb(246 247 250/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive table tbody tr td,.bh-datatable .bh-table-responsive table tfoot tr th,.bh-datatable .bh-table-responsive table thead tr th{padding:.75rem 1rem;text-align:left}.bh-datatable .bh-table-responsive table tfoot tr th,.bh-datatable .bh-table-responsive table thead tr th{vertical-align:top;font-weight:700}.bh-datatable .bh-table-responsive table tbody tr{border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(246 247 250/var(--tw-border-opacity,1))}.bh-datatable .bh-table-responsive table.bh-table-striped tbody tr:nth-child(odd){background-color:#e0e6ed26}.bh-datatable .bh-table-responsive table.bh-table-hover tbody tr:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive table.bh-table-compact tbody tr td,.bh-datatable .bh-table-responsive table.bh-table-compact thead tr th{padding:.5rem .75rem}.bh-datatable .bh-table-responsive table.bh-table-bordered tbody tr td,.bh-datatable .bh-table-responsive table.bh-table-bordered thead tr th{border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(246 247 250/var(--tw-border-opacity,1))}.bh-datatable .bh-pagination .bh-page-item{display:grid;height:2rem;width:2rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;place-content:center;border-radius:9999px;border:1px solid rgba(14,23,38,.3);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem .625rem;--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1));outline-width:0}.bh-datatable .bh-pagination .bh-page-item:hover{--tw-border-opacity:1;border-color:rgb(67 97 238/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(67 97 238/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.bh-datatable .bh-pagination .bh-page-item{-webkit-appearance:button;background-image:none}.bh-datatable .bh-pagination .bh-page-item.disabled:not(.bh-active){pointer-events:none;opacity:.5}.bh-datatable .bh-pagination .bh-page-item.bh-active{--tw-border-opacity:1;border-color:rgb(67 97 238/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(67 97 238/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.bh-datatable .bh-table-responsive button,.bh-datatable .bh-table-responsive input{outline:2px solid transparent;outline-offset:2px}.bh-datatable .bh-pagination-info .bh-pagesize{box-sizing:border-box;border-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem .5rem;font-weight:400;--tw-text-opacity:1;color:rgb(14 23 38/var(--tw-text-opacity,1));outline-width:0}.bh-datatable .bh-pagination-info .bh-pagesize:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(224,230,237,.4)}.bh-datatable .bh-table-responsive table th .bh-filter{margin-top:.125rem;display:flex;height:30px;width:100%;align-items:center}.bh-datatable .bh-table-responsive table th .bh-filter>.bh-form-control{box-sizing:border-box;height:100%;width:100%;min-width:60px;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.25rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:400;--tw-text-opacity:1;color:rgb(14 23 38/var(--tw-text-opacity,1));outline-width:0}.bh-datatable .bh-table-responsive table th .bh-filter>.bh-form-control:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(224,230,237,.4)}.bh-datatable .bh-table-responsive table th .bh-filter>select{border-radius:.25rem}.bh-datatable .bh-table-responsive table th .bh-filter>button{display:grid;height:30px;width:30px;flex-shrink:0;cursor:pointer;place-content:center;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(224 230 237/var(--tw-bg-opacity,1));color:#0e1726b3}.bh-datatable .bh-table-responsive table th .bh-filter>button:hover{color:#0e1726e6}.bh-datatable .bh-table-responsive table th .bh-filter>button{-webkit-appearance:button;background-image:none}.bh-datatable .bh-filter-menu button{display:flex;width:100%;cursor:pointer;border:1px solid transparent;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem 1rem;text-align:left}.bh-datatable .bh-filter-menu button:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1));font-weight:700}.bh-datatable .bh-filter-menu button{-webkit-appearance:button;background-image:none}.bh-datatable .bh-filter-menu button.active{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1));font-weight:700}.bh-datatable .bh-table-responsive input[type=checkbox]{position:absolute;height:1.25rem;width:1.25rem;opacity:0}.bh-datatable .bh-table-responsive input[type=checkbox]+div{display:grid;height:1.25rem;width:1.25rem;place-content:center;border-radius:.25rem;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(224 230 237/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive input[type=checkbox]+div svg{pointer-events:none;display:none;height:.75rem;width:.75rem;fill:currentColor;--tw-text-opacity:1;color:rgb(67 97 238/var(--tw-text-opacity,1))}.bh-datatable .bh-table-responsive input[type=checkbox]:checked+div,.bh-datatable .bh-table-responsive input[type=checkbox]:indeterminate+div{--tw-border-opacity:1;border-color:rgb(67 97 238/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(67 97 238/var(--tw-bg-opacity,1))}.bh-datatable .bh-table-responsive input[type=checkbox]:checked+div svg.check,.bh-datatable .bh-table-responsive input[type=checkbox]:indeterminate+div svg.intermediate{display:flex;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.bh-absolute{position:absolute}.bh-relative{position:relative}.bh-sticky{position:sticky}.bh-inset-0{inset:0}.bh-bottom-0{bottom:0}.bh-left-0{left:0}.bh-left-\\[52px\\]{left:52px}.bh-right-0{right:0}.bh-top-0{top:0}.bh-top-full{top:100%}.bh-z-10{z-index:10}.bh-z-\\[1\\]{z-index:1}.bh-mb-2{margin-bottom:.5rem}.bh-ml-3{margin-left:.75rem}.bh-mr-2{margin-right:.5rem}.bh-mt-1{margin-top:.25rem}.bh-flex{display:flex}.bh-inline-flex{display:inline-flex}.bh-grid{display:grid}.bh-hidden{display:none}.bh-h-11{height:2.75rem}.bh-h-8{height:2rem}.bh-min-h-\\[300px\\]{min-height:300px}.bh-w-32{width:8rem}.bh-w-4{width:1rem}.bh-w-px{width:1px}.bh-cursor-pointer{cursor:pointer}.bh-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.bh-flex-col{flex-direction:column}.bh-flex-wrap{flex-wrap:wrap}.bh-place-content-center{place-content:center}.bh-items-center{align-items:center}.bh-gap-4{gap:1rem}.bh-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.bh-overflow-hidden{overflow:hidden}.bh-rounded{border-radius:.25rem}.bh-rounded-md{border-radius:.375rem}.bh-border{border-width:1px}.bh-border-solid{border-style:solid}.\\!bh-border-transparent{border-color:transparent!important}.bh-border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.bh-border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.\\!bh-bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bh-bg-blue-light{--tw-bg-opacity:1;background-color:rgb(246 247 250/var(--tw-bg-opacity,1))}.bh-bg-blue-light\\/50{background-color:#f6f7fa80}.bh-bg-gray-200{background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bh-bg-gray-200,.bh-bg-white{--tw-bg-opacity:1}.bh-bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.\\!bh-p-0{padding:0!important}.bh-p-10{padding:2.5rem}.bh-p-2{padding:.5rem}.bh-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.bh-text-\\[13px\\]{font-size:13px}.bh-text-sm{font-size:.875rem;line-height:1.25rem}.bh-font-normal{font-weight:400}.\\!bh-text-primary{--tw-text-opacity:1!important;color:rgb(67 97 238/var(--tw-text-opacity,1))!important}.bh-text-black{--tw-text-opacity:1;color:rgb(14 23 38/var(--tw-text-opacity,1))}.bh-text-black\\/20{color:#0e172633}.bh-text-primary{--tw-text-opacity:1;color:rgb(67 97 238/var(--tw-text-opacity,1))}.bh-antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bh-shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.bh-outline-0{outline-width:0}.bh-filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.bh-skeleton-box{position:relative;width:100%;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bh-skeleton-box:after{position:absolute;inset:0;--tw-translate-x:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:bhshimmer 2s infinite;background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.025) 20%,rgba(0,0,0,.05) 50%,transparent);--tw-content:\"\";content:var(--tw-content)}@keyframes bhshimmer{to{transform:translate(100%)}}.hover\\:bh-opacity-80:hover{opacity:.8}.focus\\:bh-border-gray-200:focus{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}@media(min-width:640px){.sm\\:bh-ml-auto{margin-left:auto}.sm\\:bh-flex-row{flex-direction:row}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { loading: [{
+                type: Input
+            }], isServerMode: [{
+                type: Input
+            }], skin: [{
+                type: Input
+            }], totalRows: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], hasCheckbox: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], showPageSize: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }], cellClass: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sortColumn: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], columnFilter: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], showNumbers: [{
+                type: Input
+            }], showNumbersCount: [{
+                type: Input
+            }], showFirstPage: [{
+                type: Input
+            }], showLastPage: [{
+                type: Input
+            }], firstArrow: [{
+                type: Input
+            }], lastArrow: [{
+                type: Input
+            }], nextArrow: [{
+                type: Input
+            }], previousArrow: [{
+                type: Input
+            }], paginationInfo: [{
+                type: Input
+            }], noDataContent: [{
+                type: Input
+            }], stickyHeader: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], stickyFirstColumn: [{
+                type: Input
+            }], cloneHeaderInFooter: [{
+                type: Input
+            }], selectRowOnClick: [{
+                type: Input
+            }], showFooterRow: [{
+                type: Input
+            }], changeServer: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], rowSelect: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }], rowDBClick: [{
+                type: Output
+            }], header1: [{
+                type: ViewChild,
+                args: ['header1']
+            }], header2: [{
+                type: ViewChild,
+                args: ['header2']
+            }], slots: [{
+                type: ContentChildren,
+                args: [SlotDirective]
+            }], defaultTemplate: [{
+                type: ViewChild,
+                args: ['defaultTemplate', { static: true }]
+            }] } });
+
+class DataTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DataTableModule, declarations: [NgDataTableComponent,
+            ColumnFilterComponent,
+            ColumnHeaderComponent,
+            IconCheckComponent,
+            IconDashComponent,
+            IconFilterComponent,
+            IconLoaderComponent,
+            SlotDirective], imports: [CommonModule, FormsModule], exports: [NgDataTableComponent, ColumnFilterComponent, ColumnHeaderComponent, IconCheckComponent, IconDashComponent, IconFilterComponent, IconLoaderComponent, SlotDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataTableModule, imports: [CommonModule, FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule],
+                    declarations: [
+                        NgDataTableComponent,
+                        ColumnFilterComponent,
+                        ColumnHeaderComponent,
+                        IconCheckComponent,
+                        IconDashComponent,
+                        IconFilterComponent,
+                        IconLoaderComponent,
+                        SlotDirective,
+                    ],
+                    exports: [NgDataTableComponent, ColumnFilterComponent, ColumnHeaderComponent, IconCheckComponent, IconDashComponent, IconFilterComponent, IconLoaderComponent, SlotDirective],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ng-datatable
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnFilterComponent, ColumnHeaderComponent, DataTableModule, IconCheckComponent, IconDashComponent, IconFilterComponent, IconLoaderComponent, NgDataTableComponent, Pager, SlotDirective, colDef };
+//# sourceMappingURL=jbeche-ng-datatable.mjs.map