@coreui/angular-pro 4.2.19 → 4.2.21

package/fesm2020/coreui-angular-pro.mjs

@@ -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 } from 'rxjs';
+import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, tap, map, debounceTime } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isValid, format } from 'date-fns';
 import * as i2 from '@angular/forms';
@@ -8843,7 +8843,7 @@ class MultiSelectComponent {
     selectOptions() {
         this.multiSelectOptions?.forEach((option, index) => {
             option.optionsStyle = this.optionsStyle;
-            option.selected = option.value !== undefined ? this.value.includes(option.value) || option.selected : option.selected;
+            option.selected = option.value !== undefined ? this.value.includes(option.value) : !!option.selected;
         });
     }
     clearAllOptions($event) {
@@ -8959,7 +8959,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         {
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                            (remove)=\"handleTagRemove($event)\"\n                            [option]=\"option\"\n                            tabindex=\"-1\">\n        </c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n        <ng-template #pluralMap>\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n        </ng-template>\n      </ng-template>\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\n      autocomplete=\"off\"\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n        {{ selectAllLabel }}\n      </button>\n      <div #multiselectOptionsDiv\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n           class=\"form-multi-select-options\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\r\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\r\n    <div class=\"form-multi-select-selection\">\r\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                            (remove)=\"handleTagRemove($event)\"\r\n                            [option]=\"option\"\r\n                            tabindex=\"-1\">\r\n        </c-multi-select-tag>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n        <ng-template #pluralMap>\r\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n        </ng-template>\r\n      </ng-template>\r\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\r\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\r\n      <!--      </ng-template>-->\r\n    </div>\r\n\r\n    <input\r\n      #inputElement\r\n      (keydown)=\"handleSearchKeyDown($event)\"\r\n      [(ngModel)]=\"searchValue\"\r\n      [disabled]=\"disabled || !search\"\r\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\r\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\r\n      autocomplete=\"off\"\r\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n      type=\"text\"\r\n    >\r\n\r\n    <button\r\n      (click)=\"clearAllOptions($event)\"\r\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n      [disabled]=\"disabled || !isDropdownVisible\"\r\n      aria-label=\"Clear all\"\r\n      class=\"form-multi-select-selection-cleaner\"\r\n    ></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\r\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n        {{ selectAllLabel }}\r\n      </button>\r\n      <div #multiselectOptionsDiv\r\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n           class=\"form-multi-select-options\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #optionsEmpty>\r\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n    </ng-template>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -8967,7 +8967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         {
                             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                            (remove)=\"handleTagRemove($event)\"\n                            [option]=\"option\"\n                            tabindex=\"-1\">\n        </c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n        <ng-template #pluralMap>\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n        </ng-template>\n      </ng-template>\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\n      autocomplete=\"off\"\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n        {{ selectAllLabel }}\n      </button>\n      <div #multiselectOptionsDiv\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n           class=\"form-multi-select-options\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\r\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\r\n    <div class=\"form-multi-select-selection\">\r\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                            (remove)=\"handleTagRemove($event)\"\r\n                            [option]=\"option\"\r\n                            tabindex=\"-1\">\r\n        </c-multi-select-tag>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n        <ng-template #pluralMap>\r\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n        </ng-template>\r\n      </ng-template>\r\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\r\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\r\n      <!--      </ng-template>-->\r\n    </div>\r\n\r\n    <input\r\n      #inputElement\r\n      (keydown)=\"handleSearchKeyDown($event)\"\r\n      [(ngModel)]=\"searchValue\"\r\n      [disabled]=\"disabled || !search\"\r\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\r\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\r\n      autocomplete=\"off\"\r\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n      type=\"text\"\r\n    >\r\n\r\n    <button\r\n      (click)=\"clearAllOptions($event)\"\r\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n      [disabled]=\"disabled || !isDropdownVisible\"\r\n      aria-label=\"Clear all\"\r\n      class=\"form-multi-select-selection-cleaner\"\r\n    ></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\r\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n        {{ selectAllLabel }}\r\n      </button>\r\n      <div #multiselectOptionsDiv\r\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n           class=\"form-multi-select-options\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #optionsEmpty>\r\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n    </ng-template>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{
@@ -12467,23 +12467,26 @@ 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);
+        this.value$ = new BehaviorSubject('');
         this.filterLabel = 'Filter:';
         this.filterPlaceholder = 'Filter';
         this.valueChange = new EventEmitter();
-        this._value = '';
-        this.eventType = '';
     }
-    set value(value) {
-        if (this._value != value) {
-            this._value = value;
-        }
-        if (this.eventType)
-            this.valueChange.emit({ value, type: this.eventType });
+    set tableFilter(value) {
+        __classPrivateFieldSet(this, _SmartTableFilterComponent_lazy, (typeof value === 'object' && value.lazy) ? true : false, "f");
     }
-    get value() {
-        return this._value;
+    ;
+    set value(value) {
+        this.value$.next(value);
     }
     get hostClasses() {
         return {
@@ -12491,24 +12494,63 @@ class SmartTableFilterComponent {
             'mb-2': true
         };
     }
-    handleTableFilterChange($event) {
-        this.eventType = $event.type;
-        this.value = $event.target.value;
+    ngAfterViewInit() {
+        this.setSubscription();
+    }
+    ngOnDestroy() {
+        this.setSubscription(false);
+    }
+    setSubscription(subscribe = !__classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")) {
+        if (subscribe) {
+            __classPrivateFieldSet(this, _SmartTableFilterComponent_valueSubscription, this.value$
+                .pipe(distinctUntilChanged())
+                .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") });
+                }
+            }), "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) => {
+                dueTime = __classPrivateFieldGet(this, _SmartTableFilterComponent_lazy, "f") ? 0 : __classPrivateFieldGet(this, _SmartTableFilterComponent_dueTime, "f");
+                __classPrivateFieldSet(this, _SmartTableFilterComponent_eventType, event.type ?? eventName, "f");
+            }), map(event => {
+                return event.target.value;
+            }), debounceTime(dueTime))
+                .subscribe((value) => {
+                if (value !== __classPrivateFieldGet(this, _SmartTableFilterComponent_value, "f")) {
+                    this.value$.next(value);
+                }
+            }), "f");
+        }
+        else {
+            __classPrivateFieldGet(this, _SmartTableFilterComponent_inputSubscription, "f")?.unsubscribe();
+            this.value$.complete();
+            __classPrivateFieldGet(this, _SmartTableFilterComponent_valueSubscription, "f")?.unsubscribe();
+        }
     }
 }
