@coreui/angular-pro 4.3.5 → 4.3.6

package/fesm2015/coreui-angular-pro.mjs

@@ -5039,6 +5039,277 @@ const getDayPeriods = (locale = 'default', options = {}) => {
 //
 // Object.keys(formats).forEach(lang => {const period = getDayPeriods(lang); if (period.am === 'AM') return; console.log(lang, period )})
 
+class DropdownDividerDirective {
+    constructor() {
+    }
+    get hostClasses() {
+        return {
+            'dropdown-divider': true,
+        };
+    }
+}
+DropdownDividerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DropdownDividerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownDividerDirective, selector: "[cDropdownDivider]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownDividerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cDropdownDivider]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class DropdownHeaderDirective {
+    constructor() {
+    }
+    get hostClasses() {
+        return {
+            'dropdown-header': true,
+        };
+    }
+}
+DropdownHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DropdownHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownHeaderDirective, selector: "[cDropdownHeader]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cDropdownHeader]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class DropdownItemDirective {
+    constructor(dropdownService, dropdown) {
+        this.dropdownService = dropdownService;
+        this.dropdown = dropdown;
+        /**
+         * Configure dropdown-item close dropdown behavior.
+         * @type boolean
+         * @default true
+         */
+        this.autoClose = true;
+        this._tabIndex = null;
+    }
+    get ariaCurrent() {
+        return this.active ? 'true' : null;
+    }
+    get hostClasses() {
+        return {
+            'dropdown-item': true,
+            active: this.active,
+            disabled: this.disabled
+        };
+    }
+    set tabIndex(value) {
+        this._tabIndex = value;
+    }
+    get tabIndex() {
+        return this.disabled ? '-1' : this._tabIndex;
+    }
+    get isDisabled() {
+        return this.disabled || null;
+    }
+    onClick($event) {
+        if (this.autoClose) {
+            this.dropdownService.toggle({ visible: 'toggle', dropdown: this.dropdown });
+        }
+    }
+    onKeyUp($event) {
+        if ($event.key === 'Enter') {
+            if (this.autoClose) {
+                this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+            }
+        }
+    }
+}
+DropdownItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemDirective, deps: [{ token: DropdownService }, { token: DropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DropdownItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemDirective, selector: "[cDropdownItem]", inputs: { active: "active", autoClose: "autoClose", disabled: "disabled", tabIndex: "tabIndex" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.isDisabled" } }, exportAs: ["cDropdownItem"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cDropdownItem]',
+                    exportAs: 'cDropdownItem'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DropdownService }, { type: DropdownComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { active: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], ariaCurrent: [{
+                type: HostBinding,
+                args: ['attr.aria-current']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }, {
+                type: Input
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class DropdownItemPlainDirective {
+    constructor() {
+    }
+    get hostClasses() {
+        return {
+            'dropdown-item-text': true,
+        };
+    }
+}
+DropdownItemPlainDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemPlainDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DropdownItemPlainDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemPlainDirective, selector: "[cDropdownItemPlain]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemPlainDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cDropdownItemPlain]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class DropdownCloseDirective {
+    constructor(dropdownService, dropdown) {
+        this.dropdownService = dropdownService;
+        this.dropdown = dropdown;
+        this._tabIndex = null;
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (this.dropdownComponent) {
+            this.dropdown = this.dropdownComponent;
+            this.dropdownService = (_a = this.dropdownComponent) === null || _a === void 0 ? void 0 : _a.dropdownService;
+        }
+    }
+    get hostClasses() {
+        return {
+            disabled: this.disabled
+        };
+    }
+    set tabIndex(value) {
+        this._tabIndex = value;
+    }
+    get tabIndex() {
+        return this.disabled ? '-1' : this._tabIndex;
+    }
+    get isDisabled() {
+        return this.disabled || null;
+    }
+    onClick($event) {
+        !this.disabled && this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+    }
+    onKeyUp($event) {
+        if ($event.key === 'Enter') {
+            !this.disabled && this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+        }
+    }
+}
+DropdownCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownCloseDirective, deps: [{ token: DropdownService }, { token: DropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DropdownCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownCloseDirective, selector: "[cDropdownClose]", inputs: { disabled: "disabled", dropdownComponent: "dropdownComponent", tabIndex: "tabIndex" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.isDisabled" } }, exportAs: ["cDropdownClose"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cDropdownClose]',
+                    exportAs: 'cDropdownClose'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DropdownService }, { type: DropdownComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { disabled: [{
+                type: Input
+            }], dropdownComponent: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }, {
+                type: Input
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class DropdownModule {
+}
+DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent,
+        DropdownDividerDirective,
+        DropdownHeaderDirective,
+        DropdownItemDirective,
+        DropdownItemPlainDirective,
+        DropdownToggleDirective,
+        DropdownMenuDirective,
+        DropdownCloseDirective], imports: [CommonModule], exports: [DropdownComponent,
+        DropdownDividerDirective,
+        DropdownHeaderDirective,
+        DropdownItemDirective,
+        DropdownItemPlainDirective,
+        DropdownToggleDirective,
+        DropdownMenuDirective,
+        DropdownCloseDirective] });
+DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, providers: [
+        DropdownService,
+    ], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DropdownComponent,
+                        DropdownDividerDirective,
+                        DropdownHeaderDirective,
+                        DropdownItemDirective,
+                        DropdownItemPlainDirective,
+                        DropdownToggleDirective,
+                        DropdownMenuDirective,
+                        DropdownCloseDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        DropdownComponent,
+                        DropdownDividerDirective,
+                        DropdownHeaderDirective,
+                        DropdownItemDirective,
+                        DropdownItemPlainDirective,
+                        DropdownToggleDirective,
+                        DropdownMenuDirective,
+                        DropdownCloseDirective
+                    ],
+                    providers: [
+                        DropdownService,
+                    ]
+                }]
+        }] });
+
 class FormSelectDirective {
     constructor() {
         /**
@@ -5325,14 +5596,15 @@ class TimePickerComponent {
         ];
         this._timeInputValue = (_b = (_a = this.time) === null || _a === void 0 ? void 0 : _a.toLocaleTimeString(this.locale, { timeStyle: this.seconds ? 'medium' : 'short' })) !== null && _b !== void 0 ? _b : '';
         this.selectTime = new FormGroup({
-            selectHours: new FormControl({ value: this.hour, disabled: this.disabled }),
-            selectMinutes: new FormControl({ value: this.minute, disabled: this.disabled }),
-            selectSeconds: new FormControl({ value: this.second, disabled: this.disabled }),
-            selectDayPeriod: new FormControl({ value: this.dayPeriod, disabled: this.disabled })
-        });
-        this.timeInput = new FormControl({ value: this.timeInputValue, disabled: this.disabled }, [
-            Validators.required
-        ]);
+            selectHours: new FormControl({ value: this.hour, disabled: this.disabled }, { validators: [Validators.min(0)] }),
+            selectMinutes: new FormControl({ value: this.minute, disabled: this.disabled }, Validators.min(0)),
+            selectSeconds: new FormControl({ value: this.second, disabled: this.disabled }, Validators.min(0)),
+            selectDayPeriod: new FormControl({ value: this.dayPeriod, disabled: this.disabled }, Validators.required)
+        }, { validators: [Validators.required] });
+        this.timeInput = new FormControl({
+            value: this.timeInputValue,
+            disabled: this.disabled
+        }, { validators: [Validators.required] });
         this._hour = -1;
         this._minute = -1;
         this._second = -1;
@@ -5421,7 +5693,7 @@ class TimePickerComponent {
         return this._time;
     }
     /**
-     * Toggle the visibility of dropdown menu component.
+     * Toggle the visibility of dropdown timepicker menu component.
      * @type boolean
      * @default false
      */
@@ -5441,6 +5713,13 @@ class TimePickerComponent {
     get timeInputValue() {
         return this._timeInputValue;
     }
+    get timePickerClasses() {
+        return {
+            'form-control': this.variant === 'select' && this.valid !== undefined,
+            'is-valid': this.valid === true,
+            'is-invalid': this.valid === false
+        };
+    }
     set hour(value) {
         if (this._hour !== value) {
             if (value < 0) {
@@ -5506,6 +5785,7 @@ class TimePickerComponent {
         this._second = -1;
         this.dayPeriod = 'am';
         this.patchSelectTimeValues();
+        this.timeInputValue = '';
     }
     emitTime(time) {
         var _a, _b, _c;
@@ -5668,7 +5948,7 @@ class TimePickerComponent {
     handleTimeInputChange($event) {
         var _a;
         const value = (_a = $event.target) === null || _a === void 0 ? void 0 : _a.value;
-        if (!isValidTime(value)) {
+        if (!value || !isValidTime(value)) {
             this.clearTime();
             return;
         }
@@ -5678,15 +5958,32 @@ class TimePickerComponent {
     handleClear($event) {
         this.clearTime();
     }
+    handleBlur($event) {
+        var _a, _b;
+        if (this.disabled) {
+            return;
+        }
+        (_b = (_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.classList.remove('show');
+        setTimeout(() => {
+            this.onBlur();
+        }, 100);
+    }
+    handleFocus($event) {
+        var _a, _b;
+        if (this.disabled) {
+            return;
+        }
+        (_b = (_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.classList.add('show');
+    }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerComponent, selector: "c-time-picker", inputs: { cleaner: "cleaner", dateTimeFormatOptions: "dateTimeFormatOptions", disabled: "disabled", filterHours: "filterHours", filterMinutes: "filterMinutes", filterSeconds: "filterSeconds", indicator: "indicator", inputReadOnly: "inputReadOnly", locale: "locale", placeholder: "placeholder", seconds: "seconds", size: "size", time: "time", variant: "variant", visible: "visible" }, outputs: { timeChange: "timeChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimePickerComponent, selector: "c-time-picker", inputs: { cleaner: "cleaner", dateTimeFormatOptions: "dateTimeFormatOptions", disabled: "disabled", filterHours: "filterHours", filterMinutes: "filterMinutes", filterSeconds: "filterSeconds", indicator: "indicator", inputReadOnly: "inputReadOnly", locale: "locale", placeholder: "placeholder", seconds: "seconds", size: "size", time: "time", variant: "variant", valid: "valid", visible: "visible" }, outputs: { timeChange: "timeChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TimePickerComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\r\n  <div class=\"picker time-picker\">\r\n    <div [formGroup]=\"selectTime\" class=\"time-picker-body\">\r\n      <span class=\"time-picker-inline-icon\"></span>\r\n      <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\">\r\n        <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\r\n      </select>\r\n      {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\">\r\n      <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\r\n    </select>\r\n      <ng-template [ngIf]=\"seconds\">\r\n        {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\">\r\n        <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\r\n      </select>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"hour12\">\r\n        <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\">\r\n          <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\r\n        </select>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"time-picker picker\" *ngIf=\"variant==='roll'\" [visible]=\"visible\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\">\r\n    <input (change)=\"handleTimeInputChange($event)\"\r\n           [formControl]=\"timeInput\"\r\n           [placeholder]=\"placeholder\"\r\n           cFormControl\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\r\n    <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfHours12\"\r\n        [selected]=\"hour\"\r\n        (selectedChange)=\"handleSelectHoursChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfMinutes\"\r\n        [selected]=\"minute\"\r\n        (selectedChange)=\"handleSelectMinutesChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        *ngIf=\"seconds\"\r\n        [elements]=\"listOfSeconds\"\r\n        [selected]=\"second\"\r\n        (selectedChange)=\"handleSelectSecondsChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-am-pm\r\n        *ngIf=\"hour12\" [elements]=\"dayPeriods\"\r\n        [selected]=\"dayPeriod\"\r\n        (selectedChange)=\"handleSelectDayPeriodChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-am-pm>\r\n    </div>\r\n    <div *ngIf=\"templates?.timePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { 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: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] });
+    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\r\n  <div class=\"picker time-picker\">\r\n    <div [formGroup]=\"selectTime\" class=\"time-picker-body\" [ngClass]=\"timePickerClasses\">\r\n      <span class=\"time-picker-inline-icon\"></span>\r\n      <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n        <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\r\n      </select>\r\n      {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n      <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\r\n    </select>\r\n      <ng-template [ngIf]=\"seconds\">\r\n        {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n        <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\r\n      </select>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"hour12\">\r\n        <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n          <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\r\n        </select>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"time-picker picker\" [ngClass]=\"timePickerClasses\" *ngIf=\"variant==='roll'\" [visible]=\"visible\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\">\r\n    <input (blur)=\"handleBlur($event);\"\r\n           (change)=\"handleTimeInputChange($event)\"\r\n           (focus)=\"handleFocus($event)\"\r\n           [formControl]=\"timeInput\"\r\n           [placeholder]=\"placeholder\"\r\n           cFormControl\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"valid\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\r\n    <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfHours12\"\r\n        [selected]=\"hour\"\r\n        (selectedChange)=\"handleSelectHoursChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfMinutes\"\r\n        [selected]=\"minute\"\r\n        (selectedChange)=\"handleSelectMinutesChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        *ngIf=\"seconds\"\r\n        [elements]=\"listOfSeconds\"\r\n        [selected]=\"second\"\r\n        (selectedChange)=\"handleSelectSecondsChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-am-pm\r\n        *ngIf=\"hour12\" [elements]=\"dayPeriods\"\r\n        [selected]=\"dayPeriod\"\r\n        (selectedChange)=\"handleSelectDayPeriodChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-am-pm>\r\n    </div>\r\n    <div *ngIf=\"templates?.timePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { 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: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-time-picker', exportAs: 'cTimePicker', providers: [
@@ -5695,7 +5992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\r\n  <div class=\"picker time-picker\">\r\n    <div [formGroup]=\"selectTime\" class=\"time-picker-body\">\r\n      <span class=\"time-picker-inline-icon\"></span>\r\n      <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\">\r\n        <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\r\n      </select>\r\n      {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\">\r\n      <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\r\n    </select>\r\n      <ng-template [ngIf]=\"seconds\">\r\n        {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\">\r\n        <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\r\n      </select>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"hour12\">\r\n        <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\">\r\n          <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\r\n        </select>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"time-picker picker\" *ngIf=\"variant==='roll'\" [visible]=\"visible\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\">\r\n    <input (change)=\"handleTimeInputChange($event)\"\r\n           [formControl]=\"timeInput\"\r\n           [placeholder]=\"placeholder\"\r\n           cFormControl\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\r\n    <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfHours12\"\r\n        [selected]=\"hour\"\r\n        (selectedChange)=\"handleSelectHoursChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfMinutes\"\r\n        [selected]=\"minute\"\r\n        (selectedChange)=\"handleSelectMinutesChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        *ngIf=\"seconds\"\r\n        [elements]=\"listOfSeconds\"\r\n        [selected]=\"second\"\r\n        (selectedChange)=\"handleSelectSecondsChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-am-pm\r\n        *ngIf=\"hour12\" [elements]=\"dayPeriods\"\r\n        [selected]=\"dayPeriod\"\r\n        (selectedChange)=\"handleSelectDayPeriodChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-am-pm>\r\n    </div>\r\n    <div *ngIf=\"templates?.timePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [".disabled{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\r\n  <div class=\"picker time-picker\">\r\n    <div [formGroup]=\"selectTime\" class=\"time-picker-body\" [ngClass]=\"timePickerClasses\">\r\n      <span class=\"time-picker-inline-icon\"></span>\r\n      <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n        <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\r\n      </select>\r\n      {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n      <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\r\n    </select>\r\n      <ng-template [ngIf]=\"seconds\">\r\n        {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n        <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\r\n      </select>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"hour12\">\r\n        <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\" (blur)=\"onBlur()\" [sizing]=\"size ?? ''\">\r\n          <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\r\n        </select>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"time-picker picker\" [ngClass]=\"timePickerClasses\" *ngIf=\"variant==='roll'\" [visible]=\"visible\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\">\r\n    <input (blur)=\"handleBlur($event);\"\r\n           (change)=\"handleTimeInputChange($event)\"\r\n           (focus)=\"handleFocus($event)\"\r\n           [formControl]=\"timeInput\"\r\n           [placeholder]=\"placeholder\"\r\n           cFormControl\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"valid\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\r\n    <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfHours12\"\r\n        [selected]=\"hour\"\r\n        (selectedChange)=\"handleSelectHoursChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        [elements]=\"listOfMinutes\"\r\n        [selected]=\"minute\"\r\n        (selectedChange)=\"handleSelectMinutesChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-col\r\n        *ngIf=\"seconds\"\r\n        [elements]=\"listOfSeconds\"\r\n        [selected]=\"second\"\r\n        (selectedChange)=\"handleSelectSecondsChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-col>\r\n      <c-time-picker-roll-am-pm\r\n        *ngIf=\"hour12\" [elements]=\"dayPeriods\"\r\n        [selected]=\"dayPeriod\"\r\n        (selectedChange)=\"handleSelectDayPeriodChange($event)\"\r\n        [disabled]=\"disabled\"\r\n        [refresh]=\"dropdownMenu.visible\"\r\n        role=\"listbox\"\r\n      >\r\n      </c-time-picker-roll-am-pm>\r\n    </div>\r\n    <div *ngIf=\"templates?.timePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [".disabled{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { cleaner: [{
                 type: Input
             }], dateTimeFormatOptions: [{
@@ -5724,6 +6021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], variant: [{
                 type: Input
+            }], valid: [{
+                type: Input
             }], visible: [{
                 type: Input
             }], timeChange: [{
@@ -5731,9 +6030,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], onBlur: [{
                 type: HostListener,
                 args: ['blur']
-            }], dropdown: [{
+            }], dropdownRef: [{
                 type: ViewChild,
-                args: ['dropdown']
+                args: [DropdownComponent, { read: ElementRef }]
             }], contentTemplates: [{
                 type: ContentChildren,
                 args: [TemplateIdDirective, { descendants: true }]
@@ -5925,7 +6224,7 @@ class DateRangePickerComponent {
         // return this._timepicker;
     }
     /**
-     * Toggle the visibility of the component.
+     * Toggle the visibility of the dropdown date-picker component.
      * @type boolean
      * @default false
      */
@@ -6060,6 +6359,12 @@ class DateRangePickerComponent {
     get inputEndHoverValue() {
         return this._inputEndHoverValue;
     }
+    get datePickerClasses() {
+        return {
+            'is-valid': this.valid === true,
+            'is-invalid': this.valid === false
+        };
+    }
     formatDate(date) {
         return this.format
             ? format(date, this.format)
@@ -6227,13 +6532,13 @@ class DateRangePickerComponent {
     }
 }
 DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
+DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             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\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { 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: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], 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\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"range ? undefined : valid\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"valid\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { 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: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
@@ -6242,7 +6547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"range ? undefined : valid\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"valid\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -6273,6 +6578,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], timepicker: [{
                 type: Input
+            }], valid: [{
+                type: Input
             }], visible: [{
                 type: Input
             }], startDate: [{
@@ -6554,427 +6861,156 @@ class FormCheckInputDirective {
             this.renderer.setProperty(this.hostElement.nativeElement, 'indeterminate', newValue);
         }
     }
-    ;
-    get indeterminate() {
-        return this._indeterminate;
-    }
-    get hostClasses() {
-        return {
-            'form-check-input': true,
-            'is-valid': this.valid === true,
-            'is-invalid': this.valid === false
-        };
-    }
-    get checked() {
-        var _a, _b;
-        return (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.checked;
-    }
-}
-FormCheckInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormCheckInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FormCheckInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: { type: "type", indeterminate: "indeterminate", valid: "valid" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormCheckInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[cFormCheckInput]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }, {
-                type: Input
-            }], indeterminate: [{
-                type: Input
-            }], valid: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class FormTextDirective {
-    constructor() { }
-    get hostClasses() {
-        return {
-            'form-text': true,
-        };
-    }
-}
-FormTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FormTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FormTextDirective, selector: "[cFormText]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormTextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cFormText]'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class FormFloatingDirective {
-    constructor() {
-        this._floating = true;
-    }
-    /**
-     * Enable floating labels
-     * @type boolean
-     */
-    get floating() {
-        return this._floating;
-    }
-    set floating(value) {
-        this._floating = coerceBooleanProperty(value);
-    }
-    get hostClasses() {
-        return {
-            'form-floating': this.floating,
-        };
-    }
-}
-FormFloatingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFloatingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FormFloatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FormFloatingDirective, selector: "[cFormFloating]", inputs: { floating: ["cFormFloating", "floating"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFloatingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cFormFloating]'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { floating: [{
-                type: Input,
-                args: ['cFormFloating']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class FormModule {
-}
-FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FormModule, declarations: [FormDirective,
-        FormCheckComponent,
-        FormControlDirective,
-        FormFeedbackComponent,
-        FormFloatingDirective,
-        FormLabelDirective,
-        FormSelectDirective,
-        FormTextDirective,
-        InputGroupComponent,
-        InputGroupTextDirective,
-        FormCheckLabelDirective,
-        FormCheckInputDirective], imports: [CommonModule], exports: [FormDirective,
-        FormCheckComponent,
-        FormControlDirective,
-        FormFeedbackComponent,
-        FormFloatingDirective,
-        FormLabelDirective,
-        FormSelectDirective,
-        FormTextDirective,
-        InputGroupComponent,
-        InputGroupTextDirective,
-        FormCheckLabelDirective,
-        FormCheckInputDirective] });
-FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        FormDirective,
-                        FormCheckComponent,
-                        FormControlDirective,
-                        FormFeedbackComponent,
-                        FormFloatingDirective,
-                        FormLabelDirective,
-                        FormSelectDirective,
-                        FormTextDirective,
-                        InputGroupComponent,
-                        InputGroupTextDirective,
-                        FormCheckLabelDirective,
-                        FormCheckInputDirective,
-                    ],
-                    imports: [CommonModule],
-                    exports: [
-                        FormDirective,
-                        FormCheckComponent,
-                        FormControlDirective,
-                        FormFeedbackComponent,
-                        FormFloatingDirective,
-                        FormLabelDirective,
-                        FormSelectDirective,
-                        FormTextDirective,
-                        InputGroupComponent,
-                        InputGroupTextDirective,
-                        FormCheckLabelDirective,
-                        FormCheckInputDirective
-                    ]
-                }]
-        }] });
-
-class DropdownDividerDirective {
-    constructor() {
-    }
-    get hostClasses() {
-        return {
-            'dropdown-divider': true,
-        };
-    }
-}
-DropdownDividerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DropdownDividerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownDividerDirective, selector: "[cDropdownDivider]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownDividerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cDropdownDivider]'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class DropdownHeaderDirective {
-    constructor() {
-    }
-    get hostClasses() {
-        return {
-            'dropdown-header': true,
-        };
-    }
-}
-DropdownHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DropdownHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownHeaderDirective, selector: "[cDropdownHeader]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cDropdownHeader]'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class DropdownItemDirective {
-    constructor(dropdownService, dropdown) {
-        this.dropdownService = dropdownService;
-        this.dropdown = dropdown;
-        /**
-         * Configure dropdown-item close dropdown behavior.
-         * @type boolean
-         * @default true
-         */
-        this.autoClose = true;
-        this._tabIndex = null;
-    }
-    get ariaCurrent() {
-        return this.active ? 'true' : null;
-    }
-    get hostClasses() {
-        return {
-            'dropdown-item': true,
-            active: this.active,
-            disabled: this.disabled
-        };
-    }
-    set tabIndex(value) {
-        this._tabIndex = value;
-    }
-    get tabIndex() {
-        return this.disabled ? '-1' : this._tabIndex;
-    }
-    get isDisabled() {
-        return this.disabled || null;
-    }
-    onClick($event) {
-        if (this.autoClose) {
-            this.dropdownService.toggle({ visible: 'toggle', dropdown: this.dropdown });
-        }
-    }
-    onKeyUp($event) {
-        if ($event.key === 'Enter') {
-            if (this.autoClose) {
-                this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
-            }
-        }
+    ;
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    get hostClasses() {
+        return {
+            'form-check-input': true,
+            'is-valid': this.valid === true,
+            'is-invalid': this.valid === false
+        };
+    }
+    get checked() {
+        var _a, _b;
+        return (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.checked;
     }
 }
-DropdownItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemDirective, deps: [{ token: DropdownService }, { token: DropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DropdownItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemDirective, selector: "[cDropdownItem]", inputs: { active: "active", autoClose: "autoClose", disabled: "disabled", tabIndex: "tabIndex" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.isDisabled" } }, exportAs: ["cDropdownItem"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemDirective, decorators: [{
+FormCheckInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormCheckInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FormCheckInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: { type: "type", indeterminate: "indeterminate", valid: "valid" }, host: { properties: { "attr.type": "this.type", "class": "this.hostClasses" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormCheckInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cDropdownItem]',
-                    exportAs: 'cDropdownItem'
+                    selector: 'input[cFormCheckInput]'
                 }]
-        }], ctorParameters: function () {
-        return [{ type: DropdownService }, { type: DropdownComponent, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { active: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }, {
                 type: Input
-            }], autoClose: [{
+            }], indeterminate: [{
                 type: Input
-            }], disabled: [{
+            }], valid: [{
                 type: Input
-            }], ariaCurrent: [{
-                type: HostBinding,
-                args: ['attr.aria-current']
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }, {
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
             }] } });
 
-class DropdownItemPlainDirective {
-    constructor() {
-    }
+class FormTextDirective {
+    constructor() { }
     get hostClasses() {
         return {
-            'dropdown-item-text': true,
+            'form-text': true,
         };
     }
 }
-DropdownItemPlainDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemPlainDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DropdownItemPlainDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemPlainDirective, selector: "[cDropdownItemPlain]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemPlainDirective, decorators: [{
+FormTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FormTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FormTextDirective, selector: "[cFormText]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormTextDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cDropdownItemPlain]'
+                    selector: '[cFormText]'
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class DropdownCloseDirective {
-    constructor(dropdownService, dropdown) {
-        this.dropdownService = dropdownService;
-        this.dropdown = dropdown;
-        this._tabIndex = null;
+class FormFloatingDirective {
+    constructor() {
+        this._floating = true;
     }
-    ngAfterViewInit() {
-        var _a;
-        if (this.dropdownComponent) {
-            this.dropdown = this.dropdownComponent;
-            this.dropdownService = (_a = this.dropdownComponent) === null || _a === void 0 ? void 0 : _a.dropdownService;
-        }
+    /**
+     * Enable floating labels
+     * @type boolean
+     */
+    get floating() {
+        return this._floating;
+    }
+    set floating(value) {
+        this._floating = coerceBooleanProperty(value);
     }
     get hostClasses() {
         return {
-            disabled: this.disabled
+            'form-floating': this.floating,
         };
     }
-    set tabIndex(value) {
-        this._tabIndex = value;
-    }
-    get tabIndex() {
-        return this.disabled ? '-1' : this._tabIndex;
-    }
-    get isDisabled() {
-        return this.disabled || null;
-    }
-    onClick($event) {
-        !this.disabled && this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
-    }
-    onKeyUp($event) {
-        if ($event.key === 'Enter') {
-            !this.disabled && this.dropdownService.toggle({ visible: false, dropdown: this.dropdown });
-        }
-    }
 }
-DropdownCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownCloseDirective, deps: [{ token: DropdownService }, { token: DropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DropdownCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DropdownCloseDirective, selector: "[cDropdownClose]", inputs: { disabled: "disabled", dropdownComponent: "dropdownComponent", tabIndex: "tabIndex" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.isDisabled" } }, exportAs: ["cDropdownClose"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownCloseDirective, decorators: [{
+FormFloatingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFloatingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FormFloatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FormFloatingDirective, selector: "[cFormFloating]", inputs: { floating: ["cFormFloating", "floating"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormFloatingDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cDropdownClose]',
-                    exportAs: 'cDropdownClose'
+                    selector: '[cFormFloating]'
                 }]
-        }], ctorParameters: function () {
-        return [{ type: DropdownService }, { type: DropdownComponent, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { disabled: [{
-                type: Input
-            }], dropdownComponent: [{
-                type: Input
+        }], ctorParameters: function () { return []; }, propDecorators: { floating: [{
+                type: Input,
+                args: ['cFormFloating']
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }, {
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
             }] } });
 
-class DropdownModule {
+class FormModule {
 }
-DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent,
-        DropdownDividerDirective,
-        DropdownHeaderDirective,
-        DropdownItemDirective,
-        DropdownItemPlainDirective,
-        DropdownToggleDirective,
-        DropdownMenuDirective,
-        DropdownCloseDirective], imports: [CommonModule], exports: [DropdownComponent,
-        DropdownDividerDirective,
-        DropdownHeaderDirective,
-        DropdownItemDirective,
-        DropdownItemPlainDirective,
-        DropdownToggleDirective,
-        DropdownMenuDirective,
-        DropdownCloseDirective] });
-DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, providers: [
-        DropdownService,
-    ], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownModule, decorators: [{
+FormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FormModule, declarations: [FormDirective,
+        FormCheckComponent,
+        FormControlDirective,
+        FormFeedbackComponent,
+        FormFloatingDirective,
+        FormLabelDirective,
+        FormSelectDirective,
+        FormTextDirective,
+        InputGroupComponent,
+        InputGroupTextDirective,
+        FormCheckLabelDirective,
+        FormCheckInputDirective], imports: [CommonModule], exports: [FormDirective,
+        FormCheckComponent,
+        FormControlDirective,
+        FormFeedbackComponent,
+        FormFloatingDirective,
+        FormLabelDirective,
+        FormSelectDirective,
+        FormTextDirective,
+        InputGroupComponent,
+        InputGroupTextDirective,
+        FormCheckLabelDirective,
+        FormCheckInputDirective] });
+FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        DropdownComponent,
-                        DropdownDividerDirective,
-                        DropdownHeaderDirective,
-                        DropdownItemDirective,
-                        DropdownItemPlainDirective,
-                        DropdownToggleDirective,
-                        DropdownMenuDirective,
-                        DropdownCloseDirective
-                    ],
-                    imports: [
-                        CommonModule,
+                        FormDirective,
+                        FormCheckComponent,
+                        FormControlDirective,
+                        FormFeedbackComponent,
+                        FormFloatingDirective,
+                        FormLabelDirective,
+                        FormSelectDirective,
+                        FormTextDirective,
+                        InputGroupComponent,
+                        InputGroupTextDirective,
+                        FormCheckLabelDirective,
+                        FormCheckInputDirective,
                     ],
+                    imports: [CommonModule],
                     exports: [
-                        DropdownComponent,
-                        DropdownDividerDirective,
-                        DropdownHeaderDirective,
-                        DropdownItemDirective,
-                        DropdownItemPlainDirective,
-                        DropdownToggleDirective,
-                        DropdownMenuDirective,
-                        DropdownCloseDirective
-                    ],
-                    providers: [
-                        DropdownService,
+                        FormDirective,
+                        FormCheckComponent,
+                        FormControlDirective,
+                        FormFeedbackComponent,
+                        FormFloatingDirective,
+                        FormLabelDirective,
+                        FormSelectDirective,
+                        FormTextDirective,
+                        InputGroupComponent,
+                        InputGroupTextDirective,
+                        FormCheckLabelDirective,
+                        FormCheckInputDirective
                     ]
                 }]
         }] });
@@ -7110,7 +7146,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useExisting: forwardRef(() => DatePickerComponent),
             multi: true
         }
-    ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { 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: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"range ? undefined : valid\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"valid\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { 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: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', providers: [
@@ -7119,7 +7155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"range ? undefined : valid\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n           [valid]=\"valid\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
@@ -8723,6 +8759,11 @@ class MultiSelectComponent {
         var _a, _b;
         return this.multiple ? [...this._value] : (_b = (_a = this._value[0]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
     }
+    /**
+     * Toggle the visibility of the dropdown select component.
+     * @type boolean
+     * @default false
+     */
     set visible(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this._visible) {
@@ -8767,7 +8808,9 @@ class MultiSelectComponent {
             [`form-multi-select-${this.size}`]: !!this.size,
             'form-multi-select-with-cleaner': this.cleaner,
             show: this.visible,
-            disabled: this.disabled
+            disabled: this.disabled,
+            'is-valid': this.valid === true,
+            'is-invalid': this.valid === false
         };
     }
     get tabIndex() {
@@ -9038,7 +9081,7 @@ class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", visible: "visible", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", valid: "valid", visible: "visible", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
         {
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
@@ -9088,6 +9131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], valid: [{
+                type: Input
             }], visible: [{
                 type: Input
             }], visibleChange: [{
@@ -12692,10 +12737,10 @@ class SmartTableFilterComponent {
 }
 _SmartTableFilterComponent_filterInputDirective = new WeakMap();
 SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", sizing: "sizing" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\n  {{filterLabel}}\n</label>\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [sizing]=\"sizing\"\n    [value]=\"value$ | async\"\n    cFormControl\n    size=\"10\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", sizing: "sizing" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\r\n  {{filterLabel}}\r\n</label>\r\n<div class=\"col-auto\">\r\n  <input\r\n    [placeholder]=\"filterPlaceholder\"\r\n    [sizing]=\"sizing\"\r\n    [value]=\"value$ | async\"\r\n    cFormControl\r\n    size=\"10\"\r\n  />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\n  {{filterLabel}}\n</label>\n<div class=\"col-auto\">\n  <input\n    [placeholder]=\"filterPlaceholder\"\n    [sizing]=\"sizing\"\n    [value]=\"value$ | async\"\n    cFormControl\n    size=\"10\"\n  />\n</div>\n" }]
+            args: [{ selector: 'c-smart-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"!!filterLabel\" [ngClass]=\"labelClasses\" cLabel=\"col\" class=\"col-auto\">\r\n  {{filterLabel}}\r\n</label>\r\n<div class=\"col-auto\">\r\n  <input\r\n    [placeholder]=\"filterPlaceholder\"\r\n    [sizing]=\"sizing\"\r\n    [value]=\"value$ | async\"\r\n    cFormControl\r\n    size=\"10\"\r\n  />\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
                 type: Input
             }], filterPlaceholder: [{
@@ -12988,10 +13033,10 @@ class SmartTableColumnFilterComponent {
 }
 _SmartTableColumnFilterComponent_filterInputDirective = new WeakMap();
 SmartTableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: { column: "column", sizing: "sizing" }, ngImport: i0, template: "<input\n  [sizing]=\"sizing\"\n  [value]=\"value$ | async\"\n  cFormControl\n/>\n", dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SmartTableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: { column: "column", sizing: "sizing" }, ngImport: i0, template: "<input\r\n  [sizing]=\"sizing\"\r\n  [value]=\"value$ | async\"\r\n  cFormControl\r\n/>\r\n", dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableColumnFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-column-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  [sizing]=\"sizing\"\n  [value]=\"value$ | async\"\n  cFormControl\n/>\n" }]
+            args: [{ selector: 'c-smart-table-column-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\r\n  [sizing]=\"sizing\"\r\n  [value]=\"value$ | async\"\r\n  cFormControl\r\n/>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { column: [{
                 type: Input
             }], sizing: [{
@@ -13126,10 +13171,10 @@ class SmartTableHeadComponent {
     ;
 }
 SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\n  <th *ngIf=\"selectable\">\n    <input (change)=\"handleSelectAllChecked($event)\"\n           [checked]=\"selectAll === true\"\n           [indeterminate]=\"selectAll === 'indeterminate'\"\n           cFormCheckInput>\n  </th>\n  <th\n    (click)=\"handleSortClick(column, i)\"\n    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      ></ng-container>\n    </ng-template>\n  </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n  <th *ngIf=\"selectable\"></th>\n  <th *ngFor=\"let column of columns; let i = index\"\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\n    <ng-template #defaultColumnFilter let-column>\n      <c-smart-table-column-filter\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [column]=\"column\"\n        [delay]=\"300\"\n        [onEvent]=\"columnFilterEvent\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFilterInput\n        sizing=\"sm\"\n      ></c-smart-table-column-filter>\n    </ng-template>\n  </th>\n</tr>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  <ng-container [ngSwitch]=\"columnSorterState\">\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n    </span>\n  </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }] });
+SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <c-smart-table-column-filter\r\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [column]=\"column\"\r\n        [delay]=\"300\"\r\n        [onEvent]=\"columnFilterEvent\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFilterInput\r\n        sizing=\"sm\"\r\n      ></c-smart-table-column-filter>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }, { kind: "component", type: SmartTableColumnFilterComponent, selector: "c-smart-table-column-filter", inputs: ["column", "sizing"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-head', template: "<tr>\n  <th *ngIf=\"selectable\">\n    <input (change)=\"handleSelectAllChecked($event)\"\n           [checked]=\"selectAll === true\"\n           [indeterminate]=\"selectAll === 'indeterminate'\"\n           cFormCheckInput>\n  </th>\n  <th\n    (click)=\"handleSortClick(column, i)\"\n    *ngFor=\"let column of columns; let i = index\"\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n    [cTableColor]=\"tableHeaderCellColor(column)\"\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\n      <ng-container\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\n      ></ng-container>\n    </ng-template>\n  </th>\n</tr>\n<tr *ngIf=\"columnFilter\">\n  <th *ngIf=\"selectable\"></th>\n  <th *ngFor=\"let column of columns; let i = index\"\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\n      [cTableColor]=\"tableHeaderCellColor(column)\"\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\n  >\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\n    <ng-template #defaultColumnFilter let-column>\n      <c-smart-table-column-filter\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\n        *ngIf=\"columnFilterEnabled(column)\"\n        [column]=\"column\"\n        [delay]=\"300\"\n        [onEvent]=\"columnFilterEvent\"\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\n        cFilterInput\n        sizing=\"sm\"\n      ></c-smart-table-column-filter>\n    </ng-template>\n  </th>\n</tr>\n\n<ng-template #columnSorterIconTemplate let-columnSorterState>\n  <ng-container [ngSwitch]=\"columnSorterState\">\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\n    </span>\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\n    </span>\n  </ng-container>\n</ng-template>\n\n<!--todo: sortingIconCustom Templates-->\n<ng-template #sortingIconTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\n    ></polygon>\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconAscendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\n    ></polygon>\n  </svg>\n</ng-template>\n\n<ng-template #sortingIconDescendingTemplate>\n  <svg\n    class=\"icon icon-custom-size\"\n    role=\"img\"\n    viewBox=\"0 0 512 512\"\n    width=\"18\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <polygon\n      class=\"ci-primary\"\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\n    ></polygon>\n  </svg>\n</ng-template>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
+            args: [{ selector: 'c-smart-table-head', template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <c-smart-table-column-filter\r\n        (valueChange)=\"handleColumnFilterValueChange($event)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [column]=\"column\"\r\n        [delay]=\"300\"\r\n        [onEvent]=\"columnFilterEvent\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFilterInput\r\n        sizing=\"sm\"\r\n      ></c-smart-table-column-filter>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
                 type: Input
             }], columnFilterState: [{
@@ -13580,10 +13625,10 @@ class SmartTableComponent {
     }
 }
 SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n    </div>\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [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</div>\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered\"\n         [borderless]=\"tableProps?.borderless\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small\"\n         [striped]=\"tableProps?.striped\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         cTable\n  >\n    <c-smart-table-head\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"header\"\n      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n    <c-smart-table-head\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"footer\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n  </table>\n  <c-element-cover\n    *ngIf=\"loading\"\n    [boundaries]=\"[\n      { sides: ['top'], query: 'td' },\n      { sides: ['bottom'], query: 'tbody' }\n    ]\"\n  ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <c-smart-pagination\n        (activePageChange)=\"setActivePage($event)\"\n        *ngIf=\"pagination && numberOfPages > 1\"\n        [activePage]=\"activePage\"\n        [pages]=\"numberOfPages\">\n      </c-smart-pagination>\n    </div>\n    <div class=\"col-auto ms-auto\">\n      <c-smart-table-items-per-page-selector\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n        *ngIf=\"itemsPerPageSelect\"\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\n        [itemsPerPage]=\"itemsPerPage\"\n      >\n      </c-smart-table-items-per-page-selector>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n         [cAlign]=\"tableBodyProps?.align\"\n  >\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n        (click)=\"handleRowClick({$event, item, i})\"\n        [cTableActive]=\"item._props?.active\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\n      >\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\n      </td>\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\n      </ng-template>\n    </tr>\n    <ng-template [ngIf]=\"templates['tableDetails']\">\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n      <tr>\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n      </tr>\n      <tr class=\"p-0\">\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n  </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n  >\n    {{tdContent}}\n  </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  <tr *ngIf=\"!currentItems.length\">\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n  </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n       class=\"icon icon-custom-size\" width=\"18\">\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n      class=\"ci-primary\">\n    </polygon>\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n      class=\"ci-primary\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }] });
+SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #tableFilterTemplate>\r\n    <c-smart-table-filter\r\n      (valueChange)=\"handleTableFilterChange($event)\"\r\n      *ngIf=\"tableFilter\"\r\n      [delay]=\"300\"\r\n      [filterLabel]=\"tableFilterLabel\"\r\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n      [onEvent]=\"tableFilterEvent\"\r\n      [value]=\"tableFilterState\"\r\n      cFilterInput\r\n    >\r\n    </c-smart-table-filter>\r\n  </ng-template>\r\n\r\n  <ng-template #tableCleanerTemplate>\r\n    <button\r\n      (click)=\"clean($event)\"\r\n      *ngIf=\"cleaner\"\r\n      [disabled]=\"!isFiltered\"\r\n      [ngClass]=\"{'ms-1': tableFilter}\"\r\n      [tabindex]=\"0\"\r\n      cButton\r\n      variant=\"ghost\"\r\n      color=\"transparent\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr>\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n      </tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n       class=\"icon icon-custom-size\" width=\"18\">\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "sizing"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }, { kind: "directive", type: FilterInputDirective, selector: "[cFilterInput]", inputs: ["delay", "onEvent", "value"], outputs: ["valueChange"], exportAs: ["cFilterInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\n    </div>\n    <div class=\"col-auto p-0\">\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\n    </div>\n  </ng-template>\n\n  <ng-template #tableFilterTemplate>\n    <c-smart-table-filter\n      (valueChange)=\"handleTableFilterChange($event)\"\n      *ngIf=\"tableFilter\"\n      [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</div>\n<div class=\"position-relative\">\n  <table [align]=\"tableProps?.align\"\n         [borderColor]=\"tableProps?.borderColor\"\n         [bordered]=\"tableProps?.bordered\"\n         [borderless]=\"tableProps?.borderless\"\n         [caption]=\"tableProps?.caption\"\n         [color]=\"tableProps?.color\"\n         [hover]=\"tableProps?.hover\"\n         [responsive]=\"tableProps?.responsive\"\n         [small]=\"tableProps?.small\"\n         [striped]=\"tableProps?.striped\"\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\n         [cTableColor]=\"tableProps?.color\"\n         cTable\n  >\n    <c-smart-table-head\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"header\"\n      [columnFilterState]=\"columnFilterState\"\n      [columnFilter]=\"columnFilter\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\n      [cTableColor]=\"tableHeadProps?.color\"\n      [cAlign]=\"tableHeadProps?.align\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\n\n    <c-smart-table-head\n      (selectAllChange)=\"handleSelectAllChange($event)\"\n      (sorterStateChange)=\"handleSortChange($event)\"\n      *ngIf=\"footer\"\n      [columns]=\"columns\"\n      [selectAll]=\"selectedAll\"\n      [selectable]=\"selectable\"\n      [columnSorter]=\"columnSorter\"\n      [sorterValue]=\"sorterValue\"\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\n      [cTableColor]=\"tableFootProps?.color\"\n      [cAlign]=\"tableFootProps?.align\"\n      component=\"tfoot\"\n      [columnFilterTemplates]=\"columnFilterTemplates\"\n    ></c-smart-table-head>\n\n  </table>\n  <c-element-cover\n    *ngIf=\"loading\"\n    [boundaries]=\"[\n      { sides: ['top'], query: 'td' },\n      { sides: ['bottom'], query: 'tbody' }\n    ]\"\n  ></c-element-cover>\n</div>\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <c-smart-pagination\n        (activePageChange)=\"setActivePage($event)\"\n        *ngIf=\"pagination && numberOfPages > 1\"\n        [activePage]=\"activePage\"\n        [pages]=\"numberOfPages\">\n      </c-smart-pagination>\n    </div>\n    <div class=\"col-auto ms-auto\">\n      <c-smart-table-items-per-page-selector\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\n        *ngIf=\"itemsPerPageSelect\"\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\n        [itemsPerPage]=\"itemsPerPage\"\n      >\n      </c-smart-table-items-per-page-selector>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tbodyDefaultTemplate>\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\n         [cTableColor]=\"tableBodyProps?.color\"\n         [cAlign]=\"tableBodyProps?.align\"\n  >\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\n        (click)=\"handleRowClick({$event, item, i})\"\n        [cTableActive]=\"item._props?.active\"\n        [cTableColor]=\"item._props?.color\"\n        [cAlign]=\"item._props?.align\"\n    >\n      <td *ngIf=\"selectable\"\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\n      >\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\n      </td>\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\n        <ng-container\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\n      </ng-template>\n    </tr>\n    <ng-template [ngIf]=\"templates['tableDetails']\">\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\n      <tr>\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\n      </tr>\n      <tr class=\"p-0\">\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\n  </tbody>\n</ng-template>\n\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\n  <td\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\n  >\n    {{tdContent}}\n  </td>\n</ng-template>\n\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\n<!--  <tr class=\"p-0\">-->\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\n<!--    </td>-->\n<!--  </tr>-->\n<!--</ng-template>-->\n\n<ng-template #noItemsDefaultTemplate>\n  <tr *ngIf=\"!currentItems.length\">\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\n  </tr>\n</ng-template>\n\n<!--todo: filterIconCustomTemplate-->\n<ng-template #filterIconTemplate>\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\n       class=\"icon icon-custom-size\" width=\"18\">\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\n      class=\"ci-primary\">\n    </polygon>\n    <polygon\n      fill=\"var(--ci-primary-color, currentColor)\"\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\n      class=\"ci-primary\">\n    </polygon>\n  </svg>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableFilterTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <ng-container *ngTemplateOutlet=\"tableCleanerTemplate\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #tableFilterTemplate>\r\n    <c-smart-table-filter\r\n      (valueChange)=\"handleTableFilterChange($event)\"\r\n      *ngIf=\"tableFilter\"\r\n      [delay]=\"300\"\r\n      [filterLabel]=\"tableFilterLabel\"\r\n      [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n      [onEvent]=\"tableFilterEvent\"\r\n      [value]=\"tableFilterState\"\r\n      cFilterInput\r\n    >\r\n    </c-smart-table-filter>\r\n  </ng-template>\r\n\r\n  <ng-template #tableCleanerTemplate>\r\n    <button\r\n      (click)=\"clean($event)\"\r\n      *ngIf=\"cleaner\"\r\n      [disabled]=\"!isFiltered\"\r\n      [ngClass]=\"{'ms-1': tableFilter}\"\r\n      [tabindex]=\"0\"\r\n      cButton\r\n      variant=\"ghost\"\r\n      color=\"transparent\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n    </button>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [columnSorter]=\"columnSorter\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n        <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr>\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td>\r\n      </tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" role=\"img\"\r\n       class=\"icon icon-custom-size\" width=\"18\">\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n    <polygon\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"\r\n      class=\"ci-primary\">\r\n    </polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
                 type: Input
             }], cleaner: [{
@@ -15448,4 +15493,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, LoadingButtonComponent, LoadingButtonModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, MultiSelectTagComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular-pro.mjs.map
-//# sourceMappingURL=coreui-angular-pro.mjs.map