@coreui/angular-pro 4.4.12 → 4.4.14

package/fesm2020/coreui-angular-pro.mjs

@@ -4858,10 +4858,14 @@ class FormCheckInputDirective {
      * @type boolean
      */
     set indeterminate(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (this._indeterminate !== newValue) {
-            this._indeterminate = newValue;
-            this.renderer.setProperty(this.hostElement.nativeElement, 'indeterminate', newValue);
+        const indeterminate = coerceBooleanProperty(value);
+        if (this._indeterminate !== indeterminate) {
+            this._indeterminate = indeterminate;
+            const htmlInputElement = this.hostElement.nativeElement;
+            if (indeterminate) {
+                this.renderer.setProperty(htmlInputElement, 'checked', false);
+            }
+            this.renderer.setProperty(htmlInputElement, 'indeterminate', indeterminate);
         }
     }
     ;
@@ -4875,6 +4879,13 @@ class FormCheckInputDirective {
             'is-invalid': this.valid === false
         };
     }
+    set checked(value) {
+        const checked = coerceBooleanProperty(value);
+        const htmlInputElement = this.hostElement?.nativeElement;
+        if (htmlInputElement) {
+            this.renderer.setProperty(htmlInputElement, 'checked', checked);
+        }
+    }
     get checked() {
         return this.hostElement?.nativeElement?.checked;
     }
@@ -4891,7 +4902,7 @@ class FormCheckInputDirective {
     }
 }
 FormCheckInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormCheckInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FormCheckInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FormCheckInputDirective, isStandalone: true, selector: "input[cFormCheckInput]", inputs: { type: "type", indeterminate: "indeterminate", valid: "valid" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses" } }, ngImport: i0 });
+FormCheckInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FormCheckInputDirective, isStandalone: true, selector: "input[cFormCheckInput]", inputs: { type: "type", indeterminate: "indeterminate", valid: "valid", checked: "checked" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormCheckInputDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4910,6 +4921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], checked: [{
+                type: Input
             }] } });
 
 class FormControlDirective {
@@ -8915,7 +8928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
-var _MultiSelectComponent_destroy$, _MultiSelectComponent_optionsReady$, _MultiSelectComponent_options, _MultiSelectComponent_value;
+var _MultiSelectComponent_destroy$, _MultiSelectComponent_optionsReady$, _MultiSelectComponent_options, _MultiSelectComponent_optionsContent, _MultiSelectComponent_value;
 // @ts-ignore
 const observeReferenceModifier = {
     name: 'observeReferenceModifier', enabled: true, phase: 'main', fn({ state }) { },
@@ -8953,6 +8966,7 @@ class MultiSelectComponent {
         this.optionsSelected$ = new BehaviorSubject([]);
         this.optionsSelected = new Map();
         this.value$ = new BehaviorSubject([]);
+        _MultiSelectComponent_optionsContent.set(this, []);
         this.onChange = (value) => { };
         this.onTouched = () => { };
         /**
@@ -9135,6 +9149,7 @@ class MultiSelectComponent {
      */
     set options(options) {
         if (Array.isArray(options)) {
+            __classPrivateFieldGet(this, _MultiSelectComponent_options, "f").clear();
             this.makeOptions(options);
         }
     }
@@ -9218,7 +9233,9 @@ class MultiSelectComponent {
         const visible = coerceBooleanProperty(value);
         if (visible !== this._visible) {
             this._visible = visible;
-            this.multiSelectService.toggleVisible(visible);
+            setTimeout(() => {
+                this.multiSelectService.toggleVisible(visible);
+            });
             if (!visible) {
                 // this.searchValue = '';
             }
@@ -9523,7 +9540,12 @@ class MultiSelectComponent {
             .pipe(takeUntil$1(__classPrivateFieldGet(this, _MultiSelectComponent_destroy$, "f")), delay(0), distinctUntilChanged((previous, current) => {
             const prev = previous.toArray().map(option => option.value);
             const curr = current.toArray().map(option => option.value);
-            return JSON.stringify(prev) === JSON.stringify(curr);
+            if (this.virtualScroller) {
+                return JSON.stringify(prev) === JSON.stringify(curr);
+            }
+            return JSON.stringify(__classPrivateFieldGet(this, _MultiSelectComponent_optionsContent, "f")) === JSON.stringify(curr);
+        }), tap(changes => {
+            __classPrivateFieldSet(this, _MultiSelectComponent_optionsContent, changes.toArray().map(option => option.value), "f");
         }))
             .subscribe(next => {
             this.visibleOptions = this.multiSelectOptionsContent?.filter((option) => option.visible).length;
@@ -9728,6 +9750,7 @@ class MultiSelectComponent {
         // if no template found, get defaultMultiSelectOptionTemplate from view
         if (!this.templates['multiSelectOptionTemplate']) {
             this.multiSelectOptionsContent = this.multiSelectOptionsView;
+            this.multiSelectOptionsContent.notifyOnChanges();
         }
         // multiSelectOptionsContent gets out of order on changes
         // do sort() and reset()
@@ -9818,7 +9841,7 @@ class MultiSelectComponent {
         this.activeOption = this.listKeyManager?.activeItem ?? null;
     }
 }
-_MultiSelectComponent_destroy$ = new WeakMap(), _MultiSelectComponent_optionsReady$ = new WeakMap(), _MultiSelectComponent_options = new WeakMap(), _MultiSelectComponent_value = new WeakMap();
+_MultiSelectComponent_destroy$ = new WeakMap(), _MultiSelectComponent_optionsReady$ = new WeakMap(), _MultiSelectComponent_options = new WeakMap(), _MultiSelectComponent_optionsContent = new WeakMap(), _MultiSelectComponent_value = new WeakMap();
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$5.FocusMonitor }, { token: MultiSelectService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiSelectComponent, isStandalone: true, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeFormId: "nativeFormId", nativeId: "nativeId", nativeName: "nativeName", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", searchValue: "searchValue", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", valid: "valid", virtualScroller: "virtualScroller", visibleItems: "visibleItems", itemSize: "itemSize", itemMinWidth: "itemMinWidth", visible: "visible", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.aria-multiselectable": "this.ariaMultiSelectable", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
@@ -14147,20 +14170,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+var _SmartTableHeadComponent_selectAll, _SmartTableHeadComponent_selectedAllPreviousValue, _SmartTableHeadComponent_selectedAll;
 class SmartTableHeadComponent {
     constructor() {
         this.columnFilterState = {};
         this.columnSorter = true;
         this.component = 'thead';
+        _SmartTableHeadComponent_selectAll.set(this, true);
+        _SmartTableHeadComponent_selectedAllPreviousValue.set(this, void 0);
+        _SmartTableHeadComponent_selectedAll.set(this, false);
         this._columnFilterTemplates = {};
         // todo
         // @Input() sortingIcon?: string | TemplateRef<any>;
         // @Input() sortingIconAscending?: string | TemplateRef<any>;
         // @Input() sortingIconDescending?: string | TemplateRef<any>;
+        this.indeterminate = new BehaviorSubject(false);
         this.columnFilterStateChange = new EventEmitter();
         this.sorterStateChange = new EventEmitter();
         this.selectAllChange = new EventEmitter();
     }
+    set selectAll(value) {
+        __classPrivateFieldSet(this, _SmartTableHeadComponent_selectAll, coerceBooleanProperty(value), "f");
+    }
+    ;
+    get selectAll() {
+        return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectAll, "f");
+    }
+    set selectedAll(value) {
+        this.indeterminate.next(value === 'indeterminate');
+        __classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAll, value === 'indeterminate' ? false : coerceBooleanProperty(value), "f");
+        if (value !== 'indeterminate') {
+            __classPrivateFieldSet(this, _SmartTableHeadComponent_selectedAllPreviousValue, __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f"), "f");
+        }
+    }
+    ;
+    get selectedAll() {
+        return __classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAll, "f");
+    }
     set columnFilterTemplates(value) {
         this._columnFilterTemplates = { ...value };
     }
@@ -14259,6 +14305,9 @@ class SmartTableHeadComponent {
         this.columnFilterStateChange.emit({ column: columnKey, value: columnFilterValue, type: eventType });
     }
     handleSelectAllChecked($event) {
+        $event.preventDefault();
+        $event.target.checked = !__classPrivateFieldGet(this, _SmartTableHeadComponent_selectedAllPreviousValue, "f");
+        // ($event.target as HTMLInputElement).checked = !this.selectedAll;
         const selectAll = $event.target.checked;
         this.selectAllChange.emit(selectAll);
     }
@@ -14270,8 +14319,9 @@ class SmartTableHeadComponent {
     }
     ;
 }
+_SmartTableHeadComponent_selectAll = new WeakMap(), _SmartTableHeadComponent_selectedAllPreviousValue = new WeakMap(), _SmartTableHeadComponent_selectedAll = new WeakMap();
 SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SmartTableHeadComponent, isStandalone: true, 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    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      ></ng-container>\n    </ng-template>\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\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      <c-smart-table-column-filter\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [column]=\"column\"\n        [delay]=\"300\"\n        [onEvent]=\"columnFilterEvent\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFilterInput\n        sizing=\"sm\"\n      ></c-smart-table-column-filter>\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 mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end mx-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: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SmartTableHeadComponent, isStandalone: true, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", selectedAll: "selectedAll", 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\n      cFormCheckInput\n      (change)=\"handleSelectAllChecked($event)\"\n      [checked]=\"selectedAll === true\"\n      [indeterminate]=\"indeterminate | async\"\n      type=\"checkbox\"\n      [disabled]=\"!selectAll\"\n      autocomplete=\"off\"\n    >\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    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      />\n    </ng-template>\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\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\n      *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n    />\n    <ng-template #defaultColumnFilter let-column>\n      <c-smart-table-column-filter\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [column]=\"column\"\n        [delay]=\"300\"\n        [onEvent]=\"columnFilterEvent\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFilterInput\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 mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\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: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-smart-table-head', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
@@ -14280,6 +14330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         HtmlAttributesDirective,
                         SmartTableColumnFilterComponent,
                         TableColorDirective,
+                        AsyncPipe,
                         NgForOf,
                         NgIf,
                         NgStyle,
@@ -14287,7 +14338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         NgSwitchCase,
                         NgSwitchDefault,
                         NgTemplateOutlet
-                    ], 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    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      ></ng-container>\n    </ng-template>\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\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      <c-smart-table-column-filter\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [column]=\"column\"\n        [delay]=\"300\"\n        [onEvent]=\"columnFilterEvent\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFilterInput\n        sizing=\"sm\"\n      ></c-smart-table-column-filter>\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 mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end mx-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"] }]
+                    ], template: "<tr>\n  <th *ngIf=\"selectable\">\n    <input\n      cFormCheckInput\n      (change)=\"handleSelectAllChecked($event)\"\n      [checked]=\"selectedAll === true\"\n      [indeterminate]=\"indeterminate | async\"\n      type=\"checkbox\"\n      [disabled]=\"!selectAll\"\n      autocomplete=\"off\"\n    >\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    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      />\n    </ng-template>\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\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\n      *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"\n    />\n    <ng-template #defaultColumnFilter let-column>\n      <c-smart-table-column-filter\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [column]=\"column\"\n        [delay]=\"300\"\n        [onEvent]=\"columnFilterEvent\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFilterInput\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 mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\" />\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\" />\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end mx-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\" />\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: [{
@@ -14302,6 +14353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], selectAll: [{
                 type: Input
+            }], selectedAll: [{
+                type: Input
             }], sorterValue: [{
                 type: Input
             }], columnFilterTemplates: [{
@@ -14368,6 +14421,7 @@ class SmartTableComponent {
     constructor(iterableDiffers, keyValueDiffers) {
         this.iterableDiffers = iterableDiffers;
         this.keyValueDiffers = keyValueDiffers;
+        this.selectedAllSubject = new BehaviorSubject(false);
         this._activePage = 1;
         this._cleaner = false;
         this._clickableRows = false;
@@ -14381,6 +14435,7 @@ class SmartTableComponent {
         this.noItemsLabel = 'No items found';
         this._pagination = false;
         this._selectable = false;
+        this._selectAll = true;
         this._sorterValue = {};
         this.tableFilterLabel = 'Filter:';
         this.tableFilterPlaceholder = 'type string...';
@@ -14399,12 +14454,14 @@ class SmartTableComponent {
         this.tableFilterValueChange = new EventEmitter();
         this.templates = { tableDetails: null, tableData: null };
         this.columnFilterTemplates = {};
-        this._selectedAll = false;
         this._columnFiltered = [];
         this.itemsDiffer = this.iterableDiffers.find(this.items).create();
         this.itemsFilteredDiffer = this.iterableDiffers.find(this._columnFiltered).create();
         this.columFilterValueDiffer = this.keyValueDiffers.find(this.columnFilterValue).create();
         this.sorterValueDiffer = this.keyValueDiffers.find(this.sorterValue).create();
+        setTimeout(() => {
+            this.selectedAllSubject.next(this.selectedAll);
+        }, 0);
     }
     set activePage(value) {
         this._activePage = coerceNumberProperty(value) || 1;
@@ -14485,6 +14542,12 @@ class SmartTableComponent {
     get selectable() {
         return this._selectable;
     }
+    set selectAll(value) {
+        this._selectAll = coerceBooleanProperty(value);
+    }
+    get selectAll() {
+        return this._selectAll;
+    }
     set sorterValue(value) {
         if (this.sorterValueDiffer) {
             const changes = this.sorterValueDiffer.diff(value);
@@ -14529,14 +14592,9 @@ class SmartTableComponent {
         this.columnFilterTemplates = { ...this.columnFilterTemplates };
     }
     get selectedAll() {
-        const selected = this.items.filter((item) => item._selected === true);
-        return selected.length === 0 ? false : selected.length === this.items.length ? true : 'indeterminate';
-        // return this._selectedAll;
-    }
-    set selectedAll(value) {
-        const selected = this.items.filter((item) => item._selected === true);
-        this._selectedAll = selected.length === 0 ? false : selected.length === this.items.length ? true : 'indeterminate';
-        this.selectedItemsChange.emit(selected);
+        const selected = this.items.some((item) => item._selected === true);
+        const unselected = this.items.some((item) => item._selected === false);
+        return selected && unselected ? 'indeterminate' : selected;
     }
     get tableFilterState() {
         return this.tableFilterValue ? this.tableFilterValue : '';
@@ -14739,15 +14797,21 @@ class SmartTableComponent {
         }
     }
     handleRowChecked($event, item) {
-        item._selected = $event.target.checked;
-        const selected = this.items.filter((item) => item._selected === true);
-        this.selectedItemsChange.emit(selected);
+        item._selected = item._selectable !== false && $event.target.checked;
+        this.selectedItemsChange.emit(this.items.filter((item) => item._selected === true));
+        setTimeout(() => {
+            this.selectedAllSubject.next(this.selectedAll);
+        }, 0);
     }
     handleSelectAllChange($event) {
         this._items = this.items.map((item) => {
-            return { ...item, _selected: $event };
+            return { ...item, _selected: (item._selectable !== false ? $event : !!item._selected) };
         });
-        this.selectedAll = $event;
+        this.selectedAllSubject.next($event);
+        setTimeout(() => {
+            this.selectedItemsChange.emit(this.items.filter((item) => item._selected === true));
+            this.selectedAllSubject.next(this.selectedAll);
+        }, 0);
     }
     tableDataCellProps(item, colName) {
         const props = item['_cellProps'] && {
@@ -14790,10 +14854,11 @@ class SmartTableComponent {
     }
 }
 SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SmartTableComponent, isStandalone: true, 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 || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n  <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n    <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n  </div>\n  <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n    <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [delay]=\"300\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [onEvent]=\"tableFilterEvent\"\n      [value]=\"tableFilterState\"\n      cFilterInput\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\n  <ng-template #tableCustomHeaderTemplate>\n    <div class=\"col-auto p-0 ms-auto\">\n      <ng-content select=\"[customHeader]\"></ng-content>\n    </div>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { 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: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] });
+SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SmartTableComponent, isStandalone: true, 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", selectAll: "selectAll", 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 || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n  <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n    <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n  </div>\n  <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n    <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [delay]=\"300\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [onEvent]=\"tableFilterEvent\"\n      [value]=\"tableFilterState\"\n      cFilterInput\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\n  <ng-template #tableCustomHeaderTemplate>\n    <div class=\"col-auto p-0 ms-auto\">\n      <ng-content select=\"[customHeader]\"></ng-content>\n    </div>\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]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\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]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\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)\"\n               [checked]=\"item._selected ?? false\"\n               cFormCheckInput\n               [disabled]=\"(item?._selectable === false) ?? false\"\n               autocomplete=\"off\"\n        >\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] }\" />\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid", "checked"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { 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: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "selectedAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', standalone: true, imports: [
+                        AsyncPipe,
                         NgIf,
                         NgTemplateOutlet,
                         NgClass,
@@ -14812,7 +14877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         TableActiveDirective,
                         TableColorDirective,
                         TableDirective
-                    ], template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n  <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n    <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n  </div>\n  <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n    <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [delay]=\"300\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [onEvent]=\"tableFilterEvent\"\n      [value]=\"tableFilterState\"\n      cFilterInput\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\n  <ng-template #tableCustomHeaderTemplate>\n    <div class=\"col-auto p-0 ms-auto\">\n      <ng-content select=\"[customHeader]\"></ng-content>\n    </div>\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"] }]
+                    ], template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner || templates['tableCustomHeader']\" class=\"row my-2 mx-0\">\n  <div class=\"col-auto p-0\" *ngIf=\"tableFilter\">\n    <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n  </div>\n  <div class=\"col-auto p-0\" *ngIf=\"cleaner\">\n    <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"templates['tableCustomHeader'] || tableCustomHeaderTemplate\"></ng-container>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [delay]=\"300\"\n      [filterLabel]=\"tableFilterLabel\"\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\n      [onEvent]=\"tableFilterEvent\"\n      [value]=\"tableFilterState\"\n      cFilterInput\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\n  <ng-template #tableCustomHeaderTemplate>\n    <div class=\"col-auto p-0 ms-auto\">\n      <ng-content select=\"[customHeader]\"></ng-content>\n    </div>\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]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\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]=\"selectAll\"\n      [selectedAll]=\"(selectedAllSubject | async) ?? false\"\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)\"\n               [checked]=\"item._selected ?? false\"\n               cFormCheckInput\n               [disabled]=\"(item?._selectable === false) ?? false\"\n               autocomplete=\"off\"\n        >\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] }\" />\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: [{
@@ -14849,6 +14914,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], selectable: [{
                 type: Input
+            }], selectAll: [{
+                type: Input
             }], sorterValue: [{
                 type: Input
             }], tableFilter: [{