+_SmartTableFilterComponent_dueTime = new WeakMap(), _SmartTableFilterComponent_value = new WeakMap(), _SmartTableFilterComponent_eventType = new WeakMap(), _SmartTableFilterComponent_lazy = new WeakMap(), _SmartTableFilterComponent_valueSubscription = new WeakMap(), _SmartTableFilterComponent_inputSubscription = 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", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{filterLabel}}</label>\r\n<div class=\"col-sm-auto\">\r\n  <input (change)=\"handleTableFilterChange($event)\"\r\n         (input)=\"handleTableFilterChange($event)\"\r\n         [placeholder]=\"filterPlaceholder\"\r\n         [value]=\"value\"\r\n         cFormControl />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }] });
+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>\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [value]=\"(value$ | async)\"\n    cFormControl\n    size=\"10\"\n    #filterInput\n  />\n</div>\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-filter', template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{filterLabel}}</label>\r\n<div class=\"col-sm-auto\">\r\n  <input (change)=\"handleTableFilterChange($event)\"\r\n         (input)=\"handleTableFilterChange($event)\"\r\n         [placeholder]=\"filterPlaceholder\"\r\n         [value]=\"value\"\r\n         cFormControl />\r\n</div>\r\n" }]
+            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"!!filterLabel\" cLabel=\"col\" class=\"col-auto\">{{filterLabel}}</label>\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [value]=\"(value$ | async)\"\n    cFormControl\n    size=\"10\"\n    #filterInput\n  />\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
                 type: Input
             }], filterPlaceholder: [{
                 type: Input
+            }], tableFilter: [{
+                type: Input
             }], value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput', { static: true }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -12739,21 +12781,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['class']
             }] } });
 
