@coreui/angular-pro 4.5.23 → 4.5.25

package/fesm2022/coreui-angular-pro.mjs

@@ -12,9 +12,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter, tap, distinctUntilChanged, debounceTime, map, delay, combineLatestWith, take } from 'rxjs/operators';
 import * as i1$3 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$4 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
 import { createPopper } from '@popperjs/core';
+import * as i1$4 from '@angular/cdk/layout';
 import * as i1$5 from '@angular/cdk/a11y';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -1513,16 +1512,13 @@ const isThisYear = (year) => {
     return (year == today.getFullYear());
 };
 const isValidDate = (date) => {
-    try {
+    if (date instanceof Date || typeof date === 'number' || typeof date === 'string') {
+        // Try to create a Date object from Date or timestamp or string
         const dateObj = new Date(date);
-        const dateVal = dateObj.getTime();
-        // console.log('isValidDate', date, d.getTime(), !!d.getTime())
-        return dateVal === 0 || !!dateVal;
-    }
-    catch (err) {
-        console.warn(`Invalid date ${date}`, err);
-        return false;
+        return !isNaN(dateObj.getTime());
     }
+    // If none of the above conditions are met, it's not a valid date
+    return false;
 };
 const tryDate = (value, propName = 'date') => {
     let _value;
@@ -1661,7 +1657,6 @@ class CalendarService {
             if (entry === state[key]) {
                 continue;
             }
-            // if (isValidDate(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
             if (isValidDate(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
                 continue;
             }
@@ -6477,6 +6472,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 }]
         }] });
 
+class CustomRangeKeyPipe {
+    transform(customRange, ...args) {
+        return customRange[0];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: CustomRangeKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: CustomRangeKeyPipe, isStandalone: true, name: "customRangeKey" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: CustomRangeKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'customRangeKey',
+                    standalone: true
+                }]
+        }] });
+
 /** Must be a valid date string */
 // todo: validation
 // export function invalidDateStringValidator(locale: string): ValidatorFn {
@@ -6570,6 +6580,7 @@ class DateRangePickerComponent {
         this.templates = {};
         this.dateChangeSubscriptions = [];
         this.isMobile = true;
+        this.showRanges = false;
         this._startDateValue = this.formatDate(this.startDate);
         this._endDateValue = this.formatDate(this.endDate);
         // todo: validation
@@ -6585,6 +6596,11 @@ class DateRangePickerComponent {
             // Validators.maxLength(10),
             // invalidDateStringValidator(this.locale)
         ]);
+        this.#breakpoints = {
+            OneCalendarRanges: '(min-width: 480px)',
+            TwoCalendars: '(max-width: 650px)',
+            TwoCalendarsRanges: '(max-width: 810px)'
+        };
         this.setInputValue = (elementRef, date) => {
             if (!elementRef) {
                 return;
@@ -6852,14 +6868,22 @@ class DateRangePickerComponent {
                 this.timepicker ? date.toLocaleString(this.locale) :
                     date.toLocaleDateString(this.locale);
     }
+    #breakpoints;
     ngOnInit() {
+        this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
+        const breakpoints = this.#breakpoints;
         this.layoutChanges = this.breakpointObserver.observe([
-            Breakpoints.Handset,
-            Breakpoints.Tablet
+            breakpoints.OneCalendarRanges,
+            breakpoints.TwoCalendars,
+            breakpoints.TwoCalendarsRanges
         ]).subscribe(result => {
-            this.isMobile = result.matches;
+            if (result.matches) {
+                this.isMobile = (this.customRanges?.length > 0 && result.breakpoints[breakpoints.TwoCalendarsRanges]) || result.breakpoints[breakpoints.TwoCalendars];
+                if (this.customRanges?.length > 0) {
+                    this.showRanges = !result.breakpoints[breakpoints.OneCalendarRanges];
+                }
+            }
         });
-        this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
         this.startDateValue = this.formatDate(this.startDate);
         this.endDateValue = this.formatDate(this.endDate);
         this.subscribeDateChange();
@@ -7018,7 +7042,7 @@ class DateRangePickerComponent {
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { 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: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { 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: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -7036,14 +7060,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                         DropdownMenuDirective,
                         InputGroupComponent,
                         FormControlDirective,
-                        InputGroupTextDirective
+                        InputGroupTextDirective,
+                        CustomRangeKeyPipe
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i1$4.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -7198,7 +7223,7 @@ class DatePickerComponent extends DateRangePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { 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: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }] }); }
+        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { 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: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -7216,14 +7241,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                         DropdownMenuDirective,
                         InputGroupComponent,
                         FormControlDirective,
-                        InputGroupTextDirective
+                        InputGroupTextDirective,
+                        CustomRangeKeyPipe
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid ?? undefined\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\"\n            *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n            class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i1$4.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
@@ -14141,6 +14167,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 type: Input
             }] } });
 
