@coreui/angular-pro 4.2.40 → 4.2.41

package/fesm2020/coreui-angular-pro.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, PLATFORM_ID, TemplateRef, ViewContainerRef, inject, VERSION } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { CommonModule, DOCUMENT, formatDate, isPlatformBrowser } from '@angular/common';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
@@ -9,12 +9,10 @@ import * as i3 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, takeUntil, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import { filter, takeUntil as takeUntil$1, tap, combineLatestWith, distinctUntilChanged, delay, debounceTime, map, take } from 'rxjs/operators';
-import { isValid, format } from 'date-fns';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
 import { createPopper } from '@popperjs/core';
 import * as i1$3 from '@angular/cdk/a11y';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
@@ -1394,135 +1392,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-class CalendarService {
-    constructor(keyValueDiffers) {
-        this.keyValueDiffers = keyValueDiffers;
-        this.calendarStateObject = {
-            calendarDate: new Date(),
-            hoverDate: null,
-            startDate: null,
-            endDate: null,
-            maxDate: null,
-            minDate: null,
-            disabledDates: [],
-            range: false,
-            view: 'days',
-            locale: 'default',
-            dateFilter: undefined,
-            weekdayFormat: 'short',
-            dayFormat: 'numeric',
-            navYearFirst: false
-        };
-        this.calendarState = new BehaviorSubject(this.calendarStateObject);
-        this.calendarState$ = this.calendarState.asObservable();
-        this.differ = this.keyValueDiffers.find(this.calendarStateObject).create();
-    }
-    update(state) {
-        const keys = Object.keys(state);
-        for (const key of keys) {
-            const entry = this.calendarStateObject[key];
-            if (entry === state[key]) {
-                continue;
-            }
-            // if (isValidDate(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
-            if (isValid(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
-                continue;
-            }
-            this.calendarStateObject[key] = state[key];
-        }
-        if (this.differ) {
-            const changes = this.differ.diff(this.calendarStateObject);
-            if (changes) {
-                const newState = { ...this.calendarStateObject };
-                changes.forEachChangedItem(item => {
-                    // console.log('changes', item.key, item, );
-                    newState[item.key] = item.currentValue;
-                });
-                this.calendarState.next(newState);
-            }
-        }
-    }
-}
-CalendarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarService, deps: [{ token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Injectable });
-CalendarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }]; } });
-
-class CalendarNavigationComponent {
-    constructor(calendarService) {
-        this.calendarService = calendarService;
-        this.addMonths = 0;
-        this._calendarDate = new Date();
-        this.navigation = true;
-        this.navYearFirst = false;
-        this.locale = 'default';
-        this.view = 'days';
-        this.navigationClick = new EventEmitter();
-        this.calendarStateSubscribe();
-    }
-    set calendarDate(value) {
-        this._calendarDate = value;
-    }
-    ;
-    get calendarDate() {
-        return this._calendarDate;
-    }
-    get date() {
-        return new Date(this.calendarDate.getFullYear(), this.calendarDate.getMonth() + this.addMonths);
-    }
-    get hostClasses() {
-        return {
-            'calendar-nav': true
-        };
-    }
-    ngOnDestroy() {
-        this.calendarStateSubscribe(false);
-    }
-    calendarStateSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.calendarStateSubscription =
-                this.calendarService.calendarState$.subscribe(state => {
-                    const keys = Object.keys(state);
-                    for (const key of keys) {
-                        if (key in this) {
-                            // @ts-ignore
-                            this[key] = state[key];
-                        }
-                    }
-                });
-            return;
-        }
-        this.calendarStateSubscription.unsubscribe();
-    }
-    setView(view) {
-        this.view = view;
-        this.calendarService.update({ view: view });
-    }
-    handleNavigationClick(direction, years = false) {
-        this.navigationClick.emit({ direction, years: years });
-    }
-}
-CalendarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarNavigationComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarNavigationComponent, selector: "c-calendar-navigation", inputs: { addMonths: "addMonths", calendarDate: "calendarDate", navigation: "navigation", navYearFirst: "navYearFirst" }, outputs: { navigationClick: "navigationClick" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"navigation\" class=\"calendar-nav-prev\">\n  <button\n    (click)=\"handleNavigationClick('prev', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('prev')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n  </button>\n</div>\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  <button\n    (click)=\"setView('months')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n  </button>\n  <button (click)=\"setView('years')\" cButton color=\"transparent\" size=\"sm\" tabindex=\"0\" [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\">\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n<div *ngIf=\"navigation\" class=\"calendar-nav-next\">\n  <button\n    (click)=\"handleNavigationClick('next')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('next', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n  </button>\n</div>\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"], dependencies: [{ 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: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarNavigationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c-calendar-navigation', template: "<div *ngIf=\"navigation\" class=\"calendar-nav-prev\">\n  <button\n    (click)=\"handleNavigationClick('prev', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('prev')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n  </button>\n</div>\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  <button\n    (click)=\"setView('months')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n  </button>\n  <button (click)=\"setView('years')\" cButton color=\"transparent\" size=\"sm\" tabindex=\"0\" [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\">\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n<div *ngIf=\"navigation\" class=\"calendar-nav-next\">\n  <button\n    (click)=\"handleNavigationClick('next')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('next', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n  </button>\n</div>\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"] }]
-        }], ctorParameters: function () { return [{ type: CalendarService }]; }, propDecorators: { addMonths: [{
-                type: Input
-            }], calendarDate: [{
-                type: Input
-            }], navigation: [{
-                type: Input
-            }], navYearFirst: [{
-                type: Input
-            }], navigationClick: [{
-                type: Output
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 const convertToLocalDate = (d, locale, options = {}) => d.toLocaleDateString(locale, options);
 const convertToLocalTime = (d, locale, options = {}) => d.toLocaleTimeString(locale, options);
 const createGroupsInArray = (arr, numberOfGroups) => {
@@ -1696,14 +1565,18 @@ const isThisYear = (year) => {
     return (year == today.getFullYear());
 };
 const isValidDate = (date) => {
-    const d = new Date(date);
-    // console.log('isValidDate', date, d.getTime(), !!d.getTime())
-    return !!d.getTime();
+    if (date instanceof Date || typeof date === 'number' || typeof date === 'string') {
+        // Try to create a Date object from Date or timestamp or string
+        const dateObj = new Date(date);
+        return !isNaN(dateObj.getTime());
+    }
+    // If none of the above conditions are met, it's not a valid date
+    return false;
 };
 const tryDate = (value, propName = 'date') => {
     let _value;
     try {
-        if (!isValid(value)) {
+        if (!isValidDate(value)) {
             throw value;
         }
         _value = new Date(value);
@@ -1805,6 +1678,134 @@ const isDateInRangeDisabled = (startDate, endDate, dates) => {
 //
 // // getDate('12/07/1997');
 
+class CalendarService {
+    constructor(keyValueDiffers) {
+        this.keyValueDiffers = keyValueDiffers;
+        this.calendarStateObject = {
+            calendarDate: new Date(),
+            hoverDate: null,
+            startDate: null,
+            endDate: null,
+            maxDate: null,
+            minDate: null,
+            disabledDates: [],
+            range: false,
+            view: 'days',
+            locale: 'default',
+            dateFilter: undefined,
+            weekdayFormat: 'short',
+            dayFormat: 'numeric',
+            navYearFirst: false
+        };
+        this.calendarState = new BehaviorSubject(this.calendarStateObject);
+        this.calendarState$ = this.calendarState.asObservable();
+        this.differ = this.keyValueDiffers.find(this.calendarStateObject).create();
+    }
+    update(state) {
+        const keys = Object.keys(state);
+        for (const key of keys) {
+            const entry = this.calendarStateObject[key];
+            if (entry === state[key]) {
+                continue;
+            }
+            if (isValidDate(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
+                continue;
+            }
+            this.calendarStateObject[key] = state[key];
+        }
+        if (this.differ) {
+            const changes = this.differ.diff(this.calendarStateObject);
+            if (changes) {
+                const newState = { ...this.calendarStateObject };
+                changes.forEachChangedItem(item => {
+                    // console.log('changes', item.key, item, );
+                    newState[item.key] = item.currentValue;
+                });
+                this.calendarState.next(newState);
+            }
+        }
+    }
+}
+CalendarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarService, deps: [{ token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Injectable });
+CalendarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }]; } });
+
+class CalendarNavigationComponent {
+    constructor(calendarService) {
+        this.calendarService = calendarService;
+        this.addMonths = 0;
+        this._calendarDate = new Date();
+        this.navigation = true;
+        this.navYearFirst = false;
+        this.locale = 'default';
+        this.view = 'days';
+        this.navigationClick = new EventEmitter();
+        this.calendarStateSubscribe();
+    }
+    set calendarDate(value) {
+        this._calendarDate = value;
+    }
+    ;
+    get calendarDate() {
+        return this._calendarDate;
+    }
+    get date() {
+        return new Date(this.calendarDate.getFullYear(), this.calendarDate.getMonth() + this.addMonths);
+    }
+    get hostClasses() {
+        return {
+            'calendar-nav': true
+        };
+    }
+    ngOnDestroy() {
+        this.calendarStateSubscribe(false);
+    }
+    calendarStateSubscribe(subscribe = true) {
+        if (subscribe) {
+            this.calendarStateSubscription =
+                this.calendarService.calendarState$.subscribe(state => {
+                    const keys = Object.keys(state);
+                    for (const key of keys) {
+                        if (key in this) {
+                            // @ts-ignore
+                            this[key] = state[key];
+                        }
+                    }
+                });
+            return;
+        }
+        this.calendarStateSubscription.unsubscribe();
+    }
+    setView(view) {
+        this.view = view;
+        this.calendarService.update({ view: view });
+    }
+    handleNavigationClick(direction, years = false) {
+        this.navigationClick.emit({ direction, years: years });
+    }
+}
+CalendarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarNavigationComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
+CalendarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarNavigationComponent, selector: "c-calendar-navigation", inputs: { addMonths: "addMonths", calendarDate: "calendarDate", navigation: "navigation", navYearFirst: "navYearFirst" }, outputs: { navigationClick: "navigationClick" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"navigation\" class=\"calendar-nav-prev\">\n  <button\n    (click)=\"handleNavigationClick('prev', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('prev')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n  </button>\n</div>\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  <button\n    (click)=\"setView('months')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n  </button>\n  <button (click)=\"setView('years')\" cButton color=\"transparent\" size=\"sm\" tabindex=\"0\" [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\">\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n<div *ngIf=\"navigation\" class=\"calendar-nav-next\">\n  <button\n    (click)=\"handleNavigationClick('next')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('next', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n  </button>\n</div>\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"], dependencies: [{ 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: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-calendar-navigation', template: "<div *ngIf=\"navigation\" class=\"calendar-nav-prev\">\n  <button\n    (click)=\"handleNavigationClick('prev', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('prev')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n  </button>\n</div>\n<div class=\"calendar-nav-date\" [ngStyle]=\"navYearFirst ? { display: 'flex', justifyContent: 'center' } : {}\">\n  <button\n    (click)=\"setView('months')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date.toLocaleDateString(locale, { month: 'long' }) }}\n  </button>\n  <button (click)=\"setView('years')\" cButton color=\"transparent\" size=\"sm\" tabindex=\"0\" [ngStyle]=\"navYearFirst ? { order: '-1' } : {}\">\n    {{ date.toLocaleDateString(locale, { year: 'numeric' }) }}\n  </button>\n</div>\n<div *ngIf=\"navigation\" class=\"calendar-nav-next\">\n  <button\n    (click)=\"handleNavigationClick('next')\"\n    *ngIf=\"view === 'days'\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n  </button>\n  <button\n    (click)=\"handleNavigationClick('next', true)\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n  </button>\n</div>\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"] }]
+        }], ctorParameters: function () { return [{ type: CalendarService }]; }, propDecorators: { addMonths: [{
+                type: Input
+            }], calendarDate: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], navYearFirst: [{
+                type: Input
+            }], navigationClick: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class CalendarDayDirective {
     constructor(calendarService) {
         this.calendarService = calendarService;
@@ -4419,7 +4420,7 @@ const convertTimeToDate = (time) => time ? (time instanceof Date ? new Date(time
 // }
 const getAmPm = (date, locale, options = {}) => {
     const dayPeriods = getDayPeriods('en-US', options);
-    const time = new Intl.DateTimeFormat('en-US', { timeStyle: "short", hour12: true }).format(date);
+    const time = new Intl.DateTimeFormat('en-US', { timeStyle: 'short', hour12: true }).format(date);
     const dayPeriod = dayPeriods.find(element => time.includes(element.label));
     return (dayPeriod?.value ?? (date.getHours() >= 12 ? 'pm' : 'am'));
 };
@@ -4467,8 +4468,8 @@ const getListOfHours = (locale, options = {}) => {
                 hour: '2-digit',
                 hour12: hour12,
                 minute: '2-digit',
-                second: '2-digit',
-            }).split(':')[0],
+                second: '2-digit'
+            }).split(':')[0]
         };
     });
 };
@@ -4484,8 +4485,8 @@ const getListOfMinutes = (locale, options = {}, valueAsString = false) => {
                 hour: '2-digit',
                 hour12: false,
                 minute: '2-digit',
-                second: '2-digit',
-            }).split(':')[1],
+                second: '2-digit'
+            }).split(':')[1]
         };
     });
 };
