@coreui/angular-pro 5.4.1 → 5.4.2

package/fesm2022/coreui-angular-pro.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, afterNextRender, contentChildren, DestroyRef, RendererFactory2, numberAttribute, Pipe, Input, HostBinding, ViewChildren, model, PLATFORM_ID, Inject, ContentChildren, forwardRef, ContentChild, contentChild, EventEmitter, Output, HostListener, ViewChild, viewChild, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, afterRender, ViewContainerRef, viewChildren, Injector, runInInjectionContext } from '@angular/core';
+import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, afterNextRender, contentChildren, DestroyRef, RendererFactory2, numberAttribute, Pipe, Input, HostBinding, ViewChildren, model, PLATFORM_ID, Inject, ContentChildren, forwardRef, ContentChild, contentChild, EventEmitter, Output, HostListener, ViewChild, ChangeDetectorRef, viewChild, ChangeDetectionStrategy, NgZone, afterRender, ViewContainerRef, viewChildren, Injector, runInInjectionContext } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, NgStyle, isPlatformServer, isPlatformBrowser, formatDate, I18nPluralPipe } from '@angular/common';
 import { animation, animate, style, AnimationBuilder, useAnimation, trigger, state, transition, group, query, animateChild } from '@angular/animations';
 import { takeUntilDestroyed, toObservable, 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 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
-import { filter, tap, distinctUntilChanged, take, finalize, zipWith, withLatestFrom, debounceTime, map, delay, combineLatestWith } from 'rxjs/operators';
+import { filter, tap, distinctUntilChanged, take, debounceTime, finalize, zipWith, withLatestFrom, map, delay, combineLatestWith } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/a11y';
 import { FocusMonitor, A11yModule, FocusKeyManager } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/forms';
@@ -3106,10 +3106,12 @@ class CalendarComponent {
             const date = this.endDateModel() ?? null;
             return !!date && this.range() ? convertToDateObject(date, this.selectionType(), 'endDate') : null;
         }, { equal: equalDates });
-        this.datesEffect = effect(() => {
-            this.#calendarService.update({ startDate: this.startDate(), endDate: this.endDate() });
-            this.startDateChange.emit(this.startDate());
-            this.endDateChange.emit(this.endDate());
+        this.#datesEffect = effect(() => {
+            const startDate = this.startDate();
+            const endDate = this.endDate();
+            this.#calendarService.update({ startDate: startDate, endDate: endDate });
+            this.startDateChange.emit(startDate);
+            this.endDateChange.emit(endDate);
         });
         /**
          * Sets the day of start week.
@@ -3273,6 +3275,7 @@ class CalendarComponent {
     }
     #destroyRef;
     #calendarService;
+    #datesEffect;
     // @ViewChildren(CalendarMonthComponent) calendarMonths!: QueryList<CalendarMonthComponent>;
     ngOnInit() {
         this.#calendarService.update({
@@ -3285,9 +3288,9 @@ class CalendarComponent {
         });
     }
     ngAfterViewInit() {
-        setTimeout(() => {
-            this.calendarStateSubscribe();
-        });
+        // setTimeout(() => {
+        this.calendarStateSubscribe();
+        // });
     }
     calendarStateSubscribe() {
         const inputs = [
@@ -3308,7 +3311,9 @@ class CalendarComponent {
             'weekNumbersLabel'
         ];
         // const models = ['startDate', 'endDate', 'calendarDate'];
-        this.#calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
+        this.#calendarService?.calendarState$
+            .pipe(debounceTime(1), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((state) => {
             const keys = Object.keys(state);
             for (const key of keys) {
                 if (key in this) {
@@ -7173,7 +7178,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible() ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible() ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible()\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible()\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible()\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible()\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -7193,7 +7198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true
                         }
-                    ], template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible() ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
+                    ], template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible() ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible()\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible()\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible()\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible()\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
         }], propDecorators: { cleaner: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -7290,29 +7295,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 // }
 class DateRangePickerComponent {
     constructor() {
+        this.#cdr = inject(ChangeDetectorRef);
         this.#breakpointObserver = inject(BreakpointObserver);
         this.#destroyRef = inject(DestroyRef);
         /**
          * Set the format of day name.
          * @default 'numeric'
-         * @type DayFormatType
+         * @return DayFormatType
          */
         this.dayFormat = input('numeric');
         /**
          * The number of calendars that render on desktop devices.
-         * @type number
+         * @return number
          * @default 2
          */
         this.calendars = input(2, { transform: numberAttribute });
         /**
          * Toggle visibility or set the content of the cleaner button.
-         * @type boolean
+         * @return boolean
          * @default true
          */
         this.cleaner = input(true, { transform: booleanAttribute });
         /**
          * Determine if the dropdown should be closed after value setting.
-         * @type boolean
+         * @return boolean
          * @default false
          */
         this.closeOnSelect = input(false, { transform: booleanAttribute });
