@coreui/angular-pro 5.1.3 → 5.1.4

package/fesm2022/coreui-angular-pro.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, Pipe, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, afterNextRender, AfterRenderPhase, ViewChild, forwardRef, ContentChild, Optional, ChangeDetectionStrategy, NgZone, ViewContainerRef, input, model, output, contentChildren, viewChildren, untracked } from '@angular/core';
+import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, Pipe, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, afterNextRender, AfterRenderPhase, ViewChild, forwardRef, ContentChild, Optional, model, input, ChangeDetectionStrategy, output, NgZone, ViewContainerRef, contentChildren, viewChildren, untracked } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, NgOptimizedImage, AsyncPipe, NgStyle, isPlatformServer, isPlatformBrowser, formatDate, I18nPluralPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
-import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable, outputToObservable, toSignal } from '@angular/core/rxjs-interop';
 import { fromEvent, Subject, BehaviorSubject, Observable, skip, merge, takeWhile, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
@@ -7710,6 +7710,35 @@ class DateRangePickerComponent {
          * @default false
          */
         this.visible = false;
+        this.startDateModel = model(undefined, {
+            alias: 'startDate'
+        });
+        this.dateModelEffect = effect(() => {
+            this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
+        });
+        this.startDateChange = outputToObservable(this.startDateModel);
+        this.startDate = computed(() => {
+            const prevDate = this.#startDate ? new Date(this.#startDate) : null;
+            const currDate = this.startDateModel() ? new Date(this.startDateModel()) : null;
+            if (prevDate?.getTime() !== currDate?.getTime()) {
+                return currDate;
+            }
+            return prevDate;
+        });
+        this.#startDate = null;
+        this.endDateModel = model(undefined, {
+            alias: 'endDate'
+        });
+        this.endDateChange = outputToObservable(this.endDateModel);
+        this.endDate = computed(() => {
+            const prevDate = this.#endDate ? new Date(this.#endDate) : null;
+            const currDate = this.endDateModel() ? new Date(this.endDateModel()) : null;
+            if (prevDate?.getTime() !== currDate?.getTime()) {
+                return currDate;
+            }
+            return prevDate;
+        });
+        this.#endDate = null;
         this.calendarDate = new Date();
         this.disabledDates = [];
         /**
@@ -7718,7 +7747,7 @@ class DateRangePickerComponent {
          * @default 1 (Monday)
          */
         this.firstDayOfWeek = 1;
-        this.locale = 'default';
+        this.locale = input('default');
         this.maxDate = null;
         this.minDate = null;
         /**
@@ -7779,27 +7808,39 @@ class DateRangePickerComponent {
         this.valueChange = new EventEmitter();
         this.calendarCellHover = new EventEmitter();
         this.calendarDateChange = new EventEmitter();
-        this.endDateChange = new EventEmitter();
-        this.startDateChange = new EventEmitter();
         this.templates = {};
         this.dateChangeSubscriptions = [];
         this.isMobile = true;
         this.showRanges = false;
-        this._startDateValue = this.formatDate(this.startDate);
-        this._endDateValue = this.formatDate(this.endDate);
+        this.startDateValue = computed(() => {
+            const locale = this.locale() ?? 'default';
+            const dateFormatted = this.formatDate(this.startDate());
+            this.#startDate = this.startDate();
+            return dateFormatted;
+        });
+        this.endDateValue = computed(() => {
+            const locale = this.locale() ?? 'default';
+            const dateFormatted = this.formatDate(this.endDate());
+            this.#endDate = this.endDate();
+            return dateFormatted;
+        });
         // todo: validation
-        this.startDateInput = new FormControl({ value: this.startDateValue, disabled: this.disabled }, [
-            Validators.required
-            // Validators.minLength(8),
-            // Validators.maxLength(10),
-            // invalidDateStringValidator(this.locale)
-        ]);
-        this.endDateInput = new FormControl({ value: this.endDateValue, disabled: this.disabled }, [
-            Validators.required
-            // Validators.minLength(8),
-            // Validators.maxLength(10),
-            // invalidDateStringValidator(this.locale)
-        ]);
+        // startDateInput = new FormControl({ value: this.startDateValue, disabled: this.disabled }, [
+        //   Validators.required
+        //   // Validators.minLength(8),
+        //   // Validators.maxLength(10),
+        //   // invalidDateStringValidator(this.locale)
+        // ]);
+        // endDateInput = new FormControl({ value: this.endDateValue, disabled: this.disabled }, [
+        //   Validators.required
+        //   // Validators.minLength(8),
+        //   // Validators.maxLength(10),
+        //   // invalidDateStringValidator(this.locale)
+        // ]);
+        this.dateRangeGroup = new FormGroup({
+            startDateInput: new FormControl({ value: '', disabled: this.disabled }, [Validators.required]),
+            endDateInput: new FormControl({ value: '', disabled: this.disabled }, [Validators.required])
+        });
         this.#breakpoints = {
             OneCalendarRanges: '(min-width: 480px)',
             TwoCalendars: '(max-width: 650px)',
@@ -7841,32 +7882,11 @@ class DateRangePickerComponent {
         // return this.#timepicker;
     }
     #timepicker;
-    set startDate(value) {
-        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);
-        }
-    }
-    get startDate() {
-        return this._startDate;
-    }
-    set endDate(value) {
-        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);
-        }
-    }
-    get endDate() {
-        return this._endDate;
-    }
+    #startDate;
+    #endDate;
     set disabled(value) {
         this.#disabled = value;
-        this.#disabled ? this.startDateInput.disable() : this.startDateInput.enable();
-        this.#disabled ? this.endDateInput.disable() : this.endDateInput.enable();
+        this.#disabled ? this.dateRangeGroup.disable() : this.dateRangeGroup.enable();
     }
     get disabled() {
         return this.#disabled;
@@ -7876,16 +7896,10 @@ class DateRangePickerComponent {
         const newValue = this.range ? { ...value } : value;
         if (JSON.stringify(this._value) !== JSON.stringify(newValue)) {
             this._value = newValue;
-            if (this.range) {
-                this.handleStartDateChange(newValue.startDate ?? null);
-                this.handleEndDateChange(newValue.endDate ?? null);
-            }
-            else {
-                this.handleStartDateChange(newValue ?? null);
-            }
             this.onChange(newValue);
             this.onTouched();
             this.valueChange.emit(this.value);
+            // this.dateRangeGroup.setValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
             if (this.closeOnSelect) {
                 const hasValue = this.range ? !!(this.value.startDate && this.value.endDate) : !!this.value;
                 this.visible = !hasValue;
@@ -7898,45 +7912,35 @@ class DateRangePickerComponent {
     subscribeDateChange(subscribe = true) {
         if (subscribe) {
             // todo
-            // this.dateChangeSubscriptions.push(this.startDateChange.subscribe(next => {
-            //   this.startDate = next;
-            //   this.onChange(next);
-            // }));
-            // this.dateChangeSubscriptions.push(this.startDateChange.subscribe(next => {
-            //   this.endDate = next;
-            //   this.onChange(next);
-            // }));
+            // this.dateChangeSubscriptions.push(
+            //   this.startDateChange.subscribe((next) => {
+            //     // console.log('startDateChange', next);
+            //     // this.startDate = next;
+            //     // this.onChange(next);
+            //   })
+            // );
+            // this.dateChangeSubscriptions.push(
+            //   this.endDateChange.subscribe((next) => {
+            //     // console.log('endDateChange', next);
+            //     // this.endDate = next;
+            //     // this.onChange(next);
+            //   })
+            // );
             return;
         }
-        this.dateChangeSubscriptions.forEach(subscription => {
+        this.dateChangeSubscriptions.forEach((subscription) => {
             subscription?.unsubscribe();
         });
     }
     onBlur() {
         this.onTouched();
     }
-    set startDateValue(value) {
-        this.startDateInput.setValue(value);
-        this._startDateValue = value;
-    }
-    get startDateValue() {
-        return this._startDateValue;
-    }
-    set endDateValue(value) {
-        this.endDateInput.setValue(value);
-        this._endDateValue = value;
-    }
-    get endDateValue() {
-        return this._endDateValue;
-    }
     get startDatePlaceholder() {
         return Array.isArray(this.placeholder) ? this.placeholder[0] : this.placeholder;
     }
-    ;
     get endDatePlaceholder() {
         return Array.isArray(this.placeholder) ? this.placeholder[1] : this.placeholder;
     }
-    ;
     set inputStartHoverValue(value) {
         this._inputStartHoverValue = value;
     }
@@ -7959,30 +7963,32 @@ class DateRangePickerComponent {
         };
     }
     formatDate(date) {
-        return !date || !isValidDate(date) ? '' :
-            typeof this.inputDateFormat === 'function' ? this.inputDateFormat(date) :
-                (!!this.format && !!this.locale && this.locale !== 'default') ? formatDate(date, this.format, this.locale) :
-                    this.timepicker ? date.toLocaleString(this.locale) :
-                        date.toLocaleDateString(this.locale);
+        return !date || !isValidDate(date)
+            ? ''
+            : typeof this.inputDateFormat === 'function'
+                ? this.inputDateFormat(date)
+                : !!this.format && !!this.locale() && this.locale() !== 'default'
+                    ? formatDate(date, this.format, this.locale())
+                    : this.timepicker
+                        ? date.toLocaleString(this.locale())
+                        : date.toLocaleDateString(this.locale());
     }
     #breakpoints;
     ngOnInit() {
         this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
         const breakpoints = this.#breakpoints;
-        this.layoutChanges = this.breakpointObserver.observe([
-            breakpoints.OneCalendarRanges,
-            breakpoints.TwoCalendars,
-            breakpoints.TwoCalendarsRanges
-        ]).subscribe(result => {
+        this.layoutChanges = this.breakpointObserver
+            .observe([breakpoints.OneCalendarRanges, breakpoints.TwoCalendars, breakpoints.TwoCalendarsRanges])
+            .subscribe((result) => {
             if (result.matches) {
-                this.isMobile = (this.customRanges?.length > 0 && result.breakpoints[breakpoints.TwoCalendarsRanges]) || result.breakpoints[breakpoints.TwoCalendars];
+                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.startDateValue = this.formatDate(this.startDate);
-        this.endDateValue = this.formatDate(this.endDate);
         this.subscribeDateChange();
     }
     ngOnDestroy() {
@@ -8012,10 +8018,6 @@ 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) {
@@ -8033,7 +8035,7 @@ class DateRangePickerComponent {
                 return parsedDate;
             }
         }
-        return getLocalDateFromString(date, this.locale, this.timepicker);
+        return getLocalDateFromString(date, this.locale(), this.timepicker);
     }
     getCustomRangeKey(customRange) {
         return customRange[0];
@@ -8045,14 +8047,14 @@ class DateRangePickerComponent {
     }
     handleCalendarCellHover($event) {
         this.calendarCellHover.emit($event);
-        if (!this.startDate) {
+        if (!this.startDate()) {
             this.setInputValue(this.startDateElementRef, $event);
             this.inputStartHoverValue = $event;
             this.setInputValue(this.endDateElementRef, null);
             this.inputEndHoverValue = null;
             return;
         }
-        if (!this.endDate) {
+        if (!this.endDate()) {
             this.setInputValue(this.endDateElementRef, $event);
             this.inputEndHoverValue = $event;
             return;
@@ -8064,23 +8066,19 @@ class DateRangePickerComponent {
         }
     }
     handleStartDateChange(date) {
-        if (date?.getTime() !== this.startDate?.getTime()) {
-            this.startDate = date ?? null;
-            this.startDateValue = this.formatDate(this.startDate);
-            this.inputStartHoverValue = null;
-            this.value = this.range ? { startDate: this.startDate, endDate: this.endDate } : this.startDate;
-        }
+        this.startDateModel.set(date ?? null);
+        this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue() });
+        this.inputStartHoverValue = null;
+        this.value = this.range ? { startDate: this.startDate(), endDate: this.endDate() } : this.startDate();
     }
     handleEndDateChange(date) {
-        if (date?.getTime() !== this.endDate?.getTime()) {
-            if (!this.range) {
-                return;
-            }
-            this.endDate = date ?? null;
-            this.endDateValue = this.formatDate(this.endDate);
-            this.inputEndHoverValue = null;
-            this.value = this.range ? { startDate: this.startDate, endDate: this.endDate } : this.startDate;
+        if (!this.range) {
+            return;
         }
+        this.endDateModel.set(date ?? null);
+        this.dateRangeGroup.patchValue({ endDateInput: this.endDateValue() });
+        this.inputEndHoverValue = null;
+        this.value = this.range ? { startDate: this.startDate(), endDate: this.endDate() } : this.startDate();
     }
     handleClear($event) {
         // this.calendarComponent.clearDates();
@@ -8094,31 +8092,39 @@ class DateRangePickerComponent {
             // this.calendarComponent.clearDates();
             this.handleStartDateChange(null);
             this.handleEndDateChange(null);
+            return;
         }
         if (date instanceof Date && date.getTime()) {
-            if (!(this.forbiddenDate(date) || (this.endDate && this.endDate < date))) {
+            // @ts-ignore
+            if (!(this.forbiddenDate(date) || (this.endDate() && this.endDate() < date))) {
                 this.calendarDate = date;
-                this.startDate = date;
+                this.handleStartDateChange(date);
             }
         }
-        this.handleStartDateChange(this.startDate ?? null);
+        this.handleStartDateChange(this.startDate() ?? null);
     }
     handleEndDateInputChange($event) {
         const inputValue = $event.target.value;
         const date = this.inputParse(inputValue);
         if (!date) {
-            this.endDate = null;
+            this.handleEndDateChange(null);
+            return;
         }
         if (date instanceof Date && date.getTime()) {
-            if (!(this.forbiddenDate(date) || (this.startDate && this.startDate > date))) {
+            // @ts-ignore
+            if (!(this.forbiddenDate(date) || (this.startDate() && this.startDate() > date))) {
                 this.calendarDate = date;
-                this.endDate = date;
+                this.handleEndDateChange(date);
+            }
+            else {
+                this.handleEndDateChange(null);
             }
         }
-        this.handleEndDateChange(this.endDate ?? null);
+        this.handleEndDateChange(this.endDate() ?? null);
     }
     forbiddenDate(date) {
-        return isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) || (this.dateFilter ? !this.dateFilter(date) : false);
+        return (isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) ||
+            (this.dateFilter ? !this.dateFilter(date) : false));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -8130,27 +8136,28 @@ class DateRangePickerComponent {
         this.disabled = isDisabled;
     }
     writeValue(value) {
-        if (value !== null) {
-            this.value = this.range ? { ...value } : value;
+        if (!!value) {
+            this.handleStartDateChange(this.range ? value.startDate : value);
+            this.handleEndDateChange(this.range ? value.endDate : null);
         }
     }
     handleStartTimeChange(time) {
-        this.startDate = time ?? this.startDate;
+        this.startDateModel.set(time ?? this.startDate());
     }
     handleEndTimeChange(time) {
         if (!this.range) {
             return;
         }
-        this.endDate = time ?? this.endDate;
+        this.endDateModel.set(time ?? this.endDate());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: ["calendars", "calendars", numberAttribute], cleaner: ["cleaner", "cleaner", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], format: "format", indicator: ["indicator", "indicator", booleanAttribute], inputDateFormat: "inputDateFormat", inputDateParse: "inputDateParse", inputReadOnly: ["inputReadOnly", "inputReadOnly", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: ["separator", "separator", booleanAttribute], size: "size", timepicker: ["timepicker", "timepicker", booleanAttribute], valid: "valid", visible: ["visible", "visible", booleanAttribute], startDate: "startDate", endDate: "endDate", calendarDate: ["calendarDate", "calendarDate", dateTransform], disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], range: ["range", "range", booleanAttribute], dateFilter: "dateFilter", disabled: ["disabled", "disabled", booleanAttribute], value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"], selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: { classPropertyName: "dayFormat", publicName: "dayFormat", isSignal: false, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: false, isRequired: false, transformFunction: numberAttribute }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: false, isRequired: false, transformFunction: null }, inputDateParse: { classPropertyName: "inputDateParse", publicName: "inputDateParse", isSignal: false, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, navYearFirst: { classPropertyName: "navYearFirst", publicName: "navYearFirst", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsColor: { classPropertyName: "rangesButtonsColor", publicName: "rangesButtonsColor", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsSize: { classPropertyName: "rangesButtonsSize", publicName: "rangesButtonsSize", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsVariant: { classPropertyName: "rangesButtonsVariant", publicName: "rangesButtonsVariant", isSignal: false, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, startDateModel: { classPropertyName: "startDateModel", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDateModel: { classPropertyName: "endDateModel", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, calendarDate: { classPropertyName: "calendarDate", publicName: "calendarDate", isSignal: false, isRequired: false, transformFunction: dateTransform }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: numberAttribute }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, range: { classPropertyName: "range", publicName: "range", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: false, isRequired: false, transformFunction: null }, popperjsOptions: { classPropertyName: "popperjsOptions", publicName: "popperOptions", isSignal: false, isRequired: false, transformFunction: null }, selectAdjacentDays: { classPropertyName: "selectAdjacentDays", publicName: "selectAdjacentDays", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, weekNumbersLabel: { classPropertyName: "weekNumbersLabel", publicName: "weekNumbersLabel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { startDateModel: "startDateChange", endDateModel: "endDateChange", valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div 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          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "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"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
+        ], 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: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\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          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div 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            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "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"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -8174,7 +8181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div 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          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\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          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div 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            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -8224,10 +8231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], visible: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], startDate: [{
-                type: Input
-            }], endDate: [{
-                type: Input
             }], calendarDate: [{
                 type: Input,
                 args: [{ transform: dateTransform }]
@@ -8236,8 +8239,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], firstDayOfWeek: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], locale: [{
-                type: Input
             }], maxDate: [{
                 type: Input
             }], minDate: [{
@@ -8279,10 +8280,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }], calendarDateChange: [{
                 type: Output
-            }], endDateChange: [{
-                type: Output
-            }], startDateChange: [{
-                type: Output
             }], startDateElementRef: [{
                 type: ViewChild,
                 args: ['startDateElementRef']
@@ -8317,45 +8314,42 @@ class DatePickerComponent extends DateRangePickerComponent {
     constructor(breakpointObserver) {
         super(breakpointObserver);
         this.placeholder = 'Select date';
-        // eslint-disable-next-line @angular-eslint/no-output-rename
-        this.startDateChange = new EventEmitter();
+        this.dateChange = output();
         this.range = false;
         this.calendars = 1;
+        this.endDate = model(null);
     }
-    get endDate() {
-        return null;
+    set date(value) {
+        this.startDateModel.set(value);
     }
     get date() {
-        return this.startDate;
+        return this.startDate();
     }
-    set date(value) {
-        this.startDate = value;
-    }
-    // @ts-ignore
     writeValue(value) {
         this.date = value;
-        this.startDateValue = this.date ? this.date.toLocaleDateString(this.locale) : '';
+        super.writeValue(value);
     }
     subscribeDateChange(subscribe = true) {
         if (subscribe) {
-            this.dateChangeSubscriptions.push(this.startDateChange.subscribe(next => {
+            this.dateChangeSubscriptions.push(this.startDateChange.subscribe((next) => {
                 this.date = next;
                 this.onChange(next);
+                this.dateChange.emit(this.date);
             }));
             return;
         }
-        this.dateChangeSubscriptions.forEach(subscription => {
+        this.dateChangeSubscriptions.forEach((subscription) => {
             subscription?.unsubscribe();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", endDate: "endDateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div 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          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "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"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
+        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\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          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div 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            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "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"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -8379,12 +8373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div 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          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\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          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div 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            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { placeholder: [{
                 type: Input
-            }], startDateChange: [{
-                type: Output,
-                args: ['dateChange']
             }], date: [{
                 type: Input
             }] } });