@@ -4500,8 +4501,8 @@ const getListOfSeconds = (locale, options = {}, valueAsString = false) => Array.
             hour: '2-digit',
             hour12: false,
             minute: '2-digit',
-            second: '2-digit',
-        }).split(':')[2],
+            second: '2-digit'
+        }).split(':')[2]
     };
 });
 const getSelectedHour = (date, locale) => date instanceof Date ? (isHour12(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : '';
@@ -4512,15 +4513,15 @@ const getSelectedSeconds = (date) => (date ? date.getSeconds() : '');
 const isAmPm = (locale = 'default') => {
     const supportedLocale = getSupportedLocale(locale);
     const date = new Date();
-    const time = new Intl.DateTimeFormat(supportedLocale, { timeStyle: "short" }).format(date);
+    const time = new Intl.DateTimeFormat(supportedLocale, { timeStyle: 'short' }).format(date);
     const isAmPm = time.match(/(?:\p{L}\p{M}\p{P}*)+|(?:\p{L}\p{P}*)+/gu) ?? [];
     return isAmPm.length > 0;
 };
 const isValidTime = (time) => {
     if (typeof time === 'string') {
-        return isValid(time) || isValid(new Date(`1970-01-01 ${time}`));
+        return isValidDate(time) || isValidDate(new Date(`1970-01-01 ${time}`));
     }
-    return isValid(time);
+    return isValidDate(time);
     // const d = new Date(`1970-01-01 ${time}`)
     // return d instanceof Date && d.getTime()
 };
@@ -4546,7 +4547,7 @@ const getDayPeriods = (locale = 'default', options = {}) => {
     const supportedLocale = getSupportedLocale(locale);
     const dayPeriods = [
         { value: 'am', label: 'am' },
-        { value: 'pm', label: 'pm' },
+        { value: 'pm', label: 'pm' }
     ];
     const hour12 = isHour12(supportedLocale);
     if (!hour12) {
@@ -5995,7 +5996,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: [TemplateIdDirective, { descendants: true }]
             }] } });
 