+var _SmartTableItemsPerPageSelectorComponent_itemsPerPage;
 class SmartTableItemsPerPageSelectorComponent {
     constructor() {
-        this._itemsPerPage = 5;
+        _SmartTableItemsPerPageSelectorComponent_itemsPerPage.set(this, 5);
         this.itemsPerPageLabel = 'Items per page:';
         this.itemsPerPageOptions = [5, 10, 20, 50];
         this.itemsPerPageChange = new EventEmitter();
     }
     set itemsPerPage(value) {
-        if (this._itemsPerPage != value) {
-            this._itemsPerPage = value;
+        if (__classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f") != value) {
+            __classPrivateFieldSet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, value, "f");
             this.itemsPerPageChange.emit(value);
         }
     }
     get itemsPerPage() {
-        return this._itemsPerPage;
+        return __classPrivateFieldGet(this, _SmartTableItemsPerPageSelectorComponent_itemsPerPage, "f");
     }
     get hostClasses() {
         return {
@@ -12761,6 +12804,7 @@ class SmartTableItemsPerPageSelectorComponent {
         };
     }
 }
+_SmartTableItemsPerPageSelectorComponent_itemsPerPage = new WeakMap();
 SmartTableItemsPerPageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SmartTableItemsPerPageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: { itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{itemsPerPageLabel}}</label>\r\n<div class=\"col-auto\">\r\n  <select [(ngModel)]=\"itemsPerPage\" cSelect name=\"itemsPerPageSelector\">\r\n    <option *ngFor=\"let option of itemsPerPageOptions; let i = index\" [ngValue]=\"option\">{{option}}</option>\r\n  </select>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableItemsPerPageSelectorComponent, decorators: [{
@@ -12874,7 +12918,10 @@ class SmartTableHeadComponent {
         return typeof column !== 'object' ? true : typeof column.filter === 'undefined' ? true : column.filter;
     }
     columnSorterEnabled(column) {
-        return typeof column !== 'object' ? true : typeof column.sorter === 'undefined' ? true : column.sorter;
+        if (!this.columnSorter) {
+            return false;
+        }
+        return (typeof column !== 'object') ? true : typeof column.sorter === 'undefined' ? true : column.sorter;
     }
     handleColumnFilterValueChange($event, column) {
         const columnKey = this.columnKey(column);
@@ -12896,10 +12943,10 @@ class SmartTableHeadComponent {
     }
 }
 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>\n  <th *ngIf=\"selectable\">\n    <input (change)=\"handleSelectAllChecked($event)\"\n           [checked]=\"selectAll === true\"\n           [indeterminate]=\"selectAll === 'indeterminate'\"\n           cFormCheckInput>\n  </th>\n  <th\n    (click)=\"handleSortClick(column, i)\"\n    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      ></ng-container>\n    </ng-template>\n  </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n  <th *ngIf=\"selectable\"></th>\n  <th *ngFor=\"let column of columns; let i = index\"\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\n    <ng-template #defaultColumnFilter let-column>\n      <input\n        (change)=\"handleColumnFilterValueChange($event, column)\"\n        (input)=\"handleColumnFilterValueChange($event, column)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFormControl\n        sizing=\"sm\"\n      />\n    </ng-template>\n  </th>\n</tr>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  <ng-container [ngSwitch]=\"columnSorterState\">\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n    </span>\n  </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n  </svg>\n</ng-template>\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"] }] });
 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>\n  <th *ngIf=\"selectable\">\n    <input (change)=\"handleSelectAllChecked($event)\"\n           [checked]=\"selectAll === true\"\n           [indeterminate]=\"selectAll === 'indeterminate'\"\n           cFormCheckInput>\n  </th>\n  <th\n    (click)=\"handleSortClick(column, i)\"\n    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      ></ng-container>\n    </ng-template>\n  </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n  <th *ngIf=\"selectable\"></th>\n  <th *ngFor=\"let column of columns; let i = index\"\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\n    <ng-template #defaultColumnFilter let-column>\n      <input\n        (change)=\"handleColumnFilterValueChange($event, column)\"\n        (input)=\"handleColumnFilterValueChange($event, column)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFormControl\n        sizing=\"sm\"\n      />\n    </ng-template>\n  </th>\n</tr>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  <ng-container [ngSwitch]=\"columnSorterState\">\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n    </span>\n  </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n    ></polygon>\n  </svg>\n</ng-template>\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: [{
