@coreui/angular-pro 4.2.23 → 4.2.24

package/fesm2015/coreui-angular-pro.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, PLATFORM_ID, TemplateRef, ViewContainerRef, VERSION } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, PLATFORM_ID, TemplateRef, ViewContainerRef, inject, VERSION } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -7,7 +7,7 @@ import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
 import * as i3 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, tap, map, debounceTime } from 'rxjs';
+import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, takeUntil, map, debounceTime } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isValid, format } from 'date-fns';
 import * as i2 from '@angular/forms';
@@ -11409,12 +11409,12 @@ class SidebarComponent {
         _SidebarComponent_layoutChangeSubscription.set(this, void 0);
         _SidebarComponent_stateToggleSubscription.set(this, void 0);
         this.state = {
-            sidebar: this
+            sidebar: this,
         };
         _SidebarComponent_stateInitial.set(this, {
             narrow: false,
             visible: false,
-            unfoldable: false
+            unfoldable: false,
         });
         /**
          * Place sidebar in non-static positions. [docs]
@@ -11596,7 +11596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{
                     selector: 'c-sidebar',
                     exportAs: 'cSidebar',
-                    template: '<ng-content></ng-content>'
+                    template: '<ng-content></ng-content>',
                 }]
         }], ctorParameters: function () {
         return [{ type: Document, decorators: [{
@@ -12594,92 +12594,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-var _SmartTableFilterComponent_dueTime, _SmartTableFilterComponent_value, _SmartTableFilterComponent_eventType, _SmartTableFilterComponent_lazy, _SmartTableFilterComponent_valueSubscription, _SmartTableFilterComponent_inputSubscription;
-class SmartTableFilterComponent {
-    constructor() {
-        _SmartTableFilterComponent_dueTime.set(this, 300);
-        _SmartTableFilterComponent_value.set(this, '');
-        _SmartTableFilterComponent_eventType.set(this, '');
-        _SmartTableFilterComponent_lazy.set(this, false);
-        _SmartTableFilterComponent_valueSubscription.set(this, void 0);
-        _SmartTableFilterComponent_inputSubscription.set(this, void 0);
+var _FilterInputDirective_value, _FilterInputDirective_valueSubscription, _FilterInputDirective_inputSubscription, _FilterInputDirective_destroy$;
+class FilterInputDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        _FilterInputDirective_value.set(this, '');
+        _FilterInputDirective_valueSubscription.set(this, void 0);
+        _FilterInputDirective_inputSubscription.set(this, void 0);
         this.value$ = new BehaviorSubject('');
-        this.filterLabel = 'Filter:';
-        this.filterPlaceholder = 'Filter';
+        _FilterInputDirective_destroy$.set(this, new Subject());
+        this.emitObject = {
+            value: '',
+            type: '',
+            column: ''
+        };
+        this.delay = 300;
+        this.onEvent = 'input';
         this.valueChange = new EventEmitter();
     }
-    set tableFilter(value) {
-        __classPrivateFieldSet(this, _SmartTableFilterComponent_lazy, (typeof value === 'object' && value.lazy) ? true : false, "f");
-    }
-    ;
     set value(value) {
         this.value$.next(value);
     }
-    get hostClasses() {
-        return {
-            row: true,
-            'mb-2': true
-        };
-    }
     ngAfterViewInit() {
         this.setSubscription();
     }
     ngOnDestroy() {
         this.setSubscription(false);
     }
-    setSubscription(subscribe = !__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) {
-        var _a, _b;
+    setSubscription(subscribe = !__classPrivateFieldGet(this, _FilterInputDirective_valueSubscription, "f")) {
         if (subscribe) {
-            __classPrivateFieldSet(this, _SmartTableFilterComponent_valueSubscription, this.value$
-                .pipe(distinctUntilChanged())
+            __classPrivateFieldSet(this, _FilterInputDirective_valueSubscription, this.value$
+                .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f")))
                 .subscribe(value => {
-                if (__classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f") !== value) {
-                    __classPrivateFieldSet(this, _SmartTableFilterComponent_value, value, "f");
-                    this.valueChange.emit({ value, type: __classPrivateFieldGet(this, _SmartTableFilterComponent_eventType, "f") });
+                if (__classPrivateFieldGet(this, _FilterInputDirective_value, "f") !== value) {
+                    __classPrivateFieldSet(this, _FilterInputDirective_value, value, "f");
+                    this.emitObject = Object.assign(Object.assign({}, this.emitObject), { value: value, type: this.onEvent });
+                    this.valueChange.emit(Object.assign({}, this.emitObject));
                 }
             }), "f");
-            const eventName = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 'change' : 'input';
-            let dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
-            __classPrivateFieldSet(this, _SmartTableFilterComponent_inputSubscription, fromEvent(this.filterInput.nativeElement, eventName)
-                .pipe(tap((event) => {
-                var _a;
-                dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 0 : __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
-                __classPrivateFieldSet(this, _SmartTableFilterComponent_eventType, (_a = event.type) !== null && _a !== void 0 ? _a : eventName, "f");
-            }), map(event => {
+            const dueTime = this.onEvent === 'change' ? 0 : this.delay;
+            __classPrivateFieldSet(this, _FilterInputDirective_inputSubscription, fromEvent(this.elementRef.nativeElement, this.onEvent)
+                .pipe(map(event => {
                 return event.target.value;
-            }), debounceTime(dueTime))
+            }), debounceTime(dueTime), takeUntil(__classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f")))
                 .subscribe((value) => {
-                if (value !== __classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f")) {
+                if (value !== __classPrivateFieldGet(this, _FilterInputDirective_value, "f")) {
                     this.value$.next(value);
                 }
             }), "f");
         }
         else {
-            (_a = __classPrivateFieldGet(this, _SmartTableFilterComponent_inputSubscription, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            this.value$.complete();
-            (_b = __classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            __classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f").next(true);
         }
     }
 }
-_SmartTableFilterComponent_dueTime = new WeakMap(), _SmartTableFilterComponent_value = new WeakMap(), _SmartTableFilterComponent_eventType = new WeakMap(), _SmartTableFilterComponent_lazy = new WeakMap(), _SmartTableFilterComponent_valueSubscription = new WeakMap(), _SmartTableFilterComponent_inputSubscription = new WeakMap();
+_FilterInputDirective_value = new WeakMap(), _FilterInputDirective_valueSubscription = new WeakMap(), _FilterInputDirective_inputSubscription = new WeakMap(), _FilterInputDirective_destroy$ = new WeakMap();
+FilterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FilterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: FilterInputDirective, selector: "[cFilterInput]", inputs: { delay: "delay", onEvent: "onEvent", value: "value" }, outputs: { valueChange: "valueChange" }, exportAs: ["cFilterInput"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cFilterInput]',
+                    exportAs: 'cFilterInput'
+                    // standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { delay: [{
+                type: Input
+            }], onEvent: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+var _SmartTableFilterComponent_filterInputDirective;
+class SmartTableFilterComponent {
+    constructor() {
+        _SmartTableFilterComponent_filterInputDirective.set(this, inject(FilterInputDirective));
+        this.value$ = __classPrivateFieldGet(this, _SmartTableFilterComponent_filterInputDirective, "f").value$;
+        this.filterLabel = 'Filter:';
+        this.filterPlaceholder = 'Filter';
+    }
+    get hostClasses() {
+        return {
+            row: true,
+            'mb-2': true
+        };
+    }
+    get labelClasses() {
+        return {
+            'col-form-label': true,
+            [`col-form-label-${this.sizing}`]: !!this.sizing
+        };
+    }
+    ;
+}
+_SmartTableFilterComponent_filterInputDirective = new WeakMap();
 SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", tableFilter: "tableFilter", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"!!filterLabel\" cLabel=\"col\" class=\"col-auto\">{{filterLabel}}</label>\r\n<div class=\"col-auto\">\r\n  <input\r\n    [placeholder]=\"filterPlaceholder\"\r\n    [value]=\"(value$ | async)\"\r\n    cFormControl\r\n    size=\"10\"\r\n    #filterInput\r\n  />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", sizing: "sizing" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\r\n  {{filterLabel}}\r\n</label>\r\n<div class=\"col-auto\">\r\n  <input\r\n    [placeholder]=\"filterPlaceholder\"\r\n    [sizing]=\"sizing\"\r\n    [value]=\"value$ | async\"\r\n    cFormControl\r\n    size=\"10\"\r\n  />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"!!filterLabel\" cLabel=\"col\" class=\"col-auto\">{{filterLabel}}</label>\r\n<div class=\"col-auto\">\r\n  <input\r\n    [placeholder]=\"filterPlaceholder\"\r\n    [value]=\"(value$ | async)\"\r\n    cFormControl\r\n    size=\"10\"\r\n    #filterInput\r\n  />\r\n</div>\r\n" }]
+            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\r\n  {{filterLabel}}\r\n</label>\r\n<div class=\"col-auto\">\r\n  <input\r\n    [placeholder]=\"filterPlaceholder\"\r\n    [sizing]=\"sizing\"\r\n    [value]=\"value$ | async\"\r\n    cFormControl\r\n    size=\"10\"\r\n  />\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
                 type: Input
             }], filterPlaceholder: [{
                 type: Input
-            }], tableFilter: [{
-                type: Input
-            }], value: [{
+            }], sizing: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], filterInput: [{
-                type: ViewChild,
-                args: ['filterInput', { static: true }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -12952,6 +12974,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['class']
             }] } });
 
+var _SmartTableColumnFilterComponent_filterInputDirective;
+class SmartTableColumnFilterComponent {
+    constructor() {
+        _SmartTableColumnFilterComponent_filterInputDirective.set(this, inject(FilterInputDirective));
+        this.value$ = __classPrivateFieldGet(this, _SmartTableColumnFilterComponent_filterInputDirective, "f").value$;
+        this.sizing = 'sm';
+    }
+    set column(value) {
+        __classPrivateFieldGet(this, _SmartTableColumnFilterComponent_filterInputDirective, "f").emitObject = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _SmartTableColumnFilterComponent_filterInputDirective, "f").emitObject), { column: value });
+    }
+    ;
+}
+_SmartTableColumnFilterComponent_filterInputDirective = new WeakMap();
+SmartTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: { column: "column", sizing: "sizing" }, ngImport: i0, template: "<input\r\n  [sizing]=\"sizing\"\r\n  [value]=\"value$ | async\"\r\n  cFormControl\r\n/>\r\n", dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableColumnFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-smart-table-column-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\r\n  [sizing]=\"sizing\"\r\n  [value]=\"value$ | async\"\r\n  cFormControl\r\n/>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { column: [{
+                type: Input
+            }], sizing: [{
+                type: Input
+            }] } });
+
 class SmartTableHeadComponent {
     constructor() {
         this.columnFilterState = {};
@@ -13055,10 +13101,10 @@ class SmartTableHeadComponent {
         }
         return (typeof column !== 'object') ? true : typeof column.sorter === 'undefined' ? true : column.sorter;
     }
-    handleColumnFilterValueChange($event, column) {
+    handleColumnFilterValueChange($event) {
+        const { value, type: eventType, column } = Object.assign({}, $event);
         const columnKey = this.columnKey(column);
-        const columnFilterValue = $event.target.value;
-        const eventType = $event.type;
+        const columnFilterValue = value;
         const isLazy = typeof this.columnFilter === 'object' && this.columnFilter.lazy === true;
         if (((isLazy && eventType === 'input') || (!isLazy && eventType === 'change')) && columnFilterValue.length !== 0) {
             return;
@@ -13074,12 +13120,16 @@ class SmartTableHeadComponent {
         var _a;
         return `columnFilter_${(_a = this.columnKey(column)) !== null && _a !== void 0 ? _a : '_undefined'}`;
     }
+    get columnFilterEvent() {
+        return (typeof this.columnFilter === 'object' && this.columnFilter.lazy) ? 'change' : 'input';
+    }
+    ;
 }
 SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <input\r\n        (change)=\"handleColumnFilterValueChange($event, column)\"\r\n        (input)=\"handleColumnFilterValueChange($event, column)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFormControl\r\n        sizing=\"sm\"\r\n      />\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
+SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <c-smart-table-column-filter\r\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [column]=\"column\"\r\n        [delay]=\"300\"\r\n        [onEvent]=\"columnFilterEvent\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFilterInput\r\n        sizing=\"sm\"\r\n      ></c-smart-table-column-filter>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-head', template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <input\r\n        (change)=\"handleColumnFilterValueChange($event, column)\"\r\n        (input)=\"handleColumnFilterValueChange($event, column)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFormControl\r\n        sizing=\"sm\"\r\n      />\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
+            args: [{ selector: 'c-smart-table-head', template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <c-smart-table-column-filter\r\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [column]=\"column\"\r\n        [delay]=\"300\"\r\n        [onEvent]=\"columnFilterEvent\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFilterInput\r\n        sizing=\"sm\"\r\n      ></c-smart-table-column-filter>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
                 type: Input
             }], columnFilterState: [{
@@ -13337,6 +13387,10 @@ class SmartTableComponent {
         });
         return sorted;
     }
+    get tableFilterEvent() {
+        return (typeof this.tableFilter === 'object' && this.tableFilter.lazy) ? 'change' : 'input';
+    }
+    ;
     get columnFiltered() {
         let _items = this._items;
         if (this.columnFilter &&
@@ -13526,10 +13580,10 @@ class SmartTableComponent {
     }
 }
 SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #tableFilterTemplate>\r\n    <c-smart-table-filter\r\n      (valueChange)=\"handleTableFilterChange($event)\"\r\n      *ngIf=\"tableFilter\"\r\n      [filterLabel]=\"tableFilterLabel\"\r\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n      [tableFilter]=\"tableFilter\"\r\n      [value]=\"tableFilterState\"\r\n    >\r\n    </c-smart-table-filter>\r\n  </ng-template>\r\n\r\n  <ng-template #tableCleanerTemplate>\r\n    <button\r\n      (click)=\"clean($event)\"\r\n      *ngIf=\"cleaner\"\r\n      [disabled]=\"!isFiltered\"\r\n      [ngClass]=\"{'ms-1': tableFilter}\"\r\n      [tabindex]=\"0\"\r\n      cButton\r\n      variant=\"ghost\"\r\n      color=\"transparent\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr>\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n      </tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n       class=\"icon icon-custom-size\" width=\"18\">\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "tableFilter", "value"], outputs: ["valueChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }] });
+SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #tableFilterTemplate>\r\n    <c-smart-table-filter\r\n      (valueChange)=\"handleTableFilterChange($event)\"\r\n      *ngIf=\"tableFilter\"\r\n      [delay]=\"300\"\r\n      [filterLabel]=\"tableFilterLabel\"\r\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n      [onEvent]=\"tableFilterEvent\"\r\n      [value]=\"tableFilterState\"\r\n      cFilterInput\r\n    >\r\n    </c-smart-table-filter>\r\n  </ng-template>\r\n\r\n  <ng-template #tableCleanerTemplate>\r\n    <button\r\n      (click)=\"clean($event)\"\r\n      *ngIf=\"cleaner\"\r\n      [disabled]=\"!isFiltered\"\r\n      [ngClass]=\"{'ms-1': tableFilter}\"\r\n      [tabindex]=\"0\"\r\n      cButton\r\n      variant=\"ghost\"\r\n      color=\"transparent\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr>\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n      </tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n       class=\"icon icon-custom-size\" width=\"18\">\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #tableFilterTemplate>\r\n    <c-smart-table-filter\r\n      (valueChange)=\"handleTableFilterChange($event)\"\r\n      *ngIf=\"tableFilter\"\r\n      [filterLabel]=\"tableFilterLabel\"\r\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n      [tableFilter]=\"tableFilter\"\r\n      [value]=\"tableFilterState\"\r\n    >\r\n    </c-smart-table-filter>\r\n  </ng-template>\r\n\r\n  <ng-template #tableCleanerTemplate>\r\n    <button\r\n      (click)=\"clean($event)\"\r\n      *ngIf=\"cleaner\"\r\n      [disabled]=\"!isFiltered\"\r\n      [ngClass]=\"{'ms-1': tableFilter}\"\r\n      [tabindex]=\"0\"\r\n      cButton\r\n      variant=\"ghost\"\r\n      color=\"transparent\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr>\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n      </tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n       class=\"icon icon-custom-size\" width=\"18\">\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #tableFilterTemplate>\r\n    <c-smart-table-filter\r\n      (valueChange)=\"handleTableFilterChange($event)\"\r\n      *ngIf=\"tableFilter\"\r\n      [delay]=\"300\"\r\n      [filterLabel]=\"tableFilterLabel\"\r\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n      [onEvent]=\"tableFilterEvent\"\r\n      [value]=\"tableFilterState\"\r\n      cFilterInput\r\n    >\r\n    </c-smart-table-filter>\r\n  </ng-template>\r\n\r\n  <ng-template #tableCleanerTemplate>\r\n    <button\r\n      (click)=\"clean($event)\"\r\n      *ngIf=\"cleaner\"\r\n      [disabled]=\"!isFiltered\"\r\n      [ngClass]=\"{'ms-1': tableFilter}\"\r\n      [tabindex]=\"0\"\r\n      cButton\r\n      variant=\"ghost\"\r\n      color=\"transparent\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr>\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n      </tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n       class=\"icon icon-custom-size\" width=\"18\">\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
                 type: Input
             }], cleaner: [{
@@ -13854,7 +13908,9 @@ SmartTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 SmartTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SmartTableModule, declarations: [SmartTableComponent,
         SmartTableFilterComponent,
         SmartTableItemsPerPageSelectorComponent,
-        SmartTableHeadComponent], imports: [CommonModule,
+        SmartTableHeadComponent,
+        FilterInputDirective,
+        SmartTableColumnFilterComponent], imports: [CommonModule,
         ElementCoverModule,
         TableModule,
         PaginationModule,
@@ -13884,6 +13940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         SmartTableFilterComponent,
                         SmartTableItemsPerPageSelectorComponent,
                         SmartTableHeadComponent,
+                        FilterInputDirective,
+                        SmartTableColumnFilterComponent
                     ],
                     exports: [SmartTableComponent, SmartTableFilterComponent],
                     imports: [