-var _DateRangePickerComponent_closeOnSelect;
+class CustomRangeKeyPipe {
+    transform(customRange, ...args) {
+        return customRange[0];
+    }
+}
+CustomRangeKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomRangeKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CustomRangeKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CustomRangeKeyPipe, name: "customRangeKey" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomRangeKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'customRangeKey'
+                }]
+        }] });
+
+var _DateRangePickerComponent_closeOnSelect, _DateRangePickerComponent_breakpoints;
 /** Must be a valid date string */
 // todo: validation
 // export function invalidDateStringValidator(locale: string): ValidatorFn {
@@ -6037,6 +6052,11 @@ class DateRangePickerComponent {
          * @default 'secondary'
          */
         this.rangesButtonsColor = 'secondary';
+        /**
+         * Size the ranges button small or large.
+         * @type 'sm' | 'lg' | ''
+         */
+        this.rangesButtonsSize = '';
         /**
          * Set the ranges button variant to an outlined button or a ghost button.
          * @type 'outline' | 'ghost' | undefined
@@ -6076,8 +6096,9 @@ class DateRangePickerComponent {
         this.templates = {};
         this.dateChangeSubscriptions = [];
         this.isMobile = true;
-        this._startDateValue = this.startDate?.toLocaleDateString(this.locale) ?? '';
-        this._endDateValue = this.endDate?.toLocaleDateString(this.locale) ?? '';
+        this.showRanges = false;
+        this._startDateValue = this.formatDate(this.startDate);
+        this._endDateValue = this.formatDate(this.endDate);
         // todo: validation
         this.startDateInput = new FormControl({ value: this.startDateValue, disabled: this.disabled }, [
             Validators.required
@@ -6091,11 +6112,16 @@ class DateRangePickerComponent {
             // Validators.maxLength(10),
             // invalidDateStringValidator(this.locale)
         ]);
+        _DateRangePickerComponent_breakpoints.set(this, {
+            OneCalendarRanges: '(min-width: 480px)',
+            TwoCalendars: '(max-width: 650px)',
+            TwoCalendarsRanges: '(max-width: 810px)'
+        });
         this.setInputValue = (elementRef, date) => {
             if (!elementRef) {
                 return;
             }
-            elementRef.nativeElement.value = date?.toLocaleDateString(this.locale) ?? '';
+            elementRef.nativeElement.value = this.formatDate(date);
             // elementRef.nativeElement.valueAsDate = date;
             return;
         };
@@ -6206,6 +6232,7 @@ class DateRangePickerComponent {
         const prevDate = this._startDate ? new Date(this._startDate) : null;
         this._startDate = value ? new Date(value) : null;
         if (prevDate?.getTime() !== this._startDate?.getTime()) {
+            this.startDateValue = this.formatDate(this._startDate);
             this.startDateChange.emit(this._startDate);
         }
     }
@@ -6216,6 +6243,7 @@ class DateRangePickerComponent {
         const prevDate = this._endDate ? new Date(this._endDate ?? 0) : null;
         this._endDate = value ? new Date(value) : null;
         if (prevDate?.getTime() !== this._endDate?.getTime()) {
+            this.endDateValue = this.formatDate(this._endDate);
             this.endDateChange.emit(this._endDate);
         }
     }
@@ -6290,7 +6318,7 @@ class DateRangePickerComponent {
             return;
         }
         this.dateChangeSubscriptions.forEach(subscription => {
-            subscription.unsubscribe();
+            subscription?.unsubscribe();
         });
     }
     onBlur() {
@@ -6337,26 +6365,32 @@ class DateRangePickerComponent {
         };
     }
     formatDate(date) {
-        return this.format
-            ? format(date, this.format)
-            : this.timepicker
-                ? date.toLocaleString(this.locale)
-                : date.toLocaleDateString(this.locale);
+        return !date || !isValidDate(date) ? '' :
+            this.format ? formatDate(date, this.format, this.locale) :
+                this.timepicker ? date.toLocaleString(this.locale) :
+                    date.toLocaleDateString(this.locale);
     }
     ngOnInit() {
+        this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
+        const breakpoints = __classPrivateFieldGet(this, _DateRangePickerComponent_breakpoints, "f");
         this.layoutChanges = this.breakpointObserver.observe([
-            Breakpoints.Handset,
-            Breakpoints.Tablet
+            breakpoints.OneCalendarRanges,
+            breakpoints.TwoCalendars,
+            breakpoints.TwoCalendarsRanges
         ]).subscribe(result => {
-            this.isMobile = result.matches;
+            if (result.matches) {
+                this.isMobile = (this.customRanges?.length > 0 && result.breakpoints[breakpoints.TwoCalendarsRanges]) || result.breakpoints[breakpoints.TwoCalendars];
+                if (this.customRanges?.length > 0) {
+                    this.showRanges = !result.breakpoints[breakpoints.OneCalendarRanges];
+                }
+            }
         });
-        this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
-        this.startDateValue = this.startDate?.toLocaleDateString(this.locale) ?? '';
-        this.endDateValue = this.endDate?.toLocaleDateString(this.locale) ?? '';
+        this.startDateValue = this.formatDate(this.startDate);
+        this.endDateValue = this.formatDate(this.endDate);
         this.subscribeDateChange();
     }
     ngOnDestroy() {
-        this.layoutChanges.unsubscribe();
+        this.layoutChanges?.unsubscribe();
         this.subscribeDateChange(false);
     }
     ngAfterViewInit() {
@@ -6382,6 +6416,10 @@ class DateRangePickerComponent {
             const date = this.convertValueToDate(changes['endDate']?.currentValue) ?? null;
             this.handleEndDateChange(date);
         }
+        if (changes['locale']) {
+            this.startDateValue = this.formatDate(this.startDate);
+            this.endDateValue = this.formatDate(this.endDate);
+        }
     }
     convertValueToDate(value) {
         if (!value) {
@@ -6405,6 +6443,8 @@ class DateRangePickerComponent {
         if (!this.startDate) {
             this.setInputValue(this.startDateElementRef, $event);
             this.inputStartHoverValue = $event;
+            this.setInputValue(this.endDateElementRef, null);
+            this.inputEndHoverValue = null;
             return;
         }
         if (!this.endDate) {
@@ -6421,7 +6461,7 @@ class DateRangePickerComponent {
     handleStartDateChange(date) {
         if (date?.getTime() !== this.startDate?.getTime()) {
             this.startDate = date ?? null;
-            this.startDateValue = date ? date.toLocaleDateString(this.locale) : '';
+            this.startDateValue = this.formatDate(this.startDate);
             this.inputStartHoverValue = null;
             this.value = this.range ? { startDate: this.startDate, endDate: this.endDate } : this.startDate;
         }
@@ -6432,7 +6472,7 @@ class DateRangePickerComponent {
                 return;
             }
             this.endDate = date ?? null;
-            this.endDateValue = date ? date.toLocaleDateString(this.locale) : '';
+            this.endDateValue = this.formatDate(this.endDate);
             this.inputEndHoverValue = null;
             this.value = this.range ? { startDate: this.startDate, endDate: this.endDate } : this.startDate;
         }
@@ -6497,7 +6537,7 @@ class DateRangePickerComponent {
         this.endDate = time ?? this.endDate;
     }
 }
-_DateRangePickerComponent_closeOnSelect = new WeakMap();
+_DateRangePickerComponent_closeOnSelect = new WeakMap(), _DateRangePickerComponent_breakpoints = new WeakMap();
 DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", closeOnSelect: "closeOnSelect", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
         {
@@ -6505,7 +6545,7 @@ DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             useExisting: forwardRef(() => DateRangePickerComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
@@ -6514,7 +6554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -7055,7 +7095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class DateRangePickerModule {
 }
 DateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DateRangePickerModule, declarations: [DateRangePickerComponent], imports: [CommonModule,
+DateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DateRangePickerModule, declarations: [DateRangePickerComponent,
+        CustomRangeKeyPipe], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         ButtonModule,
@@ -7063,7 +7104,8 @@ DateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         SharedModule,
         FormModule,
         DropdownModule,
-        TimePickerModule], exports: [DateRangePickerComponent] });
+        TimePickerModule], exports: [DateRangePickerComponent,
+        CustomRangeKeyPipe] });
 DateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangePickerModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -7077,7 +7119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        DateRangePickerComponent
+                        DateRangePickerComponent,
+                        CustomRangeKeyPipe
                     ],
                     imports: [
                         CommonModule,
@@ -7091,7 +7134,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TimePickerModule
                     ],
                     exports: [
-                        DateRangePickerComponent
+                        DateRangePickerComponent,
+                        CustomRangeKeyPipe
                     ]
                 }]
         }] });
@@ -7132,7 +7176,7 @@ class DatePickerComponent extends DateRangePickerComponent {
             return;
         }
         this.dateChangeSubscriptions.forEach(subscription => {
-            subscription.unsubscribe();
+            subscription?.unsubscribe();
         });
     }
 }
@@ -7143,7 +7187,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\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', providers: [
@@ -7152,7 +7196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!showRanges\">\n        <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{customRange | customRangeKey}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
@@ -9790,7 +9834,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         {
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\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\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\n    [itemSize]=\"itemSize\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n    maxBufferPx=\"{{itemSize * visibleItems}}\"\n    minBufferPx=\"{{itemSize * visibleItems}}\"\n  >\n    <ng-container\n      #cdkVirtualFor\n      *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n    >\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n    class=\"form-multi-select-options\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{option.text}}\n  </c-multi-select-option>\n</ng-template>\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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}: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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
+    ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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: selectionTypeCounterText ?? '+' }) }}</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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\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\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\n    [itemSize]=\"itemSize\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n    maxBufferPx=\"{{itemSize * visibleItems}}\"\n    minBufferPx=\"{{itemSize * visibleItems}}\"\n  >\n    <ng-container\n      #cdkVirtualFor\n      *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n    >\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n    class=\"form-multi-select-options\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{option.text}}\n  </c-multi-select-option>\n</ng-template>\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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}: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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -9798,7 +9842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         {
                             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\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\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\n    [itemSize]=\"itemSize\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n    maxBufferPx=\"{{itemSize * visibleItems}}\"\n    minBufferPx=\"{{itemSize * visibleItems}}\"\n  >\n    <ng-container\n      #cdkVirtualFor\n      *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n    >\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n    class=\"form-multi-select-options\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{option.text}}\n  </c-multi-select-option>\n</ng-template>\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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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: selectionTypeCounterText ?? '+' }) }}</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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\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\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\n    [itemSize]=\"itemSize\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n    maxBufferPx=\"{{itemSize * visibleItems}}\"\n    minBufferPx=\"{{itemSize * visibleItems}}\"\n  >\n    <ng-container\n      #cdkVirtualFor\n      *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n    >\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n    class=\"form-multi-select-options\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{option.text}}\n  </c-multi-select-option>\n</ng-template>\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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}: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: [{
@@ -16339,5 +16383,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * 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, 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 };
+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, CustomRangeKeyPipe, 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