@@ -13269,7 +13316,7 @@ class SmartTableComponent {
     }
     handleTableFilterChange($event) {
         const { value, type } = $event;
-        const isLazy = typeof this.tableFilter === 'object' && this.tableFilter?.lazy === true;
+        const isLazy = typeof this.tableFilter === 'object' && this.tableFilter.lazy === true;
         if (((isLazy && type === 'input') || (!isLazy && type === 'change')) && value.length !== 0) {
             return;
         }
@@ -13335,20 +13382,20 @@ class SmartTableComponent {
         }
         if (changes['tableFilterValue']) {
             const tableFilterValueChange = changes['tableFilterValue'];
-            if (tableFilterValueChange.firstChange) {
-                const currentValue = tableFilterValueChange.currentValue;
-                if (currentValue.length) {
-                    this.setActivePage(1);
-                }
+            // if (tableFilterValueChange.firstChange) {
+            const currentValue = tableFilterValueChange.currentValue;
+            if (currentValue.length) {
+                this.setActivePage(1);
             }
+            // }
         }
     }
 }
 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      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\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        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\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      [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      [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 *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><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']; 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 class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\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\"></polygon>\r\n    <polygon class=\"ci-primary\"\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\"></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", "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\">\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n    </div>\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [tableFilter]=\"tableFilter\"\n      [value]=\"tableFilterState\"\n    >\n    </c-smart-table-filter>\n  </ng-template>\n\n  <ng-template #tableCleanerTemplate>\n    <button\n      (click)=\"clean($event)\"\n      *ngIf=\"cleaner\"\n      [disabled]=\"!isFiltered\"\n      [ngClass]=\"{'ms-1': tableFilter}\"\n      [tabindex]=\"0\"\n      cButton\n      variant=\"ghost\"\n      color=\"transparent\"\n    >\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n    </button>\n  </ng-template>\n</div>\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered\"\n         [borderless]=\"tableProps?.borderless\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small\"\n         [striped]=\"tableProps?.striped\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         cTable\n  >\n    <c-smart-table-head\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"header\"\n      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n    <c-smart-table-head\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"footer\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n  </table>\n  <c-element-cover\n    *ngIf=\"loading\"\n    [boundaries]=\"[\n      { sides: ['top'], query: 'td' },\n      { sides: ['bottom'], query: 'tbody' }\n    ]\"\n  ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <c-smart-pagination\n        (activePageChange)=\"setActivePage($event)\"\n        *ngIf=\"pagination && numberOfPages > 1\"\n        [activePage]=\"activePage\"\n        [pages]=\"numberOfPages\">\n      </c-smart-pagination>\n    </div>\n    <div class=\"col-auto ms-auto\">\n      <c-smart-table-items-per-page-selector\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n        *ngIf=\"itemsPerPageSelect\"\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\n        [itemsPerPage]=\"itemsPerPage\"\n      >\n      </c-smart-table-items-per-page-selector>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n         [cAlign]=\"tableBodyProps?.align\"\n  >\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n        (click)=\"handleRowClick({$event, item, i})\"\n        [cTableActive]=\"item._props?.active\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\n      >\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\n      </td>\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\n      </ng-template>\n    </tr>\n    <ng-template [ngIf]=\"templates['tableDetails']\">\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n      <tr>\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n      </tr>\n      <tr class=\"p-0\">\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n  </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n  >\n    {{tdContent}}\n  </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  <tr *ngIf=\"!currentItems.length\">\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n  </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n       class=\"icon icon-custom-size\" width=\"18\">\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n      class=\"ci-primary\">\n    </polygon>\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n      class=\"ci-primary\">\n    </polygon>\n  </svg>\n</ng-template>\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"] }] });
 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      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\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        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\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      [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      [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 *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><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']; 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 class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\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\"></polygon>\r\n    <polygon class=\"ci-primary\"\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\"></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\">\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n    </div>\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [tableFilter]=\"tableFilter\"\n      [value]=\"tableFilterState\"\n    >\n    </c-smart-table-filter>\n  </ng-template>\n\n  <ng-template #tableCleanerTemplate>\n    <button\n      (click)=\"clean($event)\"\n      *ngIf=\"cleaner\"\n      [disabled]=\"!isFiltered\"\n      [ngClass]=\"{'ms-1': tableFilter}\"\n      [tabindex]=\"0\"\n      cButton\n      variant=\"ghost\"\n      color=\"transparent\"\n    >\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n    </button>\n  </ng-template>\n</div>\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered\"\n         [borderless]=\"tableProps?.borderless\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small\"\n         [striped]=\"tableProps?.striped\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         cTable\n  >\n    <c-smart-table-head\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"header\"\n      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n    <c-smart-table-head\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"footer\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n  </table>\n  <c-element-cover\n    *ngIf=\"loading\"\n    [boundaries]=\"[\n      { sides: ['top'], query: 'td' },\n      { sides: ['bottom'], query: 'tbody' }\n    ]\"\n  ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <c-smart-pagination\n        (activePageChange)=\"setActivePage($event)\"\n        *ngIf=\"pagination && numberOfPages > 1\"\n        [activePage]=\"activePage\"\n        [pages]=\"numberOfPages\">\n      </c-smart-pagination>\n    </div>\n    <div class=\"col-auto ms-auto\">\n      <c-smart-table-items-per-page-selector\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n        *ngIf=\"itemsPerPageSelect\"\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\n        [itemsPerPage]=\"itemsPerPage\"\n      >\n      </c-smart-table-items-per-page-selector>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n         [cAlign]=\"tableBodyProps?.align\"\n  >\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n        (click)=\"handleRowClick({$event, item, i})\"\n        [cTableActive]=\"item._props?.active\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\n      >\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\n      </td>\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\n      </ng-template>\n    </tr>\n    <ng-template [ngIf]=\"templates['tableDetails']\">\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n      <tr>\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n      </tr>\n      <tr class=\"p-0\">\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n  </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n  >\n    {{tdContent}}\n  </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  <tr *ngIf=\"!currentItems.length\">\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n  </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n       class=\"icon icon-custom-size\" width=\"18\">\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n      class=\"ci-primary\">\n    </polygon>\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\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\"\n      class=\"ci-primary\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
                 type: Input
             }], cleaner: [{