@coreui/angular-pro 4.2.0-next.4 → 4.2.0-next.5

package/fesm2020/coreui-angular-pro.mjs

@@ -1946,6 +1946,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 }]
         }] });
 
+class CalendarDayTitlePipe {
+    transform(date, locale = 'default') {
+        return date.toLocaleDateString(locale);
+    }
+}
+CalendarDayTitlePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CalendarDayTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CalendarDayTitlePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: CalendarDayTitlePipe, name: "calendarDayTitle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CalendarDayTitlePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'calendarDayTitle'
+                }]
+        }] });
+
 class CalendarMonthComponent {
     constructor(calendarService) {
         this.calendarService = calendarService;
@@ -2224,10 +2238,10 @@ class CalendarMonthComponent {
     }
 }
 CalendarMonthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CalendarMonthComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CalendarMonthComponent, selector: "c-calendar-month", inputs: { addMonths: "addMonths", startDate: "startDate", endDate: "endDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", range: "range", weekdayFormat: "weekdayFormat", view: "view", maxDate: "maxDate", minDate: "minDate", calendarDate: "calendarDate" }, exportAs: ["cCalendarMonth"], ngImport: i0, template: "<table>\r\n  <thead *ngIf=\"view === 'days'\">\r\n  <tr>\r\n    <th *ngFor=\"let weekDay of weekDays; index as i; count as cnt\" class=\"calendar-cell\">\r\n      <div class=\"calendar-header-cell-inner\">\r\n        {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\r\n      </div>\r\n    </th>\r\n  </tr>\r\n  </thead>\r\n  <tbody (mouseleave)=\"handleCellMouseLeave()\" [ngSwitch]=\"view\">\r\n  <ng-container *ngSwitchCase=\"'years'\">\r\n    <tr *ngFor=\"let yearsRow of listOfYears; index as rowIdx\">\r\n      <td\r\n        (click)=\"handleYearCellClick(year)\"\r\n        (keyup)=\"handleYearCellKeyUp($event, year)\"\r\n        *ngFor=\"let year of yearsRow; index as idx\"\r\n        [ngClass]=\"year | calendarClassYear\"\r\n        [tabindex]=\"0\"\r\n      >\r\n        <div class=\"calendar-cell-inner\">\r\n          {{ yearNumber(year) }}\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'months'\">\r\n    <tr *ngFor=\"let monthsRow of listOfMonths; index as rowIdx\">\r\n      <td\r\n        (click)=\"handleMonthCellClick(rowIdx, idx)\"\r\n        (keyup)=\"handleMonthCellKeyUp($event, rowIdx, idx)\"\r\n        *ngFor=\"let month of monthsRow; index as idx\"\r\n        [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\r\n        [tabindex]=\"0\"\r\n      >\r\n        <div class=\"calendar-cell-inner\">\r\n          {{ month }}\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <tr *ngFor=\"let week of monthDetails; index as i\">\r\n      <td\r\n        (click)=\"dateObj.month === 'current' && handleDayCellClick(dateObj.date)\"\r\n        (keyup)=\"dateObj.month === 'current' && handleDayCellKeyUp($event, dateObj.date)\"\r\n        (mouseenter)=\"dateObj.month === 'current' && handleCellMouseEnter(dateObj.date)\"\r\n        *ngFor=\"let dateObj of week; index as idx\"\r\n        [cCalendarDay]=\"dateObj\"\r\n        [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\r\n        [tabindex]=\"isDateDisabled(dateObj.date) || dateObj.month !== 'current' ? -1 : 0\"\r\n        [title]=\"calendarCellTitle(dateObj.date)\"\r\n      >\r\n        <div class=\"calendar-cell-inner\">\r\n          {{ dateObj.date | calendarDay:dayFormat:locale }}\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  </tbody>\r\n</table>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CalendarDayDirective, selector: "[cCalendarDay]", inputs: ["cCalendarDay"] }, { kind: "pipe", type: CalendarClassYearPipe, name: "calendarClassYear" }, { kind: "pipe", type: CalendarClassDayPipe, name: "calendarClassDay" }, { kind: "pipe", type: CalendarClassMonthPipe, name: "calendarClassMonth" }, { kind: "pipe", type: CalendarDayPipe, name: "calendarDay" }, { kind: "pipe", type: CalendarWeekdayPipe, name: "calendarWeekday" }] });
+CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CalendarMonthComponent, selector: "c-calendar-month", inputs: { addMonths: "addMonths", startDate: "startDate", endDate: "endDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", range: "range", weekdayFormat: "weekdayFormat", view: "view", maxDate: "maxDate", minDate: "minDate", calendarDate: "calendarDate" }, exportAs: ["cCalendarMonth"], ngImport: i0, template: "<table>\n  <thead *ngIf=\"view === 'days'\">\n  <tr>\n    <th *ngFor=\"let weekDay of weekDays; index as i; count as cnt\" class=\"calendar-cell\">\n      <div class=\"calendar-header-cell-inner\">\n        {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\n      </div>\n    </th>\n  </tr>\n  </thead>\n  <tbody (mouseleave)=\"handleCellMouseLeave()\" [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'years'\">\n    <tr *ngFor=\"let yearsRow of listOfYears; index as rowIdx\">\n      <td\n        (click)=\"handleYearCellClick(year)\"\n        (keyup)=\"handleYearCellKeyUp($event, year)\"\n        *ngFor=\"let year of yearsRow; index as idx\"\n        [ngClass]=\"year | calendarClassYear\"\n        [tabindex]=\"0\"\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ yearNumber(year) }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'months'\">\n    <tr *ngFor=\"let monthsRow of listOfMonths; index as rowIdx\">\n      <td\n        (click)=\"handleMonthCellClick(rowIdx, idx)\"\n        (keyup)=\"handleMonthCellKeyUp($event, rowIdx, idx)\"\n        *ngFor=\"let month of monthsRow; index as idx\"\n        [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n        [tabindex]=\"0\"\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ month }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <tr *ngFor=\"let week of monthDetails; index as i\">\n      <td\n        (click)=\"dateObj.month === 'current' && handleDayCellClick(dateObj.date)\"\n        (keyup)=\"dateObj.month === 'current' && handleDayCellKeyUp($event, dateObj.date)\"\n        (mouseenter)=\"dateObj.month === 'current' && handleCellMouseEnter(dateObj.date)\"\n        *ngFor=\"let dateObj of week; index as idx\"\n        [cCalendarDay]=\"dateObj\"\n        [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n        [tabindex]=\"isDateDisabled(dateObj.date) || dateObj.month !== 'current' ? -1 : 0\"\n        [title]=\"dateObj.date | calendarDayTitle:locale\"\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ dateObj.date | calendarDay:dayFormat:locale }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  </tbody>\n</table>\n\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CalendarDayDirective, selector: "[cCalendarDay]", inputs: ["cCalendarDay"] }, { kind: "pipe", type: CalendarClassYearPipe, name: "calendarClassYear" }, { kind: "pipe", type: CalendarClassDayPipe, name: "calendarClassDay" }, { kind: "pipe", type: CalendarClassMonthPipe, name: "calendarClassMonth" }, { kind: "pipe", type: CalendarDayPipe, name: "calendarDay" }, { kind: "pipe", type: CalendarWeekdayPipe, name: "calendarWeekday" }, { kind: "pipe", type: CalendarDayTitlePipe, name: "calendarDayTitle" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-calendar-month', exportAs: 'cCalendarMonth', template: "<table>\r\n  <thead *ngIf=\"view === 'days'\">\r\n  <tr>\r\n    <th *ngFor=\"let weekDay of weekDays; index as i; count as cnt\" class=\"calendar-cell\">\r\n      <div class=\"calendar-header-cell-inner\">\r\n        {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\r\n      </div>\r\n    </th>\r\n  </tr>\r\n  </thead>\r\n  <tbody (mouseleave)=\"handleCellMouseLeave()\" [ngSwitch]=\"view\">\r\n  <ng-container *ngSwitchCase=\"'years'\">\r\n    <tr *ngFor=\"let yearsRow of listOfYears; index as rowIdx\">\r\n      <td\r\n        (click)=\"handleYearCellClick(year)\"\r\n        (keyup)=\"handleYearCellKeyUp($event, year)\"\r\n        *ngFor=\"let year of yearsRow; index as idx\"\r\n        [ngClass]=\"year | calendarClassYear\"\r\n        [tabindex]=\"0\"\r\n      >\r\n        <div class=\"calendar-cell-inner\">\r\n          {{ yearNumber(year) }}\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'months'\">\r\n    <tr *ngFor=\"let monthsRow of listOfMonths; index as rowIdx\">\r\n      <td\r\n        (click)=\"handleMonthCellClick(rowIdx, idx)\"\r\n        (keyup)=\"handleMonthCellKeyUp($event, rowIdx, idx)\"\r\n        *ngFor=\"let month of monthsRow; index as idx\"\r\n        [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\r\n        [tabindex]=\"0\"\r\n      >\r\n        <div class=\"calendar-cell-inner\">\r\n          {{ month }}\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <tr *ngFor=\"let week of monthDetails; index as i\">\r\n      <td\r\n        (click)=\"dateObj.month === 'current' && handleDayCellClick(dateObj.date)\"\r\n        (keyup)=\"dateObj.month === 'current' && handleDayCellKeyUp($event, dateObj.date)\"\r\n        (mouseenter)=\"dateObj.month === 'current' && handleCellMouseEnter(dateObj.date)\"\r\n        *ngFor=\"let dateObj of week; index as idx\"\r\n        [cCalendarDay]=\"dateObj\"\r\n        [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\r\n        [tabindex]=\"isDateDisabled(dateObj.date) || dateObj.month !== 'current' ? -1 : 0\"\r\n        [title]=\"calendarCellTitle(dateObj.date)\"\r\n      >\r\n        <div class=\"calendar-cell-inner\">\r\n          {{ dateObj.date | calendarDay:dayFormat:locale }}\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  </tbody>\r\n</table>\r\n\r\n" }]
+            args: [{ selector: 'c-calendar-month', exportAs: 'cCalendarMonth', template: "<table>\n  <thead *ngIf=\"view === 'days'\">\n  <tr>\n    <th *ngFor=\"let weekDay of weekDays; index as i; count as cnt\" class=\"calendar-cell\">\n      <div class=\"calendar-header-cell-inner\">\n        {{ weekDay.date | calendarWeekday:weekdayFormat:locale }}\n      </div>\n    </th>\n  </tr>\n  </thead>\n  <tbody (mouseleave)=\"handleCellMouseLeave()\" [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'years'\">\n    <tr *ngFor=\"let yearsRow of listOfYears; index as rowIdx\">\n      <td\n        (click)=\"handleYearCellClick(year)\"\n        (keyup)=\"handleYearCellKeyUp($event, year)\"\n        *ngFor=\"let year of yearsRow; index as idx\"\n        [ngClass]=\"year | calendarClassYear\"\n        [tabindex]=\"0\"\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ yearNumber(year) }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'months'\">\n    <tr *ngFor=\"let monthsRow of listOfMonths; index as rowIdx\">\n      <td\n        (click)=\"handleMonthCellClick(rowIdx, idx)\"\n        (keyup)=\"handleMonthCellKeyUp($event, rowIdx, idx)\"\n        *ngFor=\"let month of monthsRow; index as idx\"\n        [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n        [tabindex]=\"0\"\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ month }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <tr *ngFor=\"let week of monthDetails; index as i\">\n      <td\n        (click)=\"dateObj.month === 'current' && handleDayCellClick(dateObj.date)\"\n        (keyup)=\"dateObj.month === 'current' && handleDayCellKeyUp($event, dateObj.date)\"\n        (mouseenter)=\"dateObj.month === 'current' && handleCellMouseEnter(dateObj.date)\"\n        *ngFor=\"let dateObj of week; index as idx\"\n        [cCalendarDay]=\"dateObj\"\n        [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n        [tabindex]=\"isDateDisabled(dateObj.date) || dateObj.month !== 'current' ? -1 : 0\"\n        [title]=\"dateObj.date | calendarDayTitle:locale\"\n      >\n        <div class=\"calendar-cell-inner\">\n          {{ dateObj.date | calendarDay:dayFormat:locale }}\n        </div>\n      </td>\n    </tr>\n  </ng-container>\n  </tbody>\n</table>\n\n" }]
         }], ctorParameters: function () { return [{ type: CalendarService }]; }, propDecorators: { addMonths: [{
                 type: Input
             }], startDate: [{
@@ -2646,7 +2660,8 @@ CalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         CalendarNavigationComponent,
         CalendarMonthComponent,
         CalendarDayPipe,
-        CalendarWeekdayPipe], imports: [CommonModule,
+        CalendarWeekdayPipe,
+        CalendarDayTitlePipe], imports: [CommonModule,
         ButtonModule], exports: [CalendarComponent,
         CalendarMonthComponent,
         CalendarNavigationComponent] });
