@coreui/angular-pro 4.2.17 → 4.2.19

package/fesm2020/coreui-angular-pro.mjs

@@ -2107,12 +2107,13 @@ class CalendarMonthComponent {
      * @type Date
      */
     set calendarDate(value) {
-        const _value = new Date(tryDate((value ?? this.startDate ?? new Date()), 'calendarDate'));
-        if (this._calendarDate.getTime() !== _value.getTime()) {
+        const _value = new Date(tryDate((value ?? this.startDate), 'calendarDate'));
+        if (!!_value && this._calendarDate.getTime() !== _value.getTime()) {
             this.listOfYears = createGroupsInArray(getYears(_value.getFullYear()), 4);
-            this._calendarDate = new Date(_value.setDate(1));
+            const _calendarDate = new Date(new Date(_value.setDate(1)).setHours(0, 0, 0, 0));
+            this._calendarDate = _calendarDate;
             this.setMonthDetails(this.date);
-            this.calendarService.update({ calendarDate: this._calendarDate });
+            this.calendarService.update({ calendarDate: _calendarDate });
         }
     }
     get calendarDate() {
@@ -2149,7 +2150,7 @@ class CalendarMonthComponent {
         this.calendarService.update({ hoverDate: hoverValue });
     }
     handleYearCellClick(year) {
-        const calendarDate = new Date(year, this.calendarDate.getMonth(), 1);
+        const calendarDate = new Date(year, this.calendarDate.getMonth(), 1, 0, 0, 0, 0);
         this.view = 'months';
         this.calendarService.update({ view: this.view, calendarDate: calendarDate });
     }
@@ -2173,7 +2174,7 @@ class CalendarMonthComponent {
     setCalendarPage(years, months = 0, setMonth) {
         const year = this.date.getFullYear();
         const month = this.date.getMonth();
-        const d = new Date(year, month);
+        const d = new Date(year, month, 1, 0, 0, 0, 0);
         years && d.setFullYear(d.getFullYear() + years);
         months && d.setMonth(d.getMonth() + months);
         typeof setMonth === 'number' && d.setMonth(setMonth);
@@ -2202,8 +2203,10 @@ class CalendarMonthComponent {
             return;
         }
         if (this.startDate && this.endDate) {
-            this.startDate = null;
+            const calendarDate = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
+            this.calendarDate = calendarDate;
             this.endDate = null;
+            this.startDate = null;
             return;
         }
         if (!!this.startDate && !this.endDate) {
@@ -2336,11 +2339,13 @@ class CalendarComponent {
      * @type  (Date | string)
      */
     set calendarDate(value) {
-        const _value = new Date(tryDate((value ?? this.startDate ?? new Date()), 'calendarDate'));
-        if (this._calendarDate.getTime() !== _value.getTime()) {
-            this._calendarDate = new Date(_value.setDate(1));
-            this.calendarDateChange.emit(_value);
-            this.calendarService.update({ calendarDate: _value });
+        // const _value = new Date(tryDate((value ?? this.startDate ?? new Date()), 'calendarDate'));
+        const _value = new Date(tryDate(value ?? this.startDate, 'calendarDate'));
+        if (!!_value && this._calendarDate.getTime() !== _value.getTime()) {
+            const _calendarDate = new Date(new Date(_value.setDate(1)).setHours(0, 0, 0, 0));
+            this._calendarDate = _calendarDate;
+            this.calendarDateChange.emit(_calendarDate);
+            this.calendarService.update({ calendarDate: _calendarDate });
         }
     }
     get calendarDate() {
@@ -4309,10 +4314,10 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block;min-width:-moz-fit-content;min-width:fit-content}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-dropdown', template: '<ng-content></ng-content>', exportAs: 'cDropdown', providers: [DropdownService], styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block;min-width:-moz-fit-content;min-width:fit-content}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
+            args: [{ selector: 'c-dropdown', template: '<ng-content></ng-content>', exportAs: 'cDropdown', providers: [DropdownService], styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -5728,6 +5733,7 @@ class DateRangePickerComponent {
         this._separator = true;
         this._timepicker = false;
         this._visible = false;
+        this.calendarDate = new Date();
         this.disabledDates = [];
         this._firstDayOfWeek = 1;
         this.locale = 'default';
@@ -5743,6 +5749,13 @@ class DateRangePickerComponent {
          * @default 'short'
          */
         this.weekdayFormat = 'short';
+        /**
+         * Optional popper Options object
+         * @type Partial<Options>
+         */
+        this.popperjsOptions = {
+            strategy: 'fixed'
+        };
         this.valueChange = new EventEmitter();
         this.calendarCellHover = new EventEmitter();
         this.calendarDateChange = new EventEmitter();
@@ -6023,12 +6036,12 @@ class DateRangePickerComponent {
             // for date-picker component
             const date = this.convertValueToDate(changes['date']?.currentValue) ?? null;
             this.handleStartDateChange(date);
-            this.calendarDate = date ?? undefined;
+            this.calendarDate = date ?? this.calendarDate;
         }
         if (changes['startDate']) {
             const date = this.convertValueToDate(changes['startDate']?.currentValue) ?? null;
             this.handleStartDateChange(date);
-            this.calendarDate = date ?? undefined;
+            this.calendarDate = date ?? this.calendarDate;
         }
         if (changes['endDate']) {
             const date = this.convertValueToDate(changes['endDate']?.currentValue) ?? null;
@@ -6066,7 +6079,9 @@ class DateRangePickerComponent {
         }
     }
     handleCalendarDateChange($event) {
-        this.calendarDateChange.emit($event);
+        if (this.calendarDate.getTime() !== $event.getTime()) {
+            this.calendarDateChange.emit($event);
+        }
     }
     handleStartDateChange(date) {
         // if (date?.getTime() !== this.startDate?.getTime()) {
@@ -6148,13 +6163,13 @@ class DateRangePickerComponent {
     }
 }
 DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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" }, 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: "14.2.12", 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: [
         {
             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\">\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\" [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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
@@ -6163,7 +6178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [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  >\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\" [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" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -6224,6 +6239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], weekdayFormat: [{
                 type: Input
+            }], popperjsOptions: [{
+                type: Input,
+                args: ['popperOptions']
             }], valueChange: [{
                 type: Output
             }], calendarCellHover: [{
@@ -7022,7 +7040,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\">\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\" [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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', providers: [
@@ -7031,7 +7049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [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  >\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\" [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" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
@@ -8277,9 +8295,11 @@ class MultiSelectOptionComponent {
     set selected(value) {
         const newValue = coerceBooleanProperty(value);
         if (this._selected !== newValue) {
-            this._selected = newValue;
-            this.selectedChange.emit(newValue);
-            this.multiSelectService.toggleOption(this);
+            setTimeout(() => {
+                this._selected = newValue;
+                this.selectedChange.emit(newValue);
+                this.multiSelectService.toggleOption(this);
+            });
         }
     }
     get selected() {
@@ -8303,8 +8323,9 @@ class MultiSelectOptionComponent {
     get ariaSelected() {
         return this.selected;
     }
-    onKeyDown($event) {
+    onKeyUp($event) {
         if (['Enter', ' '].includes($event.key)) {
+            $event.stopImmediatePropagation();
             $event.preventDefault();
             this.selected = this.disabled ? this.selected : !this.selected;
             this.focus('keyboard');
@@ -8328,9 +8349,9 @@ class MultiSelectOptionComponent {
     getLabel() {
         return (this.label ?? this.value);
     }
-    focus(origin) {
+    focus(origin = 'program') {
         if (this.dropdownVisible) {
-            this.focusMonitor.focusVia(this.elementRef, origin ?? 'program', { preventScroll: false });
+            this.focusMonitor.focusVia(this.elementRef, origin, { preventScroll: false });
             this.changeDetectorRef.markForCheck();
         }
     }
@@ -8344,7 +8365,7 @@ class MultiSelectOptionComponent {
     }
 }
 MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"] }]
@@ -8380,9 +8401,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], ariaSelected: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
-            }], onKeyDown: [{
+            }], onKeyUp: [{
                 type: HostListener,
-                args: ['keydown', ['$event']]
+                args: ['keyup', ['$event']]
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -8511,10 +8532,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
+// @ts-ignore
+const observeReferenceModifier = {
+    name: 'observeReferenceModifier', enabled: true, phase: 'main', fn({ state }) { },
+    effect: ({ state, instance }) => {
+        const RO_PROP = '__popperjsRO__';
+        const { reference } = state.elements;
+        // @ts-ignore
+        reference[RO_PROP] = new ResizeObserver((entries) => {
+            instance.update();
+        });
+        // @ts-ignore
+        reference[RO_PROP].observe(reference);
+        return () => {
+            // @ts-ignore
+            reference[RO_PROP].disconnect();
+            // @ts-ignore
+            delete reference[RO_PROP];
+        };
+    }
+};
 class MultiSelectComponent {
-    constructor(elementRef, renderer, ngZone, changeDetectorRef, viewContainerRef, focusMonitor, multiSelectService
-    // private listenersService: ListenersService
-    ) {
+    constructor(elementRef, renderer, ngZone, changeDetectorRef, viewContainerRef, focusMonitor, multiSelectService, iterableDiffers) {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.ngZone = ngZone;
@@ -8522,13 +8561,13 @@ class MultiSelectComponent {
         this.viewContainerRef = viewContainerRef;
         this.focusMonitor = focusMonitor;
         this.multiSelectService = multiSelectService;
+        this.iterableDiffers = iterableDiffers;
         this.onChange = (value) => { };
         this.cleaner = true;
         this._disabled = false;
         this._multiple = false;
         this.nativeName = '';
         this.nativeId = '';
-        // @Input() options = [];
         this.optionsMaxHeight = 'auto';
         this.optionsStyle = 'checkbox';
         this.placeholder = 'Select...';
@@ -8543,12 +8582,24 @@ class MultiSelectComponent {
         this.valueChange = new EventEmitter();
         this._visible = false;
         this.visibleChange = new EventEmitter();
+        /**
+         * Optional popper Options object
+         * @type Partial<Options>
+         */
+        this.popperjsOptions = {
+            strategy: 'fixed', modifiers: [observeReferenceModifier, {
+                    name: 'offset', options: {
+                        offset: [0, this.selectionType === 'tags' ? 8 : 10]
+                    }
+                }]
+        };
         this.isDropdownVisible = false;
         this._selectedOptions = [];
         this._tabIndex = '-1';
         this.visibleOptions = 0;
         this._searchValue = '';
         this._subtreeFocused = this.focusOrigin(null);
+        this.differ = this.iterableDiffers.find(this._value).create();
     }
     writeValue(value) {
         if (value !== null) {
@@ -8564,7 +8615,10 @@ class MultiSelectComponent {
         this.disabled = isDisabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        if (this._disabled !== value) {
+            this._disabled = coerceBooleanProperty(value);
+            this.setFocusMonitor(!value);
+        }
     }
     get disabled() {
         return this._disabled;
@@ -8575,13 +8629,21 @@ class MultiSelectComponent {
     get multiple() {
         return this._multiple;
     }
+    /**
+     * Initial value of multi-select
+     */
     set value(value) {
         const newValue = Array.isArray(value) ? [...value] : [value ?? ''];
-        if (this._value.toString() !== newValue.toString()) {
-            this._value = newValue;
-            this.onChange(newValue);
-            this.updateNativeSelect();
-            this.valueChange.emit(this.value);
+        if (this.differ) {
+            const changes = this.differ.diff(newValue);
+            if (changes) {
+                this._value = newValue;
+                this.onChange(newValue);
+                this.selectOptions();
+                // not required here:
+                // this.selectedOptionsUpdate();
+                this.valueChange.emit(this.value);
+            }
         }
     }
     get value() {
@@ -8619,9 +8681,14 @@ class MultiSelectComponent {
     }
     ;
     get hostClasses() {
+        return {
+            disabled: this.disabled
+        };
+    }
+    get multiselectClasses() {
         return {
             'form-multi-select': true,
-            'form-multi-select-selection-tags': this.selectionType === 'tags',
+            'form-multi-select-selection-tags': this.selectionType === 'tags' && this.selectedOptions.length > 0,
             [`form-multi-select-${this.size}`]: !!this.size,
             'form-multi-select-with-cleaner': this.cleaner,
             show: this.visible,
@@ -8642,20 +8709,20 @@ class MultiSelectComponent {
         if ($event.key === 'Escape') {
             this.visible = false;
             this.searchValue = '';
-            this.setFocus();
+            this.setFocus('keyboard', 'onKeyUp');
             return;
         }
-        if (['Enter', ' ', 'ArrowDown'].includes($event.key) && [this.inputElement?.nativeElement ?? this.elementRef.nativeElement].includes($event.target)) {
+        if (['Enter', ' ', 'ArrowDown'].includes($event.key) && [this.inputElement?.nativeElement, this.elementRef.nativeElement].includes($event.target)) {
             this.visible = true;
             if (!this.search) {
-                this.setFocus();
+                this.setFocus('keyboard', 'onKeyUp');
             }
             return;
         }
         if ($event.key === 'Tab' && $event.target === this.elementRef.nativeElement) {
             this.visible = true;
             if (!this.search) {
-                this.setFocus();
+                this.setFocus('keyboard', 'onKeyUp');
             }
             return;
         }
@@ -8673,6 +8740,11 @@ class MultiSelectComponent {
             return;
         if (!this.visible) {
             this.visible = true;
+            this.setFocus('mouse', 'onClick');
+        }
+        else if ([this.dropdown.nativeElement].includes($event.target)) {
+            this.visible = false;
+            this.setFocus('mouse', 'onClick');
         }
     }
     set searchValue(value) {
@@ -8692,6 +8764,8 @@ class MultiSelectComponent {
         this.visible = value === false ? false : this.visible;
     }
     focusOrigin(origin) {
+        if (this.disabled)
+            return false;
         const focused = !!origin;
         this.searchValue = focused ? this.searchValue : '';
         return focused;
@@ -8701,36 +8775,42 @@ class MultiSelectComponent {
     }
     ngOnDestroy() {
         this.multiselectSubscribe(false);
-        // this.clearListeners();
-        this.focusMonitor.stopMonitoring(this.elementRef);
-        this.focusMonitorSubscription?.unsubscribe();
+        this.setFocusMonitor(false);
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            const valueChanges = changes['value'];
+            if (valueChanges.currentValue.length === 0) {
+                this.clearAllOptions();
+            }
+            else {
+                this.selectOptions();
+            }
+            this.selectedOptionsUpdate();
+        }
     }
     ngAfterContentInit() {
         this.visibleOptions = this.multiSelectOptions.length;
-        this.multiSelectOptions.forEach((option, index) => {
-            option.optionsStyle = this.optionsStyle;
-            option.selected = option.value !== undefined ? this.value.includes(option.value) || option.selected : option.selected;
-        });
-        this.selectedOptionsUpdate();
-        this.inputElementSize();
+    }
+    ngAfterViewInit() {
+        this.selectOptions();
+        this.multiselectSubscribe();
         this.listKeyManager = new FocusKeyManager(this.multiSelectOptions).withHomeAndEnd().withTypeAhead();
         this.listKeyManager.skipPredicate(item => (!item.visible || item.disabled));
         this.listKeyManager.setFirstItemActive();
-        this.multiselectSubscribe();
-        this.createNativeSelect();
-    }
-    ngAfterViewInit() {
-        // this.setListeners();
-        this.focusMonitorSubscription = this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => this.ngZone.run(() => {
-            if (!this.disabled) {
-                this.subtreeFocused = this.focusOrigin(origin);
-                this.changeDetectorRef.markForCheck();
-            }
-        }));
-        this.inputElementSize();
+        this.setFocusMonitor(!this.disabled);
+        // not required here:
+        // this.selectedOptionsUpdate();
+        setTimeout(() => {
+            this.createNativeSelect();
+        });
     }
     multiselectSubscribe(subscribe = true) {
         if (subscribe) {
+            this.multiSelectOptionsSubscription = this.multiSelectOptions.changes.subscribe(change => {
+                // console.log('multiSelectOptions change', change)
+                this.selectOptions();
+            });
             this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
                 this.isDropdownVisible = visible;
                 this.visibleChange.emit(visible);
@@ -8743,8 +8823,15 @@ class MultiSelectComponent {
                             item.selected = false;
                         }
                     });
+                    // close dropdown for single select (!multiple)
+                    this.visible = false;
+                    this.searchValue = '';
+                    this.setFocus('program', 'multiselectSubscribe');
                 }
+                // todo?
+                // if (!!option) {
                 this.selectedOptionsUpdate();
+                // }
             });
         }
         else {
@@ -8753,73 +8840,41 @@ class MultiSelectComponent {
             this.multiselectStateSubscription?.unsubscribe();
         }
     }
+    selectOptions() {
+        this.multiSelectOptions?.forEach((option, index) => {
+            option.optionsStyle = this.optionsStyle;
+            option.selected = option.value !== undefined ? this.value.includes(option.value) || option.selected : option.selected;
+        });
+    }
     clearAllOptions($event) {
         this.selectedOptions.forEach((option) => {
             if (!option._disabled)
                 option.selected = false;
         });
-        this.setFocus();
+        this.selectedOptionsUpdate();
+        if ($event) {
+            this.searchValue = '';
+            this.setFocus('program', 'clearAllOptions');
+        }
     }
     selectAllOptions() {
         this.multiSelectOptions.forEach((option, index) => {
-            if (!option.disabled)
+            if (!option.disabled && option.visible)
                 option.selected = true;
         });
+        this.selectedOptionsUpdate();
     }
-    // private setListeners() {
-    //   if (this.search) {
-    //     const configForInput: IListenersConfig = {
-    //       hostElement: this.inputElement ?? this.elementRef,
-    //       trigger: ['focus', 'click'],
-    //       callbackOn: () => {
-    //         console.log('focus input');
-    //         this.tabIndex = null;
-    //         // this.visible = true;
-    //       }
-    //     };
-    //     this.listenersService.setListeners(configForInput);
-    //   }
-    //
-    //   const configForHost: IListenersConfig = {
-    //     hostElement: this.elementRef,
-    //     trigger: ['focus'],
-    //     callbackOn: () => {
-    //       console.log('focus');
-    //       if (this.inputElement) {
-    //         this.setFocus()
-    //       }
-    //       // this.inputElement?.nativeElement.focus();
-    //     },
-    //     callbackOff: () => {
-    //       console.log('blur');
-    //     }
-    //   };
-    //   this.listenersService.setListeners(configForHost);
-    // }
-    // private clearListeners() {
-    //   this.listenersService.clearListeners();
-    // }
     handleTagRemove($event) {
-        this.setFocus();
+        this.setFocus('program', 'handleTagRemove');
     }
-    setFocus() {
+    setFocus(origin = 'program', methodName) {
         if (this.disabled)
             return;
-        this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'program');
-    }
-    // setFirstSelectedOptionActive() {
-    //   const firstSelectedOption = this.selectedOptions.find((item) => item.selected) ??
-    //     this.multiSelectOptions.find((item, index) => index === 0);
-    //   if (firstSelectedOption && this.isDropdownVisible) {
-    //     // this.listKeyManager.setFocusOrigin('keyboard');
-    //     this.listKeyManager.setActiveItem(firstSelectedOption);
-    //     this.changeDetectorRef.markForCheck();
-    //   } else {
-    //     // this.listKeyManager.setFocusOrigin('keyboard');
-    //     this.listKeyManager.setFirstItemActive();
-    //     this.changeDetectorRef.markForCheck();
-    //   }
-    // }
+        const element = this.inputElement ?? this.elementRef;
+        const preventScroll = origin === 'program';
+        this.focusMonitor?.focusVia(element, origin, { preventScroll: preventScroll });
+        // console.log('setFocus', origin, methodName, 'preventScroll:', preventScroll );
+    }
     filterOptions(value) {
         const searchString = value.toLowerCase() ?? '';
         this.multiSelectOptions?.forEach((item, index) => {
@@ -8849,7 +8904,7 @@ class MultiSelectComponent {
         this.nativeSelectRef.instance.form = this.nativeId;
         this.nativeSelectRef.instance.options = [...options];
         this.nativeSelectRef.instance.disabled = this.disabled;
-        this.nativeSelectRef.instance.changeDetectorRef.detectChanges();
+        this.nativeSelectRef.instance.changeDetectorRef.markForCheck();
     }
     inputElementSize() {
         if (this.inputElement) {
@@ -8871,42 +8926,49 @@ class MultiSelectComponent {
         }
     }
     selectOption(option, selected) {
-        this.multiSelectOptions.forEach(item => {
-            if (item === option) {
-                option.selected = selected;
-            }
-        });
+        option.selected = selected;
         this.selectedOptionsUpdate();
     }
     selectedOptionsUpdate() {
         setTimeout(() => {
-            this.selectedOptions = this.multiSelectOptions.filter((option) => !!option.selected);
+            this.selectedOptions = this.multiSelectOptions?.filter((option) => !!option.selected);
+            this.inputElementSize();
+            this.updateNativeSelect();
             this.changeDetectorRef.markForCheck();
         });
     }
+    setFocusMonitor(monitor) {
+        if (monitor && !this.disabled) {
+            this.focusMonitorSubscription = this.focusMonitor?.monitor(this.elementRef, true).subscribe((origin) => {
+                // console.log('focusMonitorSubscription', this.elementRef, origin);
+                this.ngZone.run(() => {
+                    this.subtreeFocused = this.focusOrigin(origin);
+                    this.changeDetectorRef?.markForCheck();
+                });
+            });
+        }
+        else {
+            this.focusMonitor?.stopMonitoring(this.elementRef);
+            this.focusMonitorSubscription?.unsubscribe();
+        }
+    }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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" }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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: "14.2.12", 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: [
         MultiSelectService,
-        // ListenersService,
         {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MultiSelectComponent),
-            multi: true
+            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], exportAs: ["cMultiSelect"], ngImport: i0, template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n    <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                        (remove)=\"handleTagRemove($event)\"\r\n                        [option]=\"option\"\r\n                        tabindex=\"-1\">\r\n    </c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n    <span>{{ selectedOptionsText }}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n    <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n    <ng-template #pluralMap>\r\n      <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">\r\n    <span>{{ placeholder }}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input\r\n  #inputElement\r\n  (keydown)=\"handleSearchKeyDown($event)\"\r\n  *ngIf=\"search && !disabled\"\r\n  [(ngModel)]=\"searchValue\"\r\n  [disabled]=\"disabled || !search\"\r\n  [ngClass]=\"{ 'form-multi-select-search': true, disabled: disabled }\"\r\n  [placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : ''\"\r\n  autocomplete=\"off\"\r\n  tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n  type=\"text\"\r\n>\r\n\r\n<button\r\n  (click)=\"clearAllOptions($event)\"\r\n  *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n  [disabled]=\"disabled || !isDropdownVisible\"\r\n  aria-label=\"Clear all\"\r\n  class=\"form-multi-select-selection-cleaner\"\r\n></button>\r\n\r\n<div #dropdownElement *ngIf=\"!disabled\" class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n    <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n      {{ selectAllLabel }}\r\n    </button>\r\n    <div #multiselectOptionsDiv\r\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n         class=\"form-multi-select-options\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #optionsEmpty>\r\n    <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n  </ng-template>\r\n</div>\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}:host .form-multi-select-search[size]{display:inline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                            (remove)=\"handleTagRemove($event)\"\n                            [option]=\"option\"\n                            tabindex=\"-1\">\n        </c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n        <ng-template #pluralMap>\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n        </ng-template>\n      </ng-template>\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\n      autocomplete=\"off\"\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n        {{ selectAllLabel }}\n      </button>\n      <div #multiselectOptionsDiv\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n           class=\"form-multi-select-options\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
                         MultiSelectService,
-                        // ListenersService,
                         {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultiSelectComponent),
-                            multi: true
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
                         }
-                    ], template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n    <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                        (remove)=\"handleTagRemove($event)\"\r\n                        [option]=\"option\"\r\n                        tabindex=\"-1\">\r\n    </c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n    <span>{{ selectedOptionsText }}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n    <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n    <ng-template #pluralMap>\r\n      <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">\r\n    <span>{{ placeholder }}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input\r\n  #inputElement\r\n  (keydown)=\"handleSearchKeyDown($event)\"\r\n  *ngIf=\"search && !disabled\"\r\n  [(ngModel)]=\"searchValue\"\r\n  [disabled]=\"disabled || !search\"\r\n  [ngClass]=\"{ 'form-multi-select-search': true, disabled: disabled }\"\r\n  [placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : ''\"\r\n  autocomplete=\"off\"\r\n  tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n  type=\"text\"\r\n>\r\n\r\n<button\r\n  (click)=\"clearAllOptions($event)\"\r\n  *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n  [disabled]=\"disabled || !isDropdownVisible\"\r\n  aria-label=\"Clear all\"\r\n  class=\"form-multi-select-selection-cleaner\"\r\n></button>\r\n\r\n<div #dropdownElement *ngIf=\"!disabled\" class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n    <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n      {{ selectAllLabel }}\r\n    </button>\r\n    <div #multiselectOptionsDiv\r\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n         class=\"form-multi-select-options\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #optionsEmpty>\r\n    <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n  </ng-template>\r\n</div>\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}:host .form-multi-select-search[size]{display:inline}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { cleaner: [{
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                            (remove)=\"handleTagRemove($event)\"\n                            [option]=\"option\"\n                            tabindex=\"-1\">\n        </c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n        <ng-template #pluralMap>\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n        </ng-template>\n      </ng-template>\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\n      autocomplete=\"off\"\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n        {{ selectAllLabel }}\n      </button>\n      <div #multiselectOptionsDiv\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n           class=\"form-multi-select-options\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -8946,15 +9008,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], visibleChange: [{
                 type: Output
+            }], popperjsOptions: [{
+                type: Input,
+                args: ['popperOptions']
             }], multiSelectOptions: [{
                 type: ContentChildren,
                 args: [MultiSelectOptionComponent, { descendants: true }]
             }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
-            }], dropdownElement: [{
+            }], dropdownMenu: [{
+                type: ViewChild,
+                args: ['dropdownMenu']
+            }], dropdownToggle: [{
                 type: ViewChild,
-                args: ['dropdownElement']
+                args: [DropdownToggleDirective]
+            }], dropdown: [{
+                type: ViewChild,
+                args: [DropdownComponent, { read: ElementRef }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -8980,12 +9051,12 @@ MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         MultiSelectOptgroupComponent,
         MultiSelectOptgroupLabelComponent,
         MultiSelectTagComponent,
-        MultiSelectNativeSelectComponent], imports: [CommonModule, A11yModule, ButtonModule, FormsModule], exports: [MultiSelectComponent,
+        MultiSelectNativeSelectComponent], imports: [CommonModule, A11yModule, ButtonModule, FormsModule, DropdownModule], exports: [MultiSelectComponent,
         MultiSelectOptionComponent,
         MultiSelectOptgroupComponent,
         MultiSelectOptgroupLabelComponent,
         MultiSelectTagComponent] });
-MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectModule, providers: [MultiSelectService], imports: [CommonModule, A11yModule, ButtonModule, FormsModule] });
+MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectModule, providers: [MultiSelectService], imports: [CommonModule, A11yModule, ButtonModule, FormsModule, DropdownModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
@@ -8997,7 +9068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         MultiSelectTagComponent,
                         MultiSelectNativeSelectComponent
                     ],
-                    imports: [CommonModule, A11yModule, ButtonModule, FormsModule],
+                    imports: [CommonModule, A11yModule, ButtonModule, FormsModule, DropdownModule],
                     exports: [
                         MultiSelectComponent,
                         MultiSelectOptionComponent,
@@ -12396,6 +12467,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+class SmartTableFilterComponent {
+    constructor() {
+        this.filterLabel = 'Filter:';
+        this.filterPlaceholder = 'Filter';
+        this.valueChange = new EventEmitter();
+        this._value = '';
+        this.eventType = '';
+    }
+    set value(value) {
+        if (this._value != value) {
+            this._value = value;
+        }
+        if (this.eventType)
+            this.valueChange.emit({ value, type: this.eventType });
+    }
+    get value() {
+        return this._value;
+    }
+    get hostClasses() {
+        return {
+            row: true,
+            'mb-2': true
+        };
+    }
+    handleTableFilterChange($event) {
+        this.eventType = $event.type;
+        this.value = $event.target.value;
+    }
+}
+SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{filterLabel}}</label>\r\n<div class=\"col-sm-auto\">\r\n  <input (change)=\"handleTableFilterChange($event)\"\r\n         (input)=\"handleTableFilterChange($event)\"\r\n         [placeholder]=\"filterPlaceholder\"\r\n         [value]=\"value\"\r\n         cFormControl />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-smart-table-filter', template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{filterLabel}}</label>\r\n<div class=\"col-sm-auto\">\r\n  <input (change)=\"handleTableFilterChange($event)\"\r\n         (input)=\"handleTableFilterChange($event)\"\r\n         [placeholder]=\"filterPlaceholder\"\r\n         [value]=\"value\"\r\n         cFormControl />\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class TableDirective {
     constructor(renderer, hostElement) {
         this.renderer = renderer;
@@ -12621,53 +12739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class SmartTableFilterComponent {
-    constructor() {
-        this.filterLabel = 'Filter:';
-        this.filterPlaceholder = 'Filter';
-        this.valueChange = new EventEmitter();
-        this._value = '';
-        this.eventType = '';
-    }
-    set value(value) {
-        if (this._value != value) {
-            this._value = value;
-        }
-        if (this.eventType)
-            this.valueChange.emit({ value, type: this.eventType });
-    }
-    get value() {
-        return this._value;
-    }
-    get hostClasses() {
-        return {
-            row: true,
-            'mb-2': true
-        };
-    }
-    handleTableFilterChange($event) {
-        this.eventType = $event.type;
-        this.value = $event.target.value;
-    }
-}
-SmartTableFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{filterLabel}}</label>\r\n<div class=\"col-sm-auto\">\r\n  <input (change)=\"handleTableFilterChange($event)\"\r\n         (input)=\"handleTableFilterChange($event)\"\r\n         [placeholder]=\"filterPlaceholder\"\r\n         [value]=\"value\"\r\n         cFormControl />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c-smart-table-filter', template: "<label cLabel=\"col\" class=\"col-sm-auto\">{{filterLabel}}</label>\r\n<div class=\"col-sm-auto\">\r\n  <input (change)=\"handleTableFilterChange($event)\"\r\n         (input)=\"handleTableFilterChange($event)\"\r\n         [placeholder]=\"filterPlaceholder\"\r\n         [value]=\"value\"\r\n         cFormControl />\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { filterLabel: [{
-                type: Input
-            }], filterPlaceholder: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 class SmartTableItemsPerPageSelectorComponent {
     constructor() {
         this._itemsPerPage = 5;
@@ -12713,6 +12784,7 @@ class SmartTableHeadComponent {
         this.columnFilterState = {};
         this.columnSorter = true;
         this.component = 'thead';
+        this._columnFilterTemplates = {};
         // todo
         // @Input() sortingIcon?: string | TemplateRef<any>;
         // @Input() sortingIconAscending?: string | TemplateRef<any>;
@@ -12721,6 +12793,14 @@ class SmartTableHeadComponent {
         this.sorterStateChange = new EventEmitter();
         this.selectAllChange = new EventEmitter();
     }
+    set columnFilterTemplates(value) {
+        this._columnFilterTemplates = { ...value };
+    }
+    ;
+    get columnFilterTemplates() {
+        return this._columnFilterTemplates;
+    }
+    ;
     get hostClasses() {
         return {
             thead: this.component === 'thead',
@@ -12811,12 +12891,15 @@ class SmartTableHeadComponent {
         const selectAll = $event.target.checked;
         this.selectAllChange.emit(selectAll);
     }
+    getColumnFilter(column) {
+        return `columnFilter_${this.columnKey(column) ?? '_undefined'}`;
+    }
 }
 SmartTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue" }, 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    <input\r\n      (change)=\"handleColumnFilterValueChange($event, column)\"\r\n      (input)=\"handleColumnFilterValueChange($event, column)\"\r\n      *ngIf=\"columnFilterEnabled(column)\"\r\n      [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n      cFormControl\r\n      sizing=\"sm\"\r\n    />\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
+SmartTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: { columnFilter: "columnFilter", columnFilterState: "columnFilterState", columnSorter: "columnSorter", component: "component", columns: "columns", selectable: "selectable", selectAll: "selectAll", sorterValue: "sorterValue", columnFilterTemplates: "columnFilterTemplates" }, outputs: { columnFilterStateChange: "columnFilterStateChange", sorterStateChange: "sorterStateChange", selectAllChange: "selectAllChange" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <input\r\n        (change)=\"handleColumnFilterValueChange($event, column)\"\r\n        (input)=\"handleColumnFilterValueChange($event, column)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFormControl\r\n        sizing=\"sm\"\r\n      />\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table-head', template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <input\r\n      (change)=\"handleColumnFilterValueChange($event, column)\"\r\n      (input)=\"handleColumnFilterValueChange($event, column)\"\r\n      *ngIf=\"columnFilterEnabled(column)\"\r\n      [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n      cFormControl\r\n      sizing=\"sm\"\r\n    />\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
+            args: [{ selector: 'c-smart-table-head', template: "<tr>\r\n  <th *ngIf=\"selectable\">\r\n    <input (change)=\"handleSelectAllChecked($event)\"\r\n           [checked]=\"selectAll === true\"\r\n           [indeterminate]=\"selectAll === 'indeterminate'\"\r\n           cFormCheckInput>\r\n  </th>\r\n  <th\r\n    (click)=\"handleSortClick(column, i)\"\r\n    *ngFor=\"let column of columns; let i = index\"\r\n    [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n    [cTableColor]=\"tableHeaderCellColor(column)\"\r\n    [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <div class=\"d-inline\">{{ columnLabel(column) }}</div>\r\n    <ng-template [ngIf]=\"columnSorter && columnSorterEnabled(column)\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"columnSorterIconTemplate; context: { $implicit: getColumnSorterState(column) }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n<tr *ngIf=\"columnFilter\">\r\n  <th *ngIf=\"selectable\"></th>\r\n  <th *ngFor=\"let column of columns; let i = index\"\r\n      [cHtmlAttr]=\"tableHeaderCellProps(column)\"\r\n      [cTableColor]=\"tableHeaderCellColor(column)\"\r\n      [ngStyle]=\"tableHeaderCellStyles(column)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"columnFilterTemplates[getColumnFilter(column)] ?? defaultColumnFilter; context: {$implicit: column, header: this}\"></ng-container>\r\n    <ng-template #defaultColumnFilter let-column>\r\n      <input\r\n        (change)=\"handleColumnFilterValueChange($event, column)\"\r\n        (input)=\"handleColumnFilterValueChange($event, column)\"\r\n        *ngIf=\"columnFilterEnabled(column)\"\r\n        [value]=\"columnFilterState[columnKey(column)] ?? ''\"\r\n        cFormControl\r\n        sizing=\"sm\"\r\n      />\r\n    </ng-template>\r\n  </th>\r\n</tr>\r\n\r\n<ng-template #columnSorterIconTemplate let-columnSorterState>\r\n  <ng-container [ngSwitch]=\"columnSorterState\">\r\n    <span *ngSwitchCase=\"'asc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconAscendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchCase=\"'desc'\" class=\"float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconDescendingTemplate\"></ng-container>\r\n    </span>\r\n    <span *ngSwitchDefault class=\"opacity-25 float-end me-1\">\r\n      <ng-container *ngTemplateOutlet=\"sortingIconTemplate\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!--todo: sortingIconCustom Templates-->\r\n<ng-template #sortingIconTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373\"\r\n    ></polygon>\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconAscendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #sortingIconDescendingTemplate>\r\n  <svg\r\n    class=\"icon icon-custom-size\"\r\n    role=\"img\"\r\n    viewBox=\"0 0 512 512\"\r\n    width=\"18\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n  >\r\n    <polygon\r\n      class=\"ci-primary\"\r\n      fill=\"var(--ci-primary-color, currentColor)\"\r\n      points=\"367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75\"\r\n    ></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{-webkit-user-select:none;user-select:none}:host.thead{display:table-header-group;vertical-align:middle;border-color:inherit}:host.tfoot{display:table-footer-group;vertical-align:middle;border-color:inherit}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { columnFilter: [{
                 type: Input
             }], columnFilterState: [{
@@ -12833,6 +12916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], sorterValue: [{
                 type: Input
+            }], columnFilterTemplates: [{
+                type: Input
             }], columnFilterStateChange: [{
                 type: Output
             }], sorterStateChange: [{
@@ -12878,6 +12963,7 @@ class SmartTableComponent {
         this.filteredItemsChange = new EventEmitter();
         this.tableFilterValueChange = new EventEmitter();
         this.templates = { tableDetails: null, tableData: null };
+        this.columnFilterTemplates = {};
         this._selectedAll = false;
         this._columnFiltered = [];
         this.itemsDiffer = this.iterableDiffers.find(this.items).create();
@@ -12993,8 +13079,13 @@ class SmartTableComponent {
     }
     ngAfterContentInit() {
         this.columnTemplates.forEach((child) => {
+            if (child.id.startsWith('columnFilter_')) {
+                this.columnFilterTemplates[child.id] = child.templateRef;
+                return;
+            }
             this.templates[child.id] = child.templateRef;
         });
+        this.columnFilterTemplates = { ...this.columnFilterTemplates };
     }
     get selectedAll() {
         const selected = this.items.filter((item) => item._selected === true);
@@ -13034,10 +13125,7 @@ class SmartTableComponent {
     get rawColumnNames() {
         return this._columns
             ? this._columns.map((column) => {
-                if (typeof column === 'object')
-                    return column.key;
-                else
-                    return column;
+                return (typeof column === 'object') ? column.key : column;
             })
             : this.genCols;
     }
@@ -13077,12 +13165,14 @@ class SmartTableComponent {
             return _items;
         }
         Object.entries(this.columnFilterState).forEach(([key, value]) => {
+            if (value instanceof Function) {
+                _items = _items.filter((item) => value(item[key]));
+                return;
+            }
             const columnFilter = String(value).toLowerCase();
             if (columnFilter && this.itemsDataColumns.includes(key)) {
                 // @ts-ignore
-                _items = _items.filter((item) => {
-                    return String(item[key]).toLowerCase().includes(columnFilter);
-                });
+                _items = _items.filter((item) => String(item[key]).toLowerCase().includes(columnFilter));
             }
         });
         this._columnFiltered = _items;
@@ -13236,12 +13326,12 @@ class SmartTableComponent {
     ngOnChanges(changes) {
         if (changes['columnFilterValue']) {
             const columnFilterValueChange = changes['columnFilterValue'];
-            if (columnFilterValueChange.firstChange) {
-                const currentValue = columnFilterValueChange.currentValue;
-                if (typeof currentValue === 'object' && Object.keys(currentValue ?? {}).length) {
-                    this.setActivePage(1);
-                }
+            // if (columnFilterValueChange.firstChange) {
+            const currentValue = columnFilterValueChange.currentValue;
+            if (typeof currentValue === 'object' && Object.keys(currentValue ?? {}).length) {
+                this.setActivePage(1);
             }
+            // }
         }
         if (changes['tableFilterValue']) {
             const tableFilterValueChange = changes['tableFilterValue'];
@@ -13255,10 +13345,10 @@ class SmartTableComponent {
     }
 }
 SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }] });
+SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SmartTableComponent, selector: "c-smart-table", inputs: { activePage: "activePage", cleaner: "cleaner", clickableRows: "clickableRows", columns: "columns", columnFilter: "columnFilter", columnFilterValue: "columnFilterValue", columnSorter: "columnSorter", footer: "footer", header: "header", items: "items", itemsPerPage: "itemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPageSelect: "itemsPerPageSelect", loading: "loading", noItemsLabel: "noItemsLabel", pagination: "pagination", selectable: "selectable", sorterValue: "sorterValue", tableFilter: "tableFilter", tableFilterLabel: "tableFilterLabel", tableFilterPlaceholder: "tableFilterPlaceholder", tableFilterValue: "tableFilterValue", tableBodyProps: "tableBodyProps", tableFootProps: "tableFootProps", tableHeadProps: "tableHeadProps", tableProps: "tableProps" }, outputs: { selectedItemsChange: "selectedItemsChange", sorterValueChange: "sorterValueChange", activePageChange: "activePageChange", itemsPerPageChange: "itemsPerPageChange", rowClick: "rowClick", columnFilterValueChange: "columnFilterValueChange", filteredItemsChange: "filteredItemsChange", tableFilterValueChange: "tableFilterValueChange" }, queries: [{ propertyName: "columnTemplates", predicate: TemplateIdDirective }], exportAs: ["cSmartTable"], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: TableDirective, selector: "table[cTable]", inputs: ["align", "borderColor", "bordered", "borderless", "caption", "color", "hover", "responsive", "small", "striped", "stripedColumns"] }, { kind: "directive", type: TableColorDirective, selector: "[cTableColor]", inputs: ["cTableColor"] }, { kind: "directive", type: TableActiveDirective, selector: "[cTableActive]", inputs: ["cTableActive"] }, { kind: "component", type: SmartPaginationComponent, selector: "c-smart-pagination", inputs: ["activePage", "arrows", "doubleArrows", "dots", "limit", "pages", "firstButton", "lastButton", "nextButton", "previousButton", "align", "size", "role"], outputs: ["activePageChange"], exportAs: ["cSmartPagination"] }, { kind: "directive", type: FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { kind: "directive", type: AlignDirective, selector: "[cAlign]", inputs: ["cAlign"] }, { kind: "component", type: SmartTableFilterComponent, selector: "c-smart-table-filter", inputs: ["filterLabel", "filterPlaceholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: SmartTableItemsPerPageSelectorComponent, selector: "c-smart-table-items-per-page-selector", inputs: ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: SmartTableHeadComponent, selector: "c-smart-table-head", inputs: ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "selectable", "selectAll", "sorterValue", "columnFilterTemplates"], outputs: ["columnFilterStateChange", "sorterStateChange", "selectAllChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-smart-table', exportAs: 'cSmartTable', template: "<div *ngIf=\"itemsPerPageSelect || tableFilter || cleaner\" class=\"row my-2 mx-0\">\r\n  <ng-template [ngIf]=\"tableFilter || cleaner\">\r\n    <div class=\"col-auto p-0\">\r\n      <c-smart-table-filter\r\n        (valueChange)=\"handleTableFilterChange($event)\"\r\n        *ngIf=\"tableFilter\"\r\n        [filterLabel]=\"tableFilterLabel\"\r\n        [filterPlaceholder]=\"tableFilterPlaceholder\"\r\n        [value]=\"tableFilterState\"\r\n      >\r\n      </c-smart-table-filter>\r\n    </div>\r\n    <div class=\"col-auto p-0\">\r\n      <button\r\n        (click)=\"clean($event)\"\r\n        *ngIf=\"cleaner\"\r\n        [disabled]=\"!isFiltered\"\r\n        [ngClass]=\"{'ms-1': tableFilter}\"\r\n        [tabindex]=\"0\"\r\n        cButton\r\n        color=\"transparent\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<div class=\"position-relative\">\r\n  <table [align]=\"tableProps?.align\"\r\n         [borderColor]=\"tableProps?.borderColor\"\r\n         [bordered]=\"tableProps?.bordered\"\r\n         [borderless]=\"tableProps?.borderless\"\r\n         [caption]=\"tableProps?.caption\"\r\n         [color]=\"tableProps?.color\"\r\n         [hover]=\"tableProps?.hover\"\r\n         [responsive]=\"tableProps?.responsive\"\r\n         [small]=\"tableProps?.small\"\r\n         [striped]=\"tableProps?.striped\"\r\n         [cHtmlAttr]=\"tableProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableProps?.color\"\r\n         cTable\r\n  >\r\n    <c-smart-table-head\r\n      (columnFilterStateChange)=\"handleColumnFilterChange($event)\"\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"header\"\r\n      [columnFilterState]=\"columnFilterState\"\r\n      [columnFilter]=\"columnFilter\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableHeadProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableHeadProps?.color\"\r\n      [cAlign]=\"tableHeadProps?.align\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n    <ng-container *ngTemplateOutlet=\"tbodyDefaultTemplate\"></ng-container>\r\n\r\n    <c-smart-table-head\r\n      (selectAllChange)=\"handleSelectAllChange($event)\"\r\n      (sorterStateChange)=\"handleSortChange($event)\"\r\n      *ngIf=\"footer\"\r\n      [columns]=\"columns\"\r\n      [selectAll]=\"selectedAll\"\r\n      [selectable]=\"selectable\"\r\n      [sorterValue]=\"sorterValue\"\r\n      [cHtmlAttr]=\"tableFootProps?.attributes ?? {}\"\r\n      [cTableColor]=\"tableFootProps?.color\"\r\n      [cAlign]=\"tableFootProps?.align\"\r\n      component=\"tfoot\"\r\n      [columnFilterTemplates]=\"columnFilterTemplates\"\r\n    ></c-smart-table-head>\r\n\r\n  </table>\r\n  <c-element-cover\r\n    *ngIf=\"loading\"\r\n    [boundaries]=\"[\r\n      { sides: ['top'], query: 'td' },\r\n      { sides: ['bottom'], query: 'tbody' }\r\n    ]\"\r\n  ></c-element-cover>\r\n</div>\r\n<ng-template [ngIf]=\"pagination || itemsPerPageSelect\">\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <c-smart-pagination\r\n        (activePageChange)=\"setActivePage($event)\"\r\n        *ngIf=\"pagination && numberOfPages > 1\"\r\n        [activePage]=\"activePage\"\r\n        [pages]=\"numberOfPages\">\r\n      </c-smart-pagination>\r\n    </div>\r\n    <div class=\"col-auto ms-auto\">\r\n      <c-smart-table-items-per-page-selector\r\n        (itemsPerPageChange)=\"handleItemsPerPageChange($event)\"\r\n        *ngIf=\"itemsPerPageSelect\"\r\n        [itemsPerPageLabel]=\"itemsPerPageLabel\"\r\n        [itemsPerPageOptions]=\"itemsPerPageOptions\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n      >\r\n      </c-smart-table-items-per-page-selector>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tbodyDefaultTemplate>\r\n  <tbody [cHtmlAttr]=\"tableBodyProps?.attributes ?? {}\"\r\n         [cTableColor]=\"tableBodyProps?.color\"\r\n         [cAlign]=\"tableBodyProps?.align\"\r\n  >\r\n  <ng-template ngFor let-item [ngForOf]=\"currentItems\" let-cnt=\"count\" let-i=\"index\" let-isEven=\"even\" let-isOdd=\"odd\">\r\n    <tr [tabindex]=\"clickableRows ? 0 : -1\"\r\n        [ngStyle]=\"{cursor: clickableRows ? 'pointer' : 'auto'}\"\r\n        (click)=\"handleRowClick({$event, item, i})\"\r\n        [cTableActive]=\"item._props?.active\"\r\n        [cTableColor]=\"item._props?.color\"\r\n        [cAlign]=\"item._props?.align\"\r\n    >\r\n      <td *ngIf=\"selectable\"\r\n          [cTableActive]=\"item?.['_cellProps']?._all?.active\"\r\n          [cTableColor]=\"item?.['_cellProps']?._all?.color\"\r\n          [cAlign]=\"item?.['_cellProps']?._all?.align\"\r\n      >\r\n          <input (change)=\"handleRowChecked($event, item)\" [checked]=\"item._selected ?? false\" cFormCheckInput>\r\n      </td>\r\n      <ng-template ngFor let-columnName [ngForOf]=\"rawColumnNames\" let-i=\"index\" >\r\n        <ng-container *ngTemplateOutlet=\"templates['tableData'] || columnDefaultTemplate; context: {item, columnName, tdContent: item[columnName] }\"></ng-container>\r\n      </ng-template>\r\n    </tr>\r\n    <ng-template [ngIf]=\"templates['tableDetails']\">\r\n      <!--      <ng-container *ngTemplateOutlet=\"rowDetailsDefaultTemplate\"></ng-container>-->\r\n      <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>\r\n      <tr class=\"p-0\">\r\n        <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">\r\n          <ng-container *ngTemplateOutlet=\"templates['tableDetails']; context: {item, index: i}\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"noItemsDefaultTemplate\"></ng-container>\r\n  </tbody>\r\n</ng-template>\r\n\r\n<ng-template #columnDefaultTemplate let-item=\"item\" let-columnName=\"columnName\" let-tdContent=\"tdContent\">\r\n  <td\r\n    [cTableActive]=\"tableDataCellProps(item, columnName)?.['active']\"\r\n    [cTableColor]=\"tableDataCellProps(item, columnName)?.color\"\r\n    [cAlign]=\"tableDataCellProps(item, columnName)?.align\"\r\n    [ngClass]=\"tableDataCellClasses(item, columnName)\"\r\n  >\r\n    {{tdContent}}\r\n  </td>\r\n</ng-template>\r\n\r\n<!--<ng-template #rowDetailsDefaultTemplate let-item let-index>-->\r\n<!--  <tr><td [colSpan]=\"colspan\" class=\"p-0\" tabindex=\"-1\" [ngStyle]=\"{borderBottomWidth: 0}\"></td></tr>-->\r\n<!--  <tr class=\"p-0\">-->\r\n<!--    <td [colSpan]=\"colspan\" class=\"p-0\" [ngStyle]=\"{border: 0}\">-->\r\n<!--      <ng-container *ngTemplateOutlet=\"templates?.tableDetails\"></ng-container>-->\r\n<!--    </td>-->\r\n<!--  </tr>-->\r\n<!--</ng-template>-->\r\n\r\n<ng-template #noItemsDefaultTemplate>\r\n  <tr *ngIf=\"!currentItems.length\">\r\n    <td [colSpan]=\"colspan\" class=\"justify-content-center\">{{noItemsLabel}}</td>\r\n  </tr>\r\n</ng-template>\r\n\r\n<!--todo: filterIconCustomTemplate-->\r\n<ng-template #filterIconTemplate>\r\n  <svg class=\"icon icon-custom-size\" role=\"img\" viewBox=\"0 0 512 512\" width=\"18\"\r\n       xmlns=\"http://www.w3.org/2000/svg\">\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16\"></polygon>\r\n    <polygon class=\"ci-primary\"\r\n             fill=\"var(--ci-primary-color, currentColor)\"\r\n             points=\"166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225\"></polygon>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activePage: [{
                 type: Input
             }], cleaner: [{
@@ -13602,7 +13692,7 @@ SmartTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ButtonModule,
         SharedModule,
         ReactiveFormsModule,
-        UtilitiesModule], exports: [SmartTableComponent] });
+        UtilitiesModule], exports: [SmartTableComponent, SmartTableFilterComponent] });
 SmartTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SmartTableModule, imports: [CommonModule,
         ElementCoverModule,
         TableModule,
@@ -13623,7 +13713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         SmartTableItemsPerPageSelectorComponent,
                         SmartTableHeadComponent,
                     ],
-                    exports: [SmartTableComponent],
+                    exports: [SmartTableComponent, SmartTableFilterComponent],
                     imports: [
                         CommonModule,
                         ElementCoverModule,
@@ -15115,5 +15205,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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, 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 };
+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