@@ -7325,7 +7331,7 @@ class DateRangePickerComponent {
         this.format = input();
         /**
          * Toggle visibility or set the content of the input indicator.
-         * @type boolean
+         * @return boolean
          * @default true
          */
         this.indicator = input(true);
@@ -7341,7 +7347,7 @@ class DateRangePickerComponent {
         this.inputDateParse = input();
         /**
          * Toggle the readonly state for the component.
-         * @type boolean
+         * @return boolean
          * @default false
          */
         this.inputReadOnlyInput = input(false, { transform: booleanAttribute, alias: 'inputReadOnly' });
@@ -7350,7 +7356,7 @@ class DateRangePickerComponent {
         });
         /**
          * Reorder year-month navigation, and render year first.
-         * @type boolean
+         * @return boolean
          * @default false
          */
         this.navYearFirst = input(false, { transform: booleanAttribute });
@@ -7361,67 +7367,67 @@ class DateRangePickerComponent {
         this.placeholder = input(['Start date', 'End date']);
         /**
          * Predefined date ranges the user can select from.
-         * @type ICalendarRanges
+         * @return ICalendarRanges
          */
         this.ranges = input();
         /**
          * Sets the color context of the cancel button to one of CoreUI’s themed colors.
-         * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+         * @return 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
          * @default 'secondary'
          */
         this.rangesButtonsColor = input('secondary');
         /**
          * Size the ranges button small or large.
-         * @type 'sm' | 'lg' | ''
+         * @return 'sm' | 'lg' | ''
          */
         this.rangesButtonsSize = input('');
         /**
          * Set the ranges button variant to an outlined button or a ghost button.
-         * @type 'outline' | 'ghost' | undefined
+         * @return 'outline' | 'ghost' | undefined
          */
         this.rangesButtonsVariant = input('ghost');
         /**
          * Default icon or character that separates two dates.
-         * @type boolean
+         * @return boolean
          * @default true
          */
         this.separator = input(true, { transform: booleanAttribute });
         /**
          * Size the component small or large.
-         * @type 'sm' | 'lg' | undefined
+         * @return 'sm' | 'lg' | undefined
          * @default undefined
          */
         this.size = input();
         /**
          * Provide an additional time selection by adding select boxes to choose time.
-         * @type boolean
+         * @return boolean
          * @default false
          */
         this.timepickerInput = input(false, { transform: booleanAttribute, alias: 'timepicker' });
         /**
          * Toggle visual validation feedback.
-         * @type boolean | undefined
+         * @return boolean | undefined
          * @default undefined
          */
         this.valid = input();
         /**
          * Toggle the visibility of the dropdown date-picker component.
-         * @type boolean
+         * @return boolean
          * @default false
          */
         this.visibleInput = input(false, { transform: booleanAttribute });
-        this.visibleInputEffect = effect(() => {
+        this.#visibleInputEffect = effect(() => {
             this.visible.set(this.visibleInput());
         });
         this.visible = signal(false);
         this.startDateModel = model(null, {
             alias: 'startDate'
         });
-        this.dateModelEffect = effect(() => {
+        this.#dateModelEffect = effect(() => {
             this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
             const startDate = this.startDate();
             const endDate = this.endDate();
-            this.value = this.range() ? { startDate: startDate, endDate: endDate } : startDate;
+            this.valueModel.set({ startDate: startDate, endDate: endDate });
             this.startDateModel.set(startDate);
             this.endDateModel.set(endDate);
         });
@@ -7438,11 +7444,12 @@ class DateRangePickerComponent {
             return endDate ? new Date(endDate) : null;
         }, { equal: equalDates });
         this.endDateChange = toObservable(this.endDate);
-        this.calendarDate = new Date();
+        this.calendarDateInput = input(new Date(), { transform: dateTransform, alias: 'calendarDate' });
+        this.calendarDate = linkedSignal(this.calendarDateInput);
         this.disabledDates = input([]);
         /**
          * Set first day of week.
-         * @type DaysOfWeek
+         * @return DaysOfWeek
          * @default 1 (Monday)
          */
         this.firstDayOfWeek = input(1);
@@ -7451,13 +7458,13 @@ class DateRangePickerComponent {
         this.minDate = input(null);
         /**
          * Show calendar navigation.
-         * @type boolean
+         * @return boolean
          * @default true
          */
         this.navigation = input(true, { transform: booleanAttribute });
         /**
          * Allow range selection.
-         * @type boolean
+         * @return boolean
          * @default true
          */
         this.rangeInput = input(true, { transform: booleanAttribute, alias: 'range' });
@@ -7466,56 +7473,69 @@ class DateRangePickerComponent {
         });
         this.dateFilter = input();
         this.disabledInput = input(false, { transform: booleanAttribute, alias: 'disabled' });
-        this.disabledEffect = effect(() => {
+        this.#disabledEffect = effect(() => {
             this.disabled() ? this.dateRangeGroup.disable() : this.dateRangeGroup.enable();
         });
         this.disabled = computed(() => {
             return this.#disabled() || this.disabledInput();
         });
         this.#disabled = signal(false);
-        this._value = {};
+        this.valueModel = model(null, {
+            alias: 'value'
+        });
+        this.#valueInputEffect = effect(() => {
+            const value = this.valueModel() ?? { startDate: null, endDate: null };
+            const range = this.range();
+            untracked(() => {
+                this.value =
+                    value instanceof Date
+                        ? { startDate: value, endDate: null }
+                        : { ...value };
+            });
+        });
+        this.#value = signal({ startDate: null, endDate: null });
         /**
          * Set length or format of day name.
-         * @type WeekdayFormatType
+         * @return WeekdayFormatType
          * @default 'short'
          */
         this.weekdayFormat = input('short');
         /**
          * Optional popper Options object
-         * @type Partial<Options>
+         * @return Partial<Options>
          */
         this.popperjsOptions = input({ strategy: 'absolute' }, { alias: 'popperOptions' });
         /**
          * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to true.
-         * @type boolean
+         * @return boolean
          * @default false
          * @since 4.4.10
          */
         this.selectAdjacentDays = input(false, { transform: booleanAttribute });
         /**
          * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
-         * @type boolean
+         * @return boolean
          * @default true
          * @since 4.4.10
          */
         this.showAdjacentDays = input(true, { transform: booleanAttribute });
         /**
          * Specify the type of date selection as day, week, month, or year.
-         * @type 'day' | 'week' | 'month' | 'year'
+         * @return 'day' | 'week' | 'month' | 'year'
          * @default 'day'
          * @since 5.0.0
          */
         this.selectionType = input('day');
         /**
          * Set whether to display week numbers in the calendar.
-         * @type boolean
+         * @return boolean
          * @default false
          * @since 5.0.0
          */
         this.showWeekNumber = input(false, { transform: booleanAttribute });
         /**
          * Label displayed over week numbers in the calendar.
-         * @type string
+         * @return string
          * @default undefined
          * @since 5.0.0
          */