@@ -2665,7 +2680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                         CalendarNavigationComponent,
                         CalendarMonthComponent,
                         CalendarDayPipe,
-                        CalendarWeekdayPipe
+                        CalendarWeekdayPipe,
+                        CalendarDayTitlePipe
                     ],
                     imports: [
                         CommonModule,
@@ -5633,24 +5649,6 @@ class DateRangePickerComponent {
         this.rangesButtonsVariant = 'ghost';
         this._separator = true;
         this._timepicker = false;
-        /**
-         * Toggle visibility or set the content of today button.
-         * @type string
-         * @default 'Today'
-         */
-        this.todayButton = 'Today';
-        /**
-         * Sets the color context of the today button to one of CoreUI’s themed colors.
-         * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-         * @default 'primary'
-         */
-        this.todayButtonColor = 'primary';
-        /**
-         * Size the today button small or large.
-         * @type 'sm' | 'lg'
-         * @default 'sm'
-         */
-        this.todayButtonSize = 'sm';
         this._visible = false;
         this.disabledDates = [];
         this._firstDayOfWeek = 1;
@@ -6001,13 +5999,13 @@ class DateRangePickerComponent {
     }
 }
 DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", todayButton: "todayButton", todayButtonColor: "todayButtonColor", todayButtonSize: "todayButtonSize", todayButtonVariant: "todayButtonVariant", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
+DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DateRangePickerComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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 && startDate &&!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", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
@@ -6016,7 +6014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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 && startDate &&!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\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -6047,14 +6045,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 type: Input
             }], timepicker: [{
                 type: Input
-            }], todayButton: [{
-                type: Input
-            }], todayButtonColor: [{
-                type: Input
-            }], todayButtonSize: [{
-                type: Input
-            }], todayButtonVariant: [{
-                type: Input
             }], visible: [{
                 type: Input
             }], startDate: [{
@@ -6861,10 +6851,10 @@ class DatePickerComponent extends DateRangePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DatePickerComponent, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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 && startDate &&!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", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DatePickerComponent, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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 && startDate &&!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" }]
+            args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\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           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"(inputReadOnly || !startDate) ?? null\"\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" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], date: [{