+class SmartTableColumnLabelPipe {
+    transform(column, ...args) {
+        return typeof column === 'object' ? column?.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
+    }
+    prettifyName(name) {
+        return name
+            .replace(/[-_.]/g, ' ')
+            .replace(/ +/g, ' ')
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SmartTableColumnLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: SmartTableColumnLabelPipe, isStandalone: true, name: "columnLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SmartTableColumnLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'columnLabel',
+                    standalone: true
+                }]
+        }] });
+
 class SmartTableHeadComponent {
     constructor() {
         this.columnFilterState = {};
@@ -14148,12 +14198,13 @@ class SmartTableHeadComponent {
         this.component = 'thead';
         this.#selectAll = true;
         this.#selectedAll = false;
-        this._columnFilterTemplates = {};
+        this.#columnFilterTemplates = {};
+        this.#summaryRowTemplate = null;
         // todo
         // @Input() sortingIcon?: string | TemplateRef<any>;
         // @Input() sortingIconAscending?: string | TemplateRef<any>;
         // @Input() sortingIconDescending?: string | TemplateRef<any>;
-        this.indeterminate = new BehaviorSubject(false);
+        this.indeterminate$ = new BehaviorSubject(false);
         this.columnFilterStateChange = new EventEmitter();
         this.sorterStateChange = new EventEmitter();
         this.selectAllChange = new EventEmitter();
@@ -14168,7 +14219,7 @@ class SmartTableHeadComponent {
     #selectAll;
     #selectedAllPreviousValue;
     set selectedAll(value) {
-        this.indeterminate.next(value === 'indeterminate');
+        this.indeterminate$.next(value === 'indeterminate');
         this.#selectedAll = value === 'indeterminate' ? false : coerceBooleanProperty(value);
         if (value !== 'indeterminate') {
             this.#selectedAllPreviousValue = this.#selectedAll;
@@ -14180,13 +14231,23 @@ class SmartTableHeadComponent {
     }
     #selectedAll;
     set columnFilterTemplates(value) {
-        this._columnFilterTemplates = { ...value };
+        this.#columnFilterTemplates = { ...value };
     }
     ;
     get columnFilterTemplates() {
-        return this._columnFilterTemplates;
+        return this.#columnFilterTemplates;
+    }
+    ;
+    #columnFilterTemplates;
+    set summaryRowTemplate(value) {
+        this.#summaryRowTemplate = value;
+    }
+    ;
+    get summaryRowTemplate() {
+        return this.#summaryRowTemplate;
     }
     ;
+    #summaryRowTemplate;
     get hostClasses() {
         return {
             thead: this.component === 'thead',
@@ -14225,9 +14286,6 @@ class SmartTableHeadComponent {
         }
         return style;
     }
-    columnLabel(column) {
-        return typeof column === 'object' ? column.label !== undefined ? column.label : this.prettifyName(column.key) : this.prettifyName(column);
-    }
     columnKey(column) {
         return typeof column === 'object' ? column.key : column;
     }
@@ -14241,15 +14299,6 @@ class SmartTableHeadComponent {
         }
         return 0;
     }
-    prettifyName(name) {
-        return name
-            .replace(/[-_.]/g, ' ')
-            .replace(/ +/g, ' ')
-            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-            .split(' ')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
     handleSortClick(column, i) {
         if (this.columnSorterEnabled(column)) {
             const columnKey = this.columnKey(column);
@@ -14291,7 +14340,7 @@ class SmartTableHeadComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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", summaryRowTemplate: "summaryRowTemplate" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIf]=\"component==='tfoot'\">\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n<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\">{{ column | columnLabel }}</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  </th>\n</tr>\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\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"] }, { kind: "pipe", type: SmartTableColumnLabelPipe, name: "columnLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
@@ -14308,8 +14357,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                         NgSwitch,
                         NgSwitchCase,
                         NgSwitchDefault,
-                        NgTemplateOutlet
-                    ], 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"] }]
+                        NgTemplateOutlet,
+                        SmartTableColumnLabelPipe
+                    ], template: "<ng-template [ngIf]=\"component==='tfoot'\">\n  <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n</ng-template>\n<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\">{{ column | columnLabel }}</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  </th>\n</tr>\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\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: [{
@@ -14330,6 +14380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 type: Input
             }], columnFilterTemplates: [{
                 type: Input
+            }], summaryRowTemplate: [{
+                type: Input
             }], columnFilterStateChange: [{
                 type: Output
             }], sorterStateChange: [{
@@ -14424,6 +14476,7 @@ class SmartTableComponent {
         this.tableFilterValueChange = new EventEmitter();
         this.templates = { tableDetails: null, tableData: null };
         this.columnFilterTemplates = {};
+        this.summaryRowTemplate = null;
         this._columnFiltered = [];
         this.itemsDiffer = this.iterableDiffers.find(this.items).create();
         this.itemsFilteredDiffer = this.iterableDiffers.find(this._columnFiltered).create();
@@ -14557,6 +14610,10 @@ class SmartTableComponent {
                 this.columnFilterTemplates[child.id] = child.templateRef;
                 return;
             }
+            if (child.id === 'tableSummaryRow') {
+                this.summaryRowTemplate = child.templateRef;
+                return;
+            }
             this.templates[child.id] = child.templateRef;
         });
         this.columnFilterTemplates = { ...this.columnFilterTemplates };
@@ -14823,7 +14880,7 @@ class SmartTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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 ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\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    <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n    </tfoot>\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      [summaryRowTemplate]=\"summaryRowTemplate\"\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 ?? undefined\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\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", "summaryRowTemplate"], 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: "16.2.8", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
@@ -14847,7 +14904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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]=\"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"] }]
+                    ], 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 ?? undefined\"\n         [borderless]=\"tableProps?.borderless ?? undefined\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover ?? undefined\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small ?? undefined\"\n         [striped]=\"tableProps?.striped ?? undefined\"\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    <tfoot *ngIf=\"summaryRowTemplate && !footer\">\n      <ng-container *ngTemplateOutlet=\"summaryRowTemplate\" />\n    </tfoot>\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      [summaryRowTemplate]=\"summaryRowTemplate\"\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 ?? undefined\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active ?? undefined\"\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: [{