@@ -7562,6 +7582,18 @@ class DateRangePickerComponent {
         });
         this.inputStartHoverValue = signal(null);
         this.inputEndHoverValue = signal(null);
+        this.datePickerClasses = computed(() => {
+            const size = this.size();
+            const valid = this.valid();
+            const disabled = this.disabled();
+            return {
+                'date-picker': true,
+                [`date-picker-${size}`]: size,
+                disabled: disabled,
+                'is-valid': valid === true,
+                'is-invalid': valid === false
+            };
+        });
         this.#breakpoints = {
             OneCalendarRanges: '(min-width: 480px)',
             TwoCalendars: '(max-width: 650px)',
@@ -7582,29 +7614,35 @@ class DateRangePickerComponent {
             /* empty */
         };
     }
+    #cdr;
     #breakpointObserver;
     #destroyRef;
     get timepicker() {
         return false;
         // return this.timepickerInput();
     }
+    #visibleInputEffect;
+    #dateModelEffect;
+    #disabledEffect;
     #disabled;
+    #valueInputEffect;
     set value(value) {
-        const newValue = this.range() ? { ...value } : value;
-        if (JSON.stringify(this._value) !== JSON.stringify(newValue)) {
-            this._value = newValue;
-            this.onChange(newValue);
-            this.onTouched();
-            this.valueChange.emit(this._value);
+        const newValue = value;
+        if (JSON.stringify(this.#value()) !== JSON.stringify(newValue)) {
+            this.#value.set(newValue);
+            this.valueChange.emit(this.value);
+            this.onChange(this.value);
+            this.#cdr.markForCheck();
             if (this.closeOnSelect() && this.visible()) {
-                const hasValue = this.range() ? !!(this._value.startDate && this._value.endDate) : !!this._value;
+                const hasValue = this.range() ? !!(newValue.startDate && newValue.endDate) : !!newValue;
                 this.visible.set(!hasValue);
             }
         }
     }
     get value() {
-        return this._value;
+        return this.range() ? this.#value() : this.#value().startDate;
     }
+    #value;
     subscribeDateChange(subscribe = true) {
         if (subscribe) {
             // todo
@@ -7639,15 +7677,6 @@ class DateRangePickerComponent {
         const placeholder = this.placeholder();
         return Array.isArray(placeholder) ? placeholder[1] : placeholder;
     }
-    get datePickerClasses() {
-        return {
-            'date-picker': true,
-            [`date-picker-${this.size()}`]: this.size(),
-            disabled: this.disabled(),
-            'is-valid': this.valid() === true,
-            'is-invalid': this.valid() === false
-        };
-    }
     formatDate(date) {
         const format = this.format();
         const inputDateFormat = this.inputDateFormat();
@@ -7728,7 +7757,7 @@ class DateRangePickerComponent {
         }
     }
     handleCalendarDateChange($event) {
-        if (this.calendarDate.getTime() !== $event.getTime()) {
+        if (this.calendarDate().getTime() !== $event.getTime()) {
             this.calendarDateChange.emit($event);
         }
     }
@@ -7758,8 +7787,9 @@ class DateRangePickerComponent {
         if (date instanceof Date && date.getTime()) {
             const endDate = this.endDate();
             if (!(this.forbiddenDate(date) || (endDate && endDate < date))) {
-                this.calendarDate = date;
+                this.calendarDate.set(date);
                 this.handleStartDateChange(date);
+                return;
             }
         }
         this.handleStartDateChange(this.startDate() ?? null);
@@ -7774,7 +7804,7 @@ class DateRangePickerComponent {
         if (date instanceof Date && date.getTime()) {
             const startDate = this.startDate();
             if (!(this.forbiddenDate(date) || (startDate && startDate > date))) {
-                this.calendarDate = date;
+                this.calendarDate.set(date);
                 this.handleEndDateChange(date);
             }
             else {
@@ -7813,13 +7843,13 @@ class DateRangePickerComponent {
         this.endDateModel.set(time ?? this.endDate());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: { classPropertyName: "dayFormat", publicName: "dayFormat", isSignal: true, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: true, isRequired: false, transformFunction: null }, inputDateParse: { classPropertyName: "inputDateParse", publicName: "inputDateParse", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnlyInput: { classPropertyName: "inputReadOnlyInput", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, navYearFirst: { classPropertyName: "navYearFirst", publicName: "navYearFirst", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, rangesButtonsColor: { classPropertyName: "rangesButtonsColor", publicName: "rangesButtonsColor", isSignal: true, isRequired: false, transformFunction: null }, rangesButtonsSize: { classPropertyName: "rangesButtonsSize", publicName: "rangesButtonsSize", isSignal: true, isRequired: false, transformFunction: null }, rangesButtonsVariant: { classPropertyName: "rangesButtonsVariant", publicName: "rangesButtonsVariant", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, timepickerInput: { classPropertyName: "timepickerInput", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visibleInput", isSignal: true, isRequired: false, transformFunction: null }, 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: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, rangeInput: { classPropertyName: "rangeInput", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, popperjsOptions: { classPropertyName: "popperjsOptions", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null }, selectAdjacentDays: { classPropertyName: "selectAdjacentDays", publicName: "selectAdjacentDays", isSignal: true, isRequired: false, transformFunction: null }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: true, isRequired: false, transformFunction: null }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, weekNumbersLabel: { classPropertyName: "weekNumbersLabel", publicName: "weekNumbersLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDateModel: "startDateChange", endDateModel: "endDateChange", valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: { classPropertyName: "dayFormat", publicName: "dayFormat", isSignal: true, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: true, isRequired: false, transformFunction: null }, inputDateParse: { classPropertyName: "inputDateParse", publicName: "inputDateParse", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnlyInput: { classPropertyName: "inputReadOnlyInput", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, navYearFirst: { classPropertyName: "navYearFirst", publicName: "navYearFirst", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, rangesButtonsColor: { classPropertyName: "rangesButtonsColor", publicName: "rangesButtonsColor", isSignal: true, isRequired: false, transformFunction: null }, rangesButtonsSize: { classPropertyName: "rangesButtonsSize", publicName: "rangesButtonsSize", isSignal: true, isRequired: false, transformFunction: null }, rangesButtonsVariant: { classPropertyName: "rangesButtonsVariant", publicName: "rangesButtonsVariant", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, timepickerInput: { classPropertyName: "timepickerInput", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visibleInput", isSignal: true, isRequired: false, transformFunction: null }, startDateModel: { classPropertyName: "startDateModel", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDateModel: { classPropertyName: "endDateModel", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, calendarDateInput: { classPropertyName: "calendarDateInput", publicName: "calendarDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, rangeInput: { classPropertyName: "rangeInput", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, popperjsOptions: { classPropertyName: "popperjsOptions", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null }, selectAdjacentDays: { classPropertyName: "selectAdjacentDays", publicName: "selectAdjacentDays", isSignal: true, isRequired: false, transformFunction: null }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: true, isRequired: false, transformFunction: null }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, weekNumbersLabel: { classPropertyName: "weekNumbersLabel", publicName: "weekNumbersLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDateModel: "startDateChange", endDateModel: "endDateChange", valueModel: "valueChange", valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "datePickerClasses()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true, isSignal: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true, isSignal: true }], exportAs: ["cDateRangePicker"], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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", "ariaNextMonthLabel", "ariaNextYearLabel", "ariaPrevMonthLabel", "ariaPrevYearLabel"], outputs: ["calendarDateChange", "endDateChange", "startDateChange", "viewChange", "calendarCellHover"], 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 }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true, isSignal: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true, isSignal: true }], exportAs: ["cDateRangePicker"], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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", "ariaNextMonthLabel", "ariaNextYearLabel", "ariaPrevMonthLabel", "ariaPrevYearLabel"], outputs: ["calendarDateChange", "endDateChange", "startDateChange", "viewChange", "calendarCellHover"], 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: "19.1.7", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -7841,19 +7871,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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"] }]
-        }], propDecorators: { calendarDate: [{
-                type: Input,
-                args: [{ transform: dateTransform }]
-            }], value: [{
-                type: Input
-            }], onBlur: [{
-                type: HostListener,
-                args: ['focusout']
-            }], datePickerClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'datePickerClasses()',
+                        '(focusout)': 'onBlur()'
+                    }, 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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"] }]
+        }] });
 
 class DateRangePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -7909,7 +7931,7 @@ class DatePickerComponent extends DateRangePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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", "ariaNextMonthLabel", "ariaNextYearLabel", "ariaPrevMonthLabel", "ariaPrevYearLabel"], outputs: ["calendarDateChange", "endDateChange", "startDateChange", "viewChange", "calendarCellHover"], 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 }); }
+        ], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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", "ariaNextMonthLabel", "ariaNextYearLabel", "ariaPrevMonthLabel", "ariaPrevYearLabel"], outputs: ["calendarDateChange", "endDateChange", "startDateChange", "viewChange", "calendarCellHover"], 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: "19.1.7", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -7931,7 +7953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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"] }]
+                    ], 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()) {\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      @let footer = templates()?.['datePickerFooter'];\n      @if (footer) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"footer; 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"] }]
         }] });
 
 class DatePickerModule {