@coreui/angular-pro 5.2.20 → 5.2.21

package/fesm2022/coreui-angular-pro.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, input, computed, Injectable, effect, Component, output, contentChildren, EventEmitter, HostBinding, Output, ContentChildren, HostListener, DestroyRef, signal, RendererFactory2, Pipe, numberAttribute, ViewChildren, PLATFORM_ID, Inject, afterNextRender, ViewChild, forwardRef, ContentChild, Optional, model, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, contentChild, viewChild, ViewContainerRef, viewChildren, untracked } from '@angular/core';
+import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, input, computed, Injectable, effect, Component, output, contentChildren, EventEmitter, HostBinding, Output, ContentChildren, HostListener, DestroyRef, signal, RendererFactory2, numberAttribute, Pipe, ViewChildren, model, PLATFORM_ID, Inject, afterNextRender, ViewChild, forwardRef, ContentChild, Optional, viewChild, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, contentChild, ViewContainerRef, viewChildren, untracked } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, NgOptimizedImage, AsyncPipe, NgStyle, isPlatformServer, isPlatformBrowser, formatDate, I18nPluralPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
-import { takeUntilDestroyed, toObservable, outputToObservable, toSignal } from '@angular/core/rxjs-interop';
+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$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
@@ -12,8 +12,9 @@ import * as i1$2 from '@angular/cdk/a11y';
 import { FocusMonitor, A11yModule, FocusKeyManager } from '@angular/cdk/a11y';
 import * as i1$3 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { createPopper } from '@popperjs/core';
 import * as i1$4 from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { createPopper } from '@popperjs/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { IconDirective } from '@coreui/icons-angular';
@@ -1720,19 +1721,23 @@ function dateTransform(value) {
 const convertIsoWeekToDate = (isoWeek) => {
     const [year, week] = isoWeek.split(/w/i);
     // Get date for 4th of January for year
-    const date = new Date(Number(year), 0, 4);
+    const date = new Date(parseInt(year), 0, 4);
     // Get previous Monday, add 7 days for each week after first
-    date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7);
+    date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (parseInt(week ?? 1) - 1) * 7);
     return date;
 };
-const convertToDateObject = (date, selectionType) => {
+const convertToDateObject = (date, selectionType, propName) => {
     if (date instanceof Date) {
-        return date;
+        return new Date(date);
+    }
+    if (isValidDate(date)) {
+        return new Date(date);
     }
     if (selectionType === 'week') {
         return convertIsoWeekToDate(date);
     }
-    return new Date(Date.parse(date));
+    return tryDate(date, propName ?? 'convertToDateObject');
+    // return new Date(Date.parse(date));
 };
 const convertToLocalDate = (d, locale, options = {}) => d.toLocaleDateString(locale, options);
 const convertToLocalTime = (d, locale, options = {}) => d.toLocaleTimeString(locale, options);
@@ -1958,6 +1963,9 @@ const isLastDayOfMonth = (date) => {
     test.setDate(test.getDate() + 1);
     return test.getMonth() !== month;
 };
+const equalDates = (a, b) => {
+    return (a && b && a.getTime() === b.getTime()) || (a === null && b === null);
+};
 const isSameDateAs = (date, date2) => {
     return (date.getDate() == date2.getDate() &&
         date.getMonth() == date2.getMonth() &&
@@ -2010,19 +2018,19 @@ const tryDate = (value, propName = 'date') => {
     }
     return _value;
 };
-const isDateInRangeDisabled = (startDate, endDate, dates) => {
-    if (!dates || !dates.length) {
+const isDateInRangeDisabled = (startDate, endDate, dates, dateFilter) => {
+    if ((!dates || !dates.length) && !dateFilter) {
         return false;
     }
     if (startDate && endDate) {
         const date = new Date(startDate);
         let disabled = false;
-        while (date < endDate) {
-            date.setDate(date.getDate() + 1);
-            if (isDateDisabled(date, null, null, dates)) {
-                disabled = true;
+        while (date <= endDate) {
+            disabled = isDateDisabled(date, null, null, dates) || (dateFilter ? !dateFilter(date) : false);
+            if (disabled) {
                 break;
             }
+            date.setDate(date.getDate() + 1);
         }
         return disabled;
     }
@@ -2101,6 +2109,7 @@ const isDateInRangeDisabled = (startDate, endDate, dates) => {
 // // getDate('12/07/1997');
 
 class CalendarService {
+    #differ;
     constructor(keyValueDiffers) {
         this.keyValueDiffers = keyValueDiffers;
         this.calendarStateObject = {
@@ -2122,12 +2131,14 @@ class CalendarService {
             selectAdjacentDays: false,
             selectionType: 'day',
             showWeekNumber: false,
-            weekNumbersLabel: undefined
+            weekNumbersLabel: undefined,
+            firstDayOfWeek: 1
         };
-        this.calendarState = new BehaviorSubject(this.calendarStateObject);
-        this.calendarState$ = this.calendarState.asObservable();
-        this.differ = this.keyValueDiffers.find(this.calendarStateObject).create();
+        this.#calendarState = new BehaviorSubject(this.calendarStateObject);
+        this.calendarState$ = this.#calendarState.asObservable();
+        this.#differ = this.keyValueDiffers.find(this.calendarStateObject).create();
     }
+    #calendarState;
     update(state) {
         const keys = Object.keys(state);
         for (const key of keys) {
@@ -2140,15 +2151,15 @@ class CalendarService {
             }
             this.calendarStateObject[key] = state[key];
         }
-        if (this.differ) {
-            const changes = this.differ.diff(this.calendarStateObject);
+        if (this.#differ) {
+            const changes = this.#differ.diff(this.calendarStateObject);
             if (changes) {
                 const newState = { ...this.calendarStateObject };
-                changes.forEachChangedItem(item => {
-                    // console.log('changes', item.key, item, );
+                changes.forEachChangedItem((item) => {
+                    // console.log('changes', item.key, item);
                     newState[item.key] = item.currentValue;
                 });
-                this.calendarState.next(newState);
+                this.#calendarState.next(newState);
             }
         }
     }
@@ -2161,24 +2172,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class CalendarNavigationComponent {
     #destroyRef;
-    constructor(calendarService) {
-        this.calendarService = calendarService;
+    #calendarService;
+    constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.addMonths = input(0);
+        this.#calendarService = inject(CalendarService);
+        this.pageIndex = input(0, { transform: numberAttribute });
+        this.addMonths = computed(() => {
+            const view = this.view();
+            const pageIndex = this.pageIndex();
+            return pageIndex * (view === 'years' ? 144 : view === 'months' ? 12 : 1);
+        });
         this.navigation = input(true);
+        this.maxDate = signal(null);
+        this.minDate = signal(null);
         this.calendarDate = signal(new Date());
         this.navYearFirst = signal(false);
         this.locale = signal('default');
         this.view = signal('days');
-        this.selectionType = 'day';
+        this.selectionType = signal('day');
+        this.ariaNextMonthLabel = input('Next month');
+        this.ariaNextYearLabel = input('Next year');
+        this.ariaPrevMonthLabel = input('Previous month');
+        this.ariaPrevYearLabel = input('Previous year');
         this.navigationClick = output();
         this.date = computed(() => {
             return new Date(this.calendarDate().getFullYear(), this.calendarDate().getMonth() + this.addMonths());
         });
+        this.disableNextMonth = computed(() => {
+            const maxDate = this.maxDate();
+            return maxDate ? this.date() >= maxDate : false;
+        });
+        this.disablePrevMonth = computed(() => {
+            const minDate = this.minDate();
+            return minDate ? this.date() <= minDate : false;
+        });
+        this.disableNextYear = computed(() => {
+            const maxDate = this.maxDate();
+            return maxDate ? this.date().getFullYear() + 1 >= maxDate.getFullYear() : false;
+        });
+        this.disablePrevYear = computed(() => {
+            const minDate = this.minDate();
+            return minDate ? this.date().getFullYear() - 1 <= minDate.getFullYear() : false;
+        });
         this.calendarStateSubscribe();
     }
     calendarStateSubscribe() {
-        this.calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
+        this.#calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
             const keys = Object.keys(state);
             for (const key of keys) {
                 if (key in this) {
@@ -2191,7 +2230,7 @@ class CalendarNavigationComponent {
     }
     setView(view) {
         this.view.set(view);
-        this.calendarService.update({ view: view });
+        this.#calendarService.update({ view: view });
     }
     handleNavigationClick(direction, years = false) {
         this.navigationClick.emit({ direction, years: years });
@@ -2202,15 +2241,15 @@ class CalendarNavigationComponent {
             this.handleNavigationClick(direction, years);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarNavigationComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CalendarNavigationComponent, isStandalone: true, selector: "c-calendar-navigation", inputs: { addMonths: { classPropertyName: "addMonths", publicName: "addMonths", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigationClick: "navigationClick" }, host: { classAttribute: "calendar-nav" }, ngImport: i0, template: "@if (navigation()) {\n  <div class=\"calendar-nav-prev\">\n    <button\n      (click)=\"handleNavigationClick('prev', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n    </button>\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('prev')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n      </button>\n    }\n  </div>\n}\n<div [ngStyle]=\"navYearFirst() ? { display: 'flex', justifyContent: 'center' } : {}\" aria-live=\"polite\" class=\"calendar-nav-date\">\n  @if (view() === 'days') {\n    <button\n      (click)=\"setView('months')\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      {{ date().toLocaleDateString(locale(), { month: 'long' }) }}\n    </button>\n  }\n  <button\n    (click)=\"setView('years')\"\n    [ngStyle]=\"navYearFirst() ? { order: '-1' } : {}\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date().toLocaleDateString(locale(), { year: 'numeric' }) }}\n  </button>\n</div>\n@if (navigation()) {\n  <div class=\"calendar-nav-next\">\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('next')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n      </button>\n    }\n    <button\n      (click)=\"handleNavigationClick('next', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n    </button>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CalendarNavigationComponent, isStandalone: true, selector: "c-calendar-navigation", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, ariaNextMonthLabel: { classPropertyName: "ariaNextMonthLabel", publicName: "ariaNextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaNextYearLabel: { classPropertyName: "ariaNextYearLabel", publicName: "ariaNextYearLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaPrevMonthLabel: { classPropertyName: "ariaPrevMonthLabel", publicName: "ariaPrevMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaPrevYearLabel: { classPropertyName: "ariaPrevYearLabel", publicName: "ariaPrevYearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigationClick: "navigationClick" }, host: { classAttribute: "calendar-nav" }, ngImport: i0, template: "@if (navigation()) {\n  <div class=\"calendar-nav-prev\">\n    <button\n      (click)=\"handleNavigationClick('prev', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n      cButton\n      [disabled]=\"disablePrevYear()\"\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"ariaPrevYearLabel()\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n    </button>\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('prev')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n        cButton\n        [disabled]=\"disablePrevMonth()\"\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaPrevMonthLabel()\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n      </button>\n    }\n  </div>\n}\n<div [ngStyle]=\"navYearFirst() ? { display: 'flex', justifyContent: 'center' } : {}\" aria-live=\"polite\" class=\"calendar-nav-date\">\n  @if (view() === 'days') {\n    <button\n      (click)=\"setView('months')\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      {{ date().toLocaleDateString(locale(), { month: 'long' }) }}\n    </button>\n  }\n  <button\n    (click)=\"setView('years')\"\n    [ngStyle]=\"navYearFirst() ? { order: '-1' } : {}\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date().toLocaleDateString(locale(), { year: 'numeric' }) }}\n  </button>\n</div>\n@if (navigation()) {\n  <div class=\"calendar-nav-next\">\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('next')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n        [disabled]=\"disableNextMonth()\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaNextMonthLabel()\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n      </button>\n    }\n    <button\n      (click)=\"handleNavigationClick('next', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n      cButton\n      [disabled]=\"disableNextYear()\"\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"ariaNextYearLabel()\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n    </button>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-calendar-navigation', standalone: true, imports: [ButtonDirective, NgStyle], host: {
                         class: 'calendar-nav'
-                    }, template: "@if (navigation()) {\n  <div class=\"calendar-nav-prev\">\n    <button\n      (click)=\"handleNavigationClick('prev', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n    </button>\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('prev')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n      </button>\n    }\n  </div>\n}\n<div [ngStyle]=\"navYearFirst() ? { display: 'flex', justifyContent: 'center' } : {}\" aria-live=\"polite\" class=\"calendar-nav-date\">\n  @if (view() === 'days') {\n    <button\n      (click)=\"setView('months')\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      {{ date().toLocaleDateString(locale(), { month: 'long' }) }}\n    </button>\n  }\n  <button\n    (click)=\"setView('years')\"\n    [ngStyle]=\"navYearFirst() ? { order: '-1' } : {}\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date().toLocaleDateString(locale(), { year: 'numeric' }) }}\n  </button>\n</div>\n@if (navigation()) {\n  <div class=\"calendar-nav-next\">\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('next')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n      </button>\n    }\n    <button\n      (click)=\"handleNavigationClick('next', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n    </button>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: CalendarService }] });
+                    }, template: "@if (navigation()) {\n  <div class=\"calendar-nav-prev\">\n    <button\n      (click)=\"handleNavigationClick('prev', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'prev', true)\"\n      cButton\n      [disabled]=\"disablePrevYear()\"\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"ariaPrevYearLabel()\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-prev\"></span>\n    </button>\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('prev')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'prev')\"\n        cButton\n        [disabled]=\"disablePrevMonth()\"\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaPrevMonthLabel()\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-prev\"></span>\n      </button>\n    }\n  </div>\n}\n<div [ngStyle]=\"navYearFirst() ? { display: 'flex', justifyContent: 'center' } : {}\" aria-live=\"polite\" class=\"calendar-nav-date\">\n  @if (view() === 'days') {\n    <button\n      (click)=\"setView('months')\"\n      cButton\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n    >\n      {{ date().toLocaleDateString(locale(), { month: 'long' }) }}\n    </button>\n  }\n  <button\n    (click)=\"setView('years')\"\n    [ngStyle]=\"navYearFirst() ? { order: '-1' } : {}\"\n    cButton\n    color=\"transparent\"\n    size=\"sm\"\n    tabindex=\"0\"\n  >\n    {{ date().toLocaleDateString(locale(), { year: 'numeric' }) }}\n  </button>\n</div>\n@if (navigation()) {\n  <div class=\"calendar-nav-next\">\n    @if (view() === 'days') {\n      <button\n        (click)=\"handleNavigationClick('next')\"\n        (keyup)=\"handleNavigationKeyUp($event, 'next')\"\n        [disabled]=\"disableNextMonth()\"\n        cButton\n        color=\"transparent\"\n        size=\"sm\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaNextMonthLabel()\"\n      >\n        <span class=\"calendar-nav-icon calendar-nav-icon-next\"></span>\n      </button>\n    }\n    <button\n      (click)=\"handleNavigationClick('next', true)\"\n      (keyup)=\"handleNavigationKeyUp($event, 'next', true)\"\n      cButton\n      [disabled]=\"disableNextYear()\"\n      color=\"transparent\"\n      size=\"sm\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"ariaNextYearLabel()\"\n    >\n      <span class=\"calendar-nav-icon calendar-nav-icon-double-next\"></span>\n    </button>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class CalendarWeekdayPipe {
     transform(date, weekdayFormat = 'short', locale = 'default') {
@@ -2252,7 +2291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class CalendarClassMonthPipe {
     transform(calendarDate, monthIndex) {
-        const date = new Date(new Date(calendarDate).getFullYear(), monthIndex, 1);
+        const year = new Date(calendarDate).getFullYear();
+        const date = new Date(year, monthIndex, 1);
         return {
             'calendar-cell': true,
             month: true,
@@ -2373,7 +2413,7 @@ class CalendarDayDirective {
                             selectEndDate &&
                             !!isDateInRange(date, state.startDate, state.hoverDate);
                     inRange = month === 'current' && (isDateInRange(date, state.startDate, state.endDate) || !!start || !!end);
-                    disabledRange = isDateInRangeDisabled(state.startDate, date, state.disabledDates);
+                    disabledRange = isDateInRangeDisabled(state.startDate, date, state.disabledDates, state.dateFilter);
                     disabledDate = isDateDisabled(date, state.minDate, state.maxDate, state.disabledDates);
                     disabledByFilter = typeof state.dateFilter === 'function' && date ? !state.dateFilter(date) : false;
                     this.disabled = disabledDate || disabledByFilter;
@@ -2463,9 +2503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 class CalendarClassRowPipe {
     transform(week, datesConfig) {
         const { minDate, maxDate, disabledDates, dateFilter, calendarDate, selectionType } = { ...datesConfig };
-        const date = convertToDateObject(week.weekNumber === 0
-            ? `${calendarDate.getFullYear()}W53`
-            : `${calendarDate.getFullYear()}W${week.weekNumber}`, selectionType);
+        const date = convertToDateObject(week.weekNumber === 0 ? `${calendarDate.getFullYear()}W53` : `${calendarDate.getFullYear()}W${week.weekNumber}`, selectionType);
         const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates) || (dateFilter ? !dateFilter(date) : false);
         return {
             'calendar-row': true,
@@ -2501,7 +2539,7 @@ class CalendarRowDirective {
         this.selectionType = 'week';
         this.calendarDate = new Date();
         this.locale = 'default';
-        this.#tabindex = signal(-1);
+        this.tabindex = signal(-1);
         this.#calendarService.calendarState$
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef))
             .subscribe((state) => {
@@ -2522,17 +2560,13 @@ class CalendarRowDirective {
     }
     set week(value) {
         this.current = value.days.some((day) => day.month === 'current');
-        this.#tabindex.set(this.selectionType === 'week' && this.current && !this.disabled ? 0 : -1);
+        this.tabindex.set(this.selectionType === 'week' && this.current && !this.disabled ? 0 : -1);
         this.#week = value;
     }
     get week() {
         return this.#week;
     }
     #week;
-    get tabindex() {
-        return this.#tabindex();
-    }
-    #tabindex;
     get selectEndDate() {
         return this.range && !!this.startDate && !this.endDate;
     }
@@ -2545,26 +2579,35 @@ class CalendarRowDirective {
         const week = this.week;
         const calendarDate = this.calendarDate;
         const selectionType = this.selectionType;
-        this.date = convertToDateObject(week.weekNumber === 0 ? `${calendarDate.getFullYear()}W53` : `${calendarDate.getFullYear()}W${week.weekNumber}`, selectionType);
         this.current = week.days.some((day) => day.month === 'current');
-        const inRange = this.selectionType === 'week' && isDateInRange(this.date, this.startDate, this.endDate);
-        const rangeHover = this.selectionType === 'week' && this.hoverDate && this.selectEndDate
-            ? isDateInRange(this.date, this.startDate, this.hoverDate)
-            : isDateInRange(this.date, this.hoverDate, this.endDate);
-        const selected = isDateSelected(this.date, this.startDate, this.endDate);
-        const disabledDate = isDateDisabled(this.date, this.minDate, this.maxDate, this.disabledDates);
-        const disabledByFilter = Object.prototype.toString.call(this.dateFilter) === '[object Function]' && this.date
-            ? !this.dateFilter(this.date)
-            : false;
-        this.disabled = disabledDate || disabledByFilter;
-        return {
-            'calendar-row': true,
-            disabled: this.disabled,
-            range: inRange,
-            'range-hover': rangeHover,
-            selected: selected,
-            current: this.current
-        };
+        if (this.selectionType === 'week') {
+            this.date = convertToDateObject(week.weekNumber === 0 ? `${calendarDate.getFullYear()}W53` : `${calendarDate.getFullYear()}W${week.weekNumber}`, 'week');
+            const inRange = isDateInRange(this.date, this.startDate, this.endDate);
+            const rangeHover = this.hoverDate &&
+                (this.selectEndDate
+                    ? isDateInRange(this.date, this.startDate, this.hoverDate)
+                    : isDateInRange(this.date, this.hoverDate, this.endDate));
+            const selected = isDateSelected(this.date, this.startDate, this.endDate);
+            const disabledDate = isDateDisabled(this.date, this.minDate, this.maxDate, this.disabledDates);
+            const disabledByFilter = Object.prototype.toString.call(this.dateFilter) === '[object Function]' && this.date
+                ? !this.dateFilter(this.date)
+                : false;
+            this.disabled = disabledDate || disabledByFilter;
+            return {
+                'calendar-row': true,
+                disabled: this.disabled,
+                range: inRange,
+                'range-hover': rangeHover,
+                selected: selected,
+                current: this.current
+            };
+        }
+        else {
+            return {
+                'calendar-row': true,
+                current: this.current
+            };
+        }
     }
     get ariaSelected() {
         return this.hostClasses?.['selected'] ? true : null;
@@ -2576,7 +2619,7 @@ class CalendarRowDirective {
         return this.date?.toLocaleDateString(this.locale) ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: CalendarRowDirective, isStandalone: true, selector: "[cCalendarRow]", inputs: { week: ["cCalendarRow", "week"] }, host: { properties: { "attr.aria-selected": "ariaSelected", "attr.tabindex": "this.tabindex", "class": "this.hostClasses" } }, exportAs: ["cCalendarRow"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: CalendarRowDirective, isStandalone: true, selector: "[cCalendarRow]", inputs: { week: ["cCalendarRow", "week"] }, host: { properties: { "attr.aria-selected": "ariaSelected", "attr.tabindex": "tabindex()", "class": "this.hostClasses" } }, exportAs: ["cCalendarRow"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarRowDirective, decorators: [{
             type: Directive,
@@ -2584,14 +2627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     selector: '[cCalendarRow]',
                     standalone: true,
                     exportAs: 'cCalendarRow',
-                    host: { '[attr.aria-selected]': 'ariaSelected' }
+                    host: { '[attr.aria-selected]': 'ariaSelected', '[attr.tabindex]': 'tabindex()' }
                 }]
         }], ctorParameters: () => [], propDecorators: { week: [{
                 type: Input,
                 args: [{ alias: 'cCalendarRow', required: true }]
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -2599,13 +2639,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class CalendarMonthComponent {
     #destroyRef;
-    constructor(calendarService) {
-        this.calendarService = calendarService;
+    #calendarService;
+    constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.addMonths = 0;
-        this._startDate = null;
-        this._endDate = null;
-        this._disabledDates = [];
+        this.#calendarService = inject(CalendarService);
+        this.pageIndex = input(0, { transform: numberAttribute });
+        this.addMonths = computed(() => {
+            const view = this.view();
+            const pageIndex = this.pageIndex();
+            return pageIndex * (view === 'years' ? 144 : view === 'months' ? 12 : 1);
+        });
+        /**
+         * Initial selected date.
+         * @type  (Date | null)
+         */
+        this.startDate = signal(null, { equal: equalDates });
+        /**
+         * Initial selected to date (range).
+         * @type  Date | null
+         */
+        this.endDate = signal(null, { equal: equalDates });
+        this.datesEffect = effect(() => {
+            const startDate = this.startDate();
+            const endDate = startDate && this.range() ? this.endDate() : null;
+            this.#calendarService.update({ startDate: startDate, endDate: endDate });
+        }, { allowSignalWrites: true });
+        /**
+         * Specify the list of dates that cannot be selected.
+         * @type  Date[] | Date[][]
+         */
+        this.disabledDates = signal([]);
         /**
          * Sets the day of start week.
          * - 0 - Sunday,
@@ -2616,199 +2679,120 @@ class CalendarMonthComponent {
          * - 5 - Friday,
          * - 6 - Saturday,
          */
-        this.firstDayOfWeek = 1;
-        this.#locale = signal('default');
+        this.firstDayOfWeek = signal(1);
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the browser.
+         * @default 'default'
+         */
+        this.locale = signal('default');
         /**
          * Allow range selection.
          * @type boolean
          * @default false
          */
-        this.range = false;
+        this.range = signal(false);
         /**
          * Set length or format of day name.
          * @type number | 'long' | 'narrow' | 'short'
          * @default 'short'
          */
-        this.weekdayFormat = 'short';
-        this.#view = signal('days');
-        this._maxDate = null;
-        this._minDate = null;
+        this.weekdayFormat = signal('short');
+        /**
+         * Set calendar view.
+         * @type 'days' | 'months' | 'years'
+         * @default 'days'
+         */
+        this.view = signal('days');
+        /**
+         * Max selectable date.
+         */
+        this.maxDate = signal(null, { equal: equalDates });
+        /**
+         * Min selectable date.
+         */
+        this.minDate = signal(null, { equal: equalDates });
         this.listOfMonths = computed(() => {
-            return createGroupsInArray(getMonthsNames(this.#locale(), this.calendarDate$$().getFullYear()), 4);
+            return createGroupsInArray(getMonthsNames(this.locale(), this.date().getFullYear()), 4);
+        });
+        this.listOfYears = computed(() => createGroupsInArray(getYears(this.date().getFullYear()), 4));
+        /**
+         * Default date of the component
+         * @type Date
+         */
+        this.calendarDate = signal(new Date(), { equal: equalDates });
+        this.date = computed(() => {
+            const date = this.calendarDate();
+            return new Date(date.getFullYear(), date.getMonth() + this.addMonths(), 1, 0, 0, 0, 0);
+        }, { equal: (a, b) => a.getTime() === b.getTime() });
+        this.calendarDateEffect = effect(() => {
+            this.#calendarService.update({ calendarDate: this.calendarDate() });
+        }, { allowSignalWrites: true });
+        this.dateFilter = signal(undefined);
+        this.dayFormat = signal('numeric');
+        this.selectAdjacentDays = signal(false);
+        this.showAdjacentDays = signal(true);
+        this.selectionType = signal('day');
+        this.showWeekNumber = signal(false);
+        this.weekNumbersLabel = signal('');
+        this.monthDetails = computed(() => {
+            const date = this.date();
+            return getMonthDetails(date.getFullYear(), date.getMonth(), this.firstDayOfWeek());
+        });
+        this.weekDays = computed(() => {
+            const monthDetails = this.monthDetails();
+            return monthDetails[0].days;
         });
-        this.listOfYears = computed(() => createGroupsInArray(getYears(this.calendarDate$$().getFullYear()), 4));
-        this.calendarDate$$ = signal(new Date());
-        this.#selectionType = signal('month');
-        this.showWeekNumber = true;
-        this.isDateInRangeDisabled = isDateInRangeDisabled;
-        this.isDateBetweenMinMax = isDateBetweenMinMax;
         this.calendarStateSubscribe();
     }
-    /**
-     * Initial selected date.
-     * @type  (Date | null)
-     */
-    set startDate(value) {
-        const date = !!value ? tryDate(value, 'startDate') : null;
-        if (this._startDate?.getTime() !== date?.getTime()) {
-            this._startDate = date;
-            this.calendarService.update({ startDate: this._startDate });
-        }
-    }
-    get startDate() {
-        return this._startDate;
-    }
-    /**
-     * Initial selected to date (range).
-     * @type  Date | null
-     */
-    set endDate(value) {
-        const date = !!value ? tryDate(value, 'endDate') : null;
-        if (this._endDate?.getTime() !== date?.getTime()) {
-            this._endDate = date;
-            this.calendarService.update({ endDate: this._endDate });
-        }
-    }
-    get endDate() {
-        return this._endDate;
-    }
-    /**
-     * Specify the list of dates that cannot be selected.
-     * @type  Date[] | Date[][]
-     */
-    set disabledDates(value) {
-        this._disabledDates = value;
-    }
-    get disabledDates() {
-        return this._disabledDates;
-    }
-    /**
-     * Sets the default locale for components. If not set, it is inherited from the browser.
-     * @default 'default'
-     */
-    set locale(value) {
-        this.#locale.set(value);
-        // this.listOfMonths = createGroupsInArray(getMonthsNames(value), 4);
-    }
-    get locale() {
-        return this.#locale();
-    }
-    #locale;
-    /**
-     * Set calendar view.
-     * @type 'days' | 'months' | 'years'
-     * @default 'days'
-     */
-    set view(value) {
-        this.#view.set(value);
-    }
-    get view() {
-        return this.#view();
-    }
-    #view;
-    /**
-     * Max selectable date.
-     */
-    set maxDate(value) {
-        this._maxDate = value ? tryDate(value, 'maxDate') : null;
-    }
-    get maxDate() {
-        return this._maxDate;
-    }
-    /**
-     * Min selectable date.
-     */
-    set minDate(value) {
-        this._minDate = value ? tryDate(value, 'minDate') : null;
-    }
-    get minDate() {
-        return this._minDate;
-    }
-    /**
-     * Default date of the component
-     * @type Date
-     */
-    set calendarDate(value) {
-        const _value = new Date(tryDate(value ?? this.startDate, 'calendarDate'));
-        if (!!_value && this.calendarDate$$().getTime() !== _value.getTime()) {
-            this.calendarDate$$.set(new Date(new Date(_value.setDate(1)).setHours(0, 0, 0, 0)));
-            this.setMonthDetails(this.date);
-            this.calendarService.update({ calendarDate: this.calendarDate$$() });
-        }
-    }
-    get calendarDate() {
-        return this.calendarDate$$();
-    }
-    get date() {
-        return new Date(this.calendarDate?.getFullYear(), this.calendarDate?.getMonth() + this.addMonths);
-    }
-    set selectionType(value) {
-        this.#selectionType.set(value);
-    }
-    get selectionType() {
-        return this.#selectionType();
-    }
-    #selectionType;
-    get monthDetails() {
-        return this._monthDetails;
-    }
-    get weekDays() {
-        return this.monthDetails[0].days;
-    }
-    ngOnInit() {
-        this.setMonthDetails(this.date);
-    }
-    setMonthDetails(date = this.date) {
-        this._monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), this.firstDayOfWeek);
-    }
     yearNumber(year) {
-        return new Date(year, 0).toLocaleDateString(this.locale, { year: 'numeric' });
+        return new Date(year, 0).toLocaleDateString(this.locale(), { year: 'numeric' });
     }
     isDateDisabled(date) {
-        if (this.selectionType === 'year') {
-            const minDate = this.minDate ? new Date(this.minDate.getFullYear(), 0, 1, 0, 0, 0, 0) : null;
-            const maxDate = this.maxDate ? new Date(this.maxDate.getFullYear(), 11, 31, 0, 0, 0, 0) : null;
-            return (isDateDisabled(date, minDate, maxDate, this.disabledDates) || (this.dateFilter ? !this.dateFilter(date) : false));
-        }
-        if (this.selectionType === 'month') {
-            const minDate = this.minDate
-                ? new Date(this.minDate.getFullYear(), this.minDate.getMonth(), 1, 0, 0, 0, 0)
-                : null;
-            const maxDate = this.maxDate
-                ? new Date(this.maxDate.getFullYear(), this.maxDate.getMonth() + 1, 1, 0, 0, -1, 0)
-                : null;
-            return (isDateDisabled(date, minDate, maxDate, this.disabledDates) || (this.dateFilter ? !this.dateFilter(date) : false));
-        }
-        return (isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) ||
-            (this.dateFilter ? !this.dateFilter(date) : false));
+        const selectionType = this.selectionType();
+        const disabledDates = this.disabledDates();
+        const dateFilterFn = this.dateFilter();
+        const maxDate = this.maxDate();
+        const minDate = this.minDate();
+        if (selectionType === 'year') {
+            const min = minDate ? new Date(minDate.getFullYear(), 0, 1, 0, 0, 0, 0) : null;
+            const max = maxDate ? new Date(maxDate.getFullYear(), 11, 31, 0, 0, 0, 0) : null;
+            return isDateDisabled(date, min, max, disabledDates) || (dateFilterFn ? !dateFilterFn(date) : false);
+        }
+        if (selectionType === 'month') {
+            const min = minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), 1, 0, 0, 0, 0) : null;
+            const max = maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth() + 1, 1, 0, 0, -1, 0) : null;
+            return isDateDisabled(date, min, max, disabledDates) || (dateFilterFn ? !dateFilterFn(date) : false);
+        }
+        return isDateDisabled(date, minDate, maxDate, disabledDates) || (dateFilterFn ? !dateFilterFn(date) : false);
     }
     calendarCellTitle(date) {
-        return date.toLocaleDateString(this.locale);
+        return date.toLocaleDateString(this.locale());
     }
     handleCellMouseEnter(hoverDate) {
         if (!hoverDate) {
             return;
         }
-        const updateHoverValue = (['day', 'week'].includes(this.selectionType) && this.view === 'days') ||
-            (['month'].includes(this.selectionType) && this.view === 'months') ||
-            (['year'].includes(this.selectionType) && this.view === 'years');
+        const selectionType = this.selectionType();
+        const updateHoverValue = (['day', 'week'].includes(selectionType) && this.view() === 'days') ||
+            (['month'].includes(selectionType) && this.view() === 'months') ||
+            (['year'].includes(selectionType) && this.view() === 'years');
         // if (updateHoverValue) {
         const hoverValue = this.isDateDisabled(hoverDate) || !updateHoverValue ? null : hoverDate;
-        this.calendarService.update({ hoverDate: hoverValue });
+        this.#calendarService.update({ hoverDate: hoverValue });
         // }
     }
     handleYearCellClick(year) {
-        if (this.selectionType === 'year') {
+        if (this.selectionType() === 'year') {
             let date = new Date(year, 0, 1, 0, 0, 0, 0);
-            if (this.range && this.startDate && !this.endDate) {
+            if (this.range() && this.startDate() && !this.endDate()) {
                 date = new Date(date.getFullYear(), 12, 1, 0, 0, -1, 0);
             }
             this.handleDayCellClick(date);
             return;
         }
         const calendarDate = new Date(year, 0, 1, 0, 0, 0, 0);
-        this.view = 'months';
-        this.calendarService.update({ view: this.view, calendarDate: calendarDate });
+        this.view.set('months');
+        this.#calendarService.update({ view: this.view(), calendarDate: calendarDate });
     }
     handleYearCellKeyUp($event, date) {
         if (!date) {
@@ -2840,26 +2824,28 @@ class CalendarMonthComponent {
         if (!value) {
             return;
         }
-        if (this.selectionType === 'month') {
+        if (this.selectionType() === 'month') {
             let date = new Date(value.getFullYear(), value.getMonth(), 1, 0, 0, 0, 0);
-            if (this.range && this.startDate && !this.endDate) {
+            if (this.range() && this.startDate() && !this.endDate()) {
                 date = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, -1, 0);
             }
             this.handleDayCellClick(date);
             return;
         }
-        this.setCalendarPage(0, 0, value.getMonth() - this.addMonths);
-        this.view = 'days';
-        this.calendarService.update({ view: this.view });
+        this.view.set('days');
+        this.#calendarService.update({ view: this.view() });
+        // this.setCalendarPage(0, 0, value.getMonth() - this.addMonths());
+        const calendarDate = new Date(value.getFullYear(), value.getMonth() - this.addMonths(), 1, 0, 0, 0, 0);
+        this.#calendarService.update({ calendarDate: calendarDate });
     }
     setCalendarPage(years, months = 0, setMonth) {
-        const year = this.date.getFullYear();
-        const month = this.date.getMonth();
+        const year = this.date().getFullYear();
+        const month = this.date().getMonth();
         const d = new Date(year, month, 1, 0, 0, 0, 0);
         years && d.setFullYear(d.getFullYear() + years);
         months && d.setMonth(d.getMonth() + months);
         typeof setMonth === 'number' && d.setMonth(setMonth);
-        this.calendarService.update({ calendarDate: d });
+        this.#calendarService.update({ calendarDate: d });
     }
     handleDayCellKeyDown($event, date) {
         if (!date) {
@@ -2871,22 +2857,23 @@ class CalendarMonthComponent {
         $event.preventDefault();
         this.handleCellMouseEnter(date);
         const eventKey = $event.key === 'Tab' ? ($event.shiftKey ? 'ArrowLeft' : 'ArrowRight') : $event.key;
-        if (this.maxDate &&
-            date >= convertToDateObject(this.maxDate, this.selectionType) &&
+        const selectionType = this.selectionType();
+        const view = this.view();
+        const maxDate = this.maxDate();
+        if (maxDate &&
+            date >= convertToDateObject(maxDate, selectionType) &&
             ['ArrowRight', 'ArrowDown'].includes(eventKey)) {
             return;
         }
-        if (this.minDate &&
-            date <= convertToDateObject(this.minDate, this.selectionType) &&
-            ['ArrowLeft', 'ArrowUp'].includes(eventKey)) {
+        const minDate = this.minDate();
+        if (minDate && date <= convertToDateObject(minDate, selectionType) && ['ArrowLeft', 'ArrowUp'].includes(eventKey)) {
             return;
         }
         let element = $event.target;
-        if (this.selectionType === 'week' && this.view === 'days' && element.tabIndex === -1) {
+        if (selectionType === 'week' && view === 'days' && element.tabIndex === -1) {
             element = element.closest('tr[tabindex="0"]');
         }
-        const elements = ['week'].includes(this.selectionType) && this.view === 'days' ? this.calendarRows : this.calendarDays;
-        // @ts-ignore
+        const elements = ['week'].includes(selectionType) && view === 'days' ? this.calendarRows : this.calendarDays;
         const list = elements
             .toArray()
             .map((calendarCell) => calendarCell.elementRef.nativeElement)
@@ -2902,8 +2889,8 @@ class CalendarMonthComponent {
         const gap = {
             ArrowRight: 1,
             ArrowLeft: -1,
-            ArrowUp: this.selectionType === 'week' && this.view === 'days' ? -1 : this.view === 'days' ? -7 : -3,
-            ArrowDown: this.selectionType === 'week' && this.view === 'days' ? 1 : this.view === 'days' ? 7 : 3
+            ArrowUp: selectionType === 'week' && view === 'days' ? -1 : view === 'days' ? -7 : -3,
+            ArrowDown: selectionType === 'week' && view === 'days' ? 1 : view === 'days' ? 7 : 3
         };
         if ((eventKey === 'ArrowRight' && last) ||
             (eventKey === 'ArrowDown' && toBoundary.end < gap.ArrowDown) ||
@@ -2915,7 +2902,7 @@ class CalendarMonthComponent {
                 const _list = change
                     .toArray()
                     // .filter(element => this.selectionType === 'week' ? element?.elementRef.nativeElement.tabIndex === 0 : element?.elementRef.nativeElement.classList.contains('current'));
-                    .filter((element) => element?.elementRef.nativeElement.tabIndex === 0);
+                    .filter((directive) => directive?.elementRef.nativeElement.tabIndex === 0);
                 if (_list.length) {
                     let dayToFocus;
                     switch (eventKey) {
@@ -2942,16 +2929,16 @@ class CalendarMonthComponent {
                     }
                 }
             });
-            if (this.view === 'days') {
-                this.setCalendarPage(0, ['ArrowRight', 'ArrowDown'].includes(eventKey) ? 1 : -1);
-            }
-            if (this.view === 'months') {
-                this.setCalendarPage(['ArrowRight', 'ArrowDown'].includes(eventKey) ? 1 : -1);
-                // this.calendarDays?.reset(this.calendarDays.toArray());
-                // this.calendarDays?.notifyOnChanges();
-            }
-            if (this.view === 'years') {
-                this.setCalendarPage(['ArrowRight', 'ArrowDown'].includes(eventKey) ? 12 : -12);
+            switch (view) {
+                case 'days':
+                    this.setCalendarPage(0, ['ArrowRight', 'ArrowDown'].includes(eventKey) ? 1 : -1);
+                    break;
+                case 'months':
+                    this.setCalendarPage(['ArrowRight', 'ArrowDown'].includes(eventKey) ? 1 : -1);
+                    break;
+                case 'years':
+                    this.setCalendarPage(['ArrowRight', 'ArrowDown'].includes(eventKey) ? 12 : -12);
+                    break;
             }
             return;
         }
@@ -2976,7 +2963,7 @@ class CalendarMonthComponent {
         }
     }
     handleCellMouseLeave() {
-        this.calendarService.update({ hoverDate: null });
+        this.#calendarService.update({ hoverDate: null });
     }
     handleDayCellKeyUp($event, date) {
         if (['Space', 'Enter'].includes($event.code)) {
@@ -2989,67 +2976,66 @@ class CalendarMonthComponent {
         }
     }
     handleDayCellClick(date) {
-        if (this.selectionType === 'day' && this.isDateDisabled(date)) {
+        if (this.selectionType() === 'day' && this.isDateDisabled(date)) {
             return;
         }
-        if (!this.range) {
-            this.endDate = null;
-            this.startDate = date;
+        if (!this.range()) {
+            this.endDate.set(null);
+            this.startDate.set(date);
             return;
         }
-        if (this.startDate && this.endDate) {
-            this.calendarDate = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
-            this.endDate = null;
-            this.startDate = null;
+        const startDate = this.startDate();
+        const endDate = this.endDate();
+        if (startDate && endDate) {
+            this.startDate.set(null);
+            this.endDate.set(null);
             return;
         }
-        if (!!this.startDate && !this.endDate) {
-            if (this.startDate && date < this.startDate) {
-                this.endDate = null;
-                this.startDate = date;
+        if (!!startDate && !endDate) {
+            if (startDate && date < startDate) {
+                this.endDate.set(null);
+                this.startDate.set(date);
             }
             else {
-                this.endDate = date;
+                const addDays = this.selectionType() !== 'week' ? 1 : 7;
+                this.endDate.set(new Date(date.getFullYear(), date.getMonth(), date.getDate() + addDays, 0, 0, -1, 0));
             }
         }
         else {
-            this.endDate = null;
-            this.startDate = date;
+            this.endDate.set(null);
+            this.startDate.set(date);
         }
-        if (this.startDate && this.endDate) {
-            // @ts-ignore
-            if (isDateInRangeDisabled(this.startDate, this.endDate, this.disabledDates)) {
-                this.startDate = null;
-                this.endDate = null;
-                return;
+        {
+            const startDate = this.startDate();
+            const endDate = this.endDate();
+            if (startDate && endDate) {
+                const dateFilterFn = this.dateFilter();
+                if (isDateInRangeDisabled(startDate, endDate, this.disabledDates(), dateFilterFn)) {
+                    this.startDate.set(null);
+                    this.endDate.set(null);
+                    return;
+                }
             }
-            // let date = new Date(this.startDate);
-            // while (date < this.endDate) {
-            //   date.setDate(date.getDate() + 1);
-            //   if (this.isDateDisabled(date)) {
-            //     this.startDate = null;
-            //     this.endDate = null;
-            //     break;
-            //   }
-            // }
         }
     }
     calendarStateSubscribe() {
-        this.calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
+        this.#calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
             const keys = Object.keys(state);
             for (const key of keys) {
-                // if (key in this) {
-                // @ts-ignore
-                this[key] = state[key];
-                // }
+                if (key in this) {
+                    // @ts-ignore
+                    const isWritableSignal = typeof this[key] === 'function' && typeof this[key].set === 'function';
+                    // @ts-ignore
+                    isWritableSignal ? this[key].set(state[key]) : (this[key] = state[key]);
+                }
             }
         });
     }
     getMonthStart(index) {
-        return new Date(this.calendarDate.getFullYear(), index, 1, 0, 0, 0, 0);
+        return new Date(this.calendarDate().getFullYear(), index + this.addMonths(), 1, 0, 0, 0, 0);
     }
     getMonthEnd(index) {
-        return new Date(this.calendarDate.getFullYear(), index + 1, 1, 0, 0, -1, 0);
+        return new Date(this.calendarDate().getFullYear(), index + 1 + this.addMonths(), 1, 0, 0, -1, 0);
     }
     getYearStart(year) {
         return new Date(year, 0, 1);
@@ -3057,8 +3043,8 @@ class CalendarMonthComponent {
     getYearEnd(year) {
         return new Date(year, 11, 1, 0, 0, -1, 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarMonthComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CalendarMonthComponent, isStandalone: true, selector: "c-calendar-month", inputs: { addMonths: "addMonths", startDate: "startDate", endDate: "endDate", disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", range: ["range", "range", booleanAttribute], weekdayFormat: "weekdayFormat", view: "view", maxDate: "maxDate", minDate: "minDate", calendarDate: "calendarDate" }, viewQueries: [{ propertyName: "calendarDays", predicate: CalendarDayDirective, descendants: true }, { propertyName: "calendarRows", predicate: CalendarRowDirective, descendants: true }], exportAs: ["cCalendarMonth"], ngImport: i0, template: "<table>\n  @if (view === 'days') {\n    <thead>\n    <tr>\n      @if (showWeekNumber) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel }}</div>\n        </th>\n      }\n      @for (weekDay of weekDays; track weekDay.date; let i = $index) {\n        @let date = weekDay.date ;\n        <th class=\"calendar-cell\" abbr=\"{{date | calendarWeekday:'long':locale}}\">\n          <div class=\"calendar-header-cell-inner\">\n            {{ date | calendarWeekday:weekdayFormat:locale }}\n          </div>\n        </th>\n      }\n    </tr>\n    </thead>\n  }\n  <tbody (mouseleave)=\"handleCellMouseLeave()\">\n    @switch (view) {\n      @case ('years') {\n        @for (yearsRow of listOfYears(); track yearsRow; let rowIdx = $index) {\n          <tr>\n            @for (year of yearsRow; track year; let idx = $index) {\n              <td\n                #calendarYear=\"cCalendarDay\"\n                (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n                (keydown)=\"calendarYear.date() && handleDayCellKeyDown($event, calendarYear.date())\"\n                (keyup)=\"handleYearCellKeyUp($event, calendarYear.date())\"\n                (mouseenter)=\"calendarYear.date() && handleCellMouseEnter(calendarYear.date())\"\n                [attr.aria-label]=\"calendarYear.date()?.getFullYear()\"\n                [date]=\"getYearStart(year)\"\n                [ngClass]=\"year | calendarClassYear\"\n                [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ yearNumber(year) }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n      @case ('months') {\n        @for (monthsRow of listOfMonths(); track monthsRow; let rowIdx = $index) {\n          <tr>\n            @for (month of monthsRow; track month; let idx = $index) {\n              <td\n                #calendarMonth=\"cCalendarDay\"\n                (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date())\"\n                (keydown)=\"calendarMonth.date() && handleDayCellKeyDown($event, calendarMonth.date())\"\n                (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date())\"\n                (mouseenter)=\"calendarMonth.date() && handleCellMouseEnter(calendarMonth.date())\"\n                [attr.aria-label]=\"calendarMonth.date()?.getFullYear()+' '+month.month\"\n                [date]=\"getMonthStart(rowIdx*3+idx)\"\n                [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n                [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ month.month }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n\n      }\n      @default {\n        @for (week of monthDetails; track week; let i = $index) {\n          <tr #calendarRow=\"cCalendarRow\"\n              (click)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n              (keydown)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n              (keyup)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n              (mouseenter)=\"selectionType === 'week' && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n              [cCalendarRow]=\"week\"\n          >\n            @if (showWeekNumber) {\n              <th class=\"calendar-cell-week-number\">\n                {{ week.weekNumber === 0 ? 53 : week.weekNumber }}\n              </th>\n            }\n            @for (dateObj of week.days; track dateObj.date; let idx = $index) {\n              @if (dateObj.month === 'current' || showAdjacentDays) {\n                <td #calendarCell=\"cCalendarDay\"\n                    (click)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellClick(dateObj.date)\"\n                    (keydown)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyDown($event, dateObj.date)\"\n                    (keyup)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyUp($event, dateObj.date)\"\n                    (mouseenter)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleCellMouseEnter(dateObj.date)\"\n                    [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale\"\n                    [date]=\"dateObj.date\"\n                    [month]=\"dateObj.month\"\n                    [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n                    [tabindex]=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && !isDateDisabled(dateObj.date) ? 0 : -1\"\n                    cCalendarDay\n                >\n                  <div class=\"calendar-cell-inner\">\n                    {{ dateObj.date | calendarDay:dayFormat:locale }}\n                  </div>\n                </td>\n              } @else {\n                <td class=\"calendar-cell\"></td>\n              }\n            }\n          </tr>\n        }\n\n      }\n    }\n\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}\n"], dependencies: [{ kind: "directive", type: CalendarDayDirective, selector: "[cCalendarDay]", inputs: ["date", "month"], exportAs: ["cCalendarDay"] }, { kind: "pipe", type: CalendarDayPipe, name: "calendarDay" }, { kind: "pipe", type: CalendarDayTitlePipe, name: "calendarDayTitle" }, { kind: "directive", type: CalendarRowDirective, selector: "[cCalendarRow]", inputs: ["cCalendarRow"], exportAs: ["cCalendarRow"] }, { kind: "pipe", type: CalendarClassDayPipe, name: "calendarClassDay" }, { kind: "pipe", type: CalendarClassMonthPipe, name: "calendarClassMonth" }, { kind: "pipe", type: CalendarClassYearPipe, name: "calendarClassYear" }, { kind: "pipe", type: CalendarWeekdayPipe, name: "calendarWeekday" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CalendarMonthComponent, isStandalone: true, selector: "c-calendar-month", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "calendarDays", predicate: CalendarDayDirective, descendants: true }, { propertyName: "calendarRows", predicate: CalendarRowDirective, descendants: true }], exportAs: ["cCalendarMonth"], ngImport: i0, template: "<table>\n  @if (view() === 'days') {\n    <thead>\n    <tr>\n      @if (showWeekNumber()) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel() }}</div>\n        </th>\n      }\n      @for (weekDay of weekDays(); track weekDay.date; let i = $index) {\n        @let date = weekDay.date ;\n        <th class=\"calendar-cell\" abbr=\"{{date | calendarWeekday:'long':locale()}}\">\n          <div class=\"calendar-header-cell-inner\">\n            {{ date | calendarWeekday:weekdayFormat():locale() }}\n          </div>\n        </th>\n      }\n    </tr>\n    </thead>\n  }\n  <tbody (mouseleave)=\"handleCellMouseLeave()\">\n    @switch (view()) {\n      @case ('years') {\n        @for (yearsRow of listOfYears(); track yearsRow[0]; let rowIdx = $index) {\n          <tr>\n            @for (year of yearsRow; track year; let idx = $index) {\n              <td\n                #calendarYear=\"cCalendarDay\"\n                (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n                (keydown)=\"calendarYear.date() && handleDayCellKeyDown($event, calendarYear.date())\"\n                (keyup)=\"handleYearCellKeyUp($event, calendarYear.date())\"\n                (mouseenter)=\"calendarYear.date() && handleCellMouseEnter(calendarYear.date())\"\n                [attr.aria-label]=\"calendarYear.date()?.getFullYear()\"\n                [date]=\"getYearStart(year)\"\n                [ngClass]=\"year | calendarClassYear\"\n                [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ yearNumber(year) }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n      @case ('months') {\n        @for (monthsRow of listOfMonths(); track monthsRow[0]; let rowIdx = $index) {\n          <tr>\n            @for (month of monthsRow; track month; let idx = $index) {\n              @let monthStart = getMonthStart(rowIdx*3+idx);\n              <td\n                #calendarMonth=\"cCalendarDay\"\n                (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date())\"\n                (keydown)=\"calendarMonth.date() && handleDayCellKeyDown($event, calendarMonth.date())\"\n                (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date())\"\n                (mouseenter)=\"calendarMonth.date() && handleCellMouseEnter(calendarMonth.date())\"\n                [attr.aria-label]=\"calendarMonth.date()?.getFullYear()+' '+month.month\"\n                [date]=\"monthStart\"\n                [ngClass]=\"monthStart | calendarClassMonth:(rowIdx*3+idx)\"\n                [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ month.month }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n\n      }\n      @default {\n        @let weekSelection = selectionType() === 'week';\n        @let daySelection = selectionType() === 'day';\n        @for (week of monthDetails(); track week.days[0]; let i = $index) {\n          <tr #calendarRow=\"cCalendarRow\"\n              (click)=\"weekSelection && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n              (keydown)=\"weekSelection && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n              (keyup)=\"weekSelection && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n              (mouseenter)=\"weekSelection && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n              [cCalendarRow]=\"week\"\n          >\n            @if (showWeekNumber()) {\n              <th class=\"calendar-cell-week-number\">\n                {{ week.weekNumber === 0 ? 53 : week.weekNumber }}\n              </th>\n            }\n            @for (dateObj of week.days; track dateObj.date; let idx = $index) {\n              @let currentMonth = dateObj.month === 'current';\n              @if (currentMonth || showAdjacentDays()) {\n                @let selectable = daySelection && (currentMonth || selectAdjacentDays());\n                <td #calendarCell=\"cCalendarDay\"\n                    (click)=\"selectable && handleDayCellClick(dateObj.date)\"\n                    (keydown)=\"selectable && handleDayCellKeyDown($event, dateObj.date)\"\n                    (keyup)=\"selectable && handleDayCellKeyUp($event, dateObj.date)\"\n                    (mouseenter)=\"selectable && handleCellMouseEnter(dateObj.date)\"\n                    [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale()\"\n                    [date]=\"dateObj.date\"\n                    [month]=\"dateObj.month\"\n                    [ngClass]=\"dateObj | calendarClassDay:{minDate: minDate(), maxDate: maxDate(), disabledDates: disabledDates(), dateFilter: dateFilter()}\"\n                    [tabindex]=\"selectable && !isDateDisabled(dateObj.date) ? 0 : -1\"\n                    cCalendarDay\n                >\n                  <div class=\"calendar-cell-inner\">\n                    {{ dateObj.date | calendarDay:dayFormat():locale() }}\n                  </div>\n                </td>\n              } @else {\n                <td class=\"calendar-cell\"></td>\n              }\n            }\n          </tr>\n        }\n      }\n    }\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-cell-inner{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: CalendarDayDirective, selector: "[cCalendarDay]", inputs: ["date", "month"], exportAs: ["cCalendarDay"] }, { kind: "pipe", type: CalendarDayPipe, name: "calendarDay" }, { kind: "pipe", type: CalendarDayTitlePipe, name: "calendarDayTitle" }, { kind: "directive", type: CalendarRowDirective, selector: "[cCalendarRow]", inputs: ["cCalendarRow"], exportAs: ["cCalendarRow"] }, { kind: "pipe", type: CalendarClassDayPipe, name: "calendarClassDay" }, { kind: "pipe", type: CalendarClassMonthPipe, name: "calendarClassMonth" }, { kind: "pipe", type: CalendarClassYearPipe, name: "calendarClassYear" }, { kind: "pipe", type: CalendarWeekdayPipe, name: "calendarWeekday" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
@@ -3074,34 +3060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         CalendarWeekdayPipe,
                         NgClass,
                         AsyncPipe
-                    ], template: "<table>\n  @if (view === 'days') {\n    <thead>\n    <tr>\n      @if (showWeekNumber) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel }}</div>\n        </th>\n      }\n      @for (weekDay of weekDays; track weekDay.date; let i = $index) {\n        @let date = weekDay.date ;\n        <th class=\"calendar-cell\" abbr=\"{{date | calendarWeekday:'long':locale}}\">\n          <div class=\"calendar-header-cell-inner\">\n            {{ date | calendarWeekday:weekdayFormat:locale }}\n          </div>\n        </th>\n      }\n    </tr>\n    </thead>\n  }\n  <tbody (mouseleave)=\"handleCellMouseLeave()\">\n    @switch (view) {\n      @case ('years') {\n        @for (yearsRow of listOfYears(); track yearsRow; let rowIdx = $index) {\n          <tr>\n            @for (year of yearsRow; track year; let idx = $index) {\n              <td\n                #calendarYear=\"cCalendarDay\"\n                (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n                (keydown)=\"calendarYear.date() && handleDayCellKeyDown($event, calendarYear.date())\"\n                (keyup)=\"handleYearCellKeyUp($event, calendarYear.date())\"\n                (mouseenter)=\"calendarYear.date() && handleCellMouseEnter(calendarYear.date())\"\n                [attr.aria-label]=\"calendarYear.date()?.getFullYear()\"\n                [date]=\"getYearStart(year)\"\n                [ngClass]=\"year | calendarClassYear\"\n                [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ yearNumber(year) }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n      @case ('months') {\n        @for (monthsRow of listOfMonths(); track monthsRow; let rowIdx = $index) {\n          <tr>\n            @for (month of monthsRow; track month; let idx = $index) {\n              <td\n                #calendarMonth=\"cCalendarDay\"\n                (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date())\"\n                (keydown)=\"calendarMonth.date() && handleDayCellKeyDown($event, calendarMonth.date())\"\n                (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date())\"\n                (mouseenter)=\"calendarMonth.date() && handleCellMouseEnter(calendarMonth.date())\"\n                [attr.aria-label]=\"calendarMonth.date()?.getFullYear()+' '+month.month\"\n                [date]=\"getMonthStart(rowIdx*3+idx)\"\n                [ngClass]=\"calendarDate | calendarClassMonth:(rowIdx*3+idx)\"\n                [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ month.month }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n\n      }\n      @default {\n        @for (week of monthDetails; track week; let i = $index) {\n          <tr #calendarRow=\"cCalendarRow\"\n              (click)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n              (keydown)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n              (keyup)=\"selectionType === 'week' && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n              (mouseenter)=\"selectionType === 'week' && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n              [cCalendarRow]=\"week\"\n          >\n            @if (showWeekNumber) {\n              <th class=\"calendar-cell-week-number\">\n                {{ week.weekNumber === 0 ? 53 : week.weekNumber }}\n              </th>\n            }\n            @for (dateObj of week.days; track dateObj.date; let idx = $index) {\n              @if (dateObj.month === 'current' || showAdjacentDays) {\n                <td #calendarCell=\"cCalendarDay\"\n                    (click)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellClick(dateObj.date)\"\n                    (keydown)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyDown($event, dateObj.date)\"\n                    (keyup)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleDayCellKeyUp($event, dateObj.date)\"\n                    (mouseenter)=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && handleCellMouseEnter(dateObj.date)\"\n                    [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale\"\n                    [date]=\"dateObj.date\"\n                    [month]=\"dateObj.month\"\n                    [ngClass]=\"dateObj | calendarClassDay:{minDate, maxDate, disabledDates, dateFilter}\"\n                    [tabindex]=\"selectionType === 'day' && (dateObj.month === 'current' || selectAdjacentDays) && !isDateDisabled(dateObj.date) ? 0 : -1\"\n                    cCalendarDay\n                >\n                  <div class=\"calendar-cell-inner\">\n                    {{ dateObj.date | calendarDay:dayFormat:locale }}\n                  </div>\n                </td>\n              } @else {\n                <td class=\"calendar-cell\"></td>\n              }\n            }\n          </tr>\n        }\n\n      }\n    }\n\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}\n"] }]
-        }], ctorParameters: () => [{ type: CalendarService }], propDecorators: { addMonths: [{
-                type: Input
-            }], startDate: [{
-                type: Input
-            }], endDate: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], locale: [{
-                type: Input
-            }], range: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], weekdayFormat: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], calendarDate: [{
-                type: Input
-            }], calendarDays: [{
+                    ], template: "<table>\n  @if (view() === 'days') {\n    <thead>\n    <tr>\n      @if (showWeekNumber()) {\n        <th class=\"calendar-cell\">\n          <div class=\"calendar-header-cell-inner\">{{ weekNumbersLabel() }}</div>\n        </th>\n      }\n      @for (weekDay of weekDays(); track weekDay.date; let i = $index) {\n        @let date = weekDay.date ;\n        <th class=\"calendar-cell\" abbr=\"{{date | calendarWeekday:'long':locale()}}\">\n          <div class=\"calendar-header-cell-inner\">\n            {{ date | calendarWeekday:weekdayFormat():locale() }}\n          </div>\n        </th>\n      }\n    </tr>\n    </thead>\n  }\n  <tbody (mouseleave)=\"handleCellMouseLeave()\">\n    @switch (view()) {\n      @case ('years') {\n        @for (yearsRow of listOfYears(); track yearsRow[0]; let rowIdx = $index) {\n          <tr>\n            @for (year of yearsRow; track year; let idx = $index) {\n              <td\n                #calendarYear=\"cCalendarDay\"\n                (click)=\"!calendarYear.disabled$() && handleYearCellClick(year)\"\n                (keydown)=\"calendarYear.date() && handleDayCellKeyDown($event, calendarYear.date())\"\n                (keyup)=\"handleYearCellKeyUp($event, calendarYear.date())\"\n                (mouseenter)=\"calendarYear.date() && handleCellMouseEnter(calendarYear.date())\"\n                [attr.aria-label]=\"calendarYear.date()?.getFullYear()\"\n                [date]=\"getYearStart(year)\"\n                [ngClass]=\"year | calendarClassYear\"\n                [tabindex]=\"calendarYear.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ yearNumber(year) }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n      @case ('months') {\n        @for (monthsRow of listOfMonths(); track monthsRow[0]; let rowIdx = $index) {\n          <tr>\n            @for (month of monthsRow; track month; let idx = $index) {\n              @let monthStart = getMonthStart(rowIdx*3+idx);\n              <td\n                #calendarMonth=\"cCalendarDay\"\n                (click)=\"!calendarMonth.disabled$() && handleMonthCellClick(calendarMonth.date())\"\n                (keydown)=\"calendarMonth.date() && handleDayCellKeyDown($event, calendarMonth.date())\"\n                (keyup)=\"handleMonthCellKeyUp($event, calendarMonth.date())\"\n                (mouseenter)=\"calendarMonth.date() && handleCellMouseEnter(calendarMonth.date())\"\n                [attr.aria-label]=\"calendarMonth.date()?.getFullYear()+' '+month.month\"\n                [date]=\"monthStart\"\n                [ngClass]=\"monthStart | calendarClassMonth:(rowIdx*3+idx)\"\n                [tabindex]=\"calendarMonth.disabled$() ? -1 : 0\"\n                cCalendarDay\n              >\n                <div class=\"calendar-cell-inner\">\n                  {{ month.month }}\n                </div>\n              </td>\n            }\n          </tr>\n        }\n\n      }\n      @default {\n        @let weekSelection = selectionType() === 'week';\n        @let daySelection = selectionType() === 'day';\n        @for (week of monthDetails(); track week.days[0]; let i = $index) {\n          <tr #calendarRow=\"cCalendarRow\"\n              (click)=\"weekSelection && (calendarRow.current) && calendarRow.date && handleDayCellClick(calendarRow.date)\"\n              (keydown)=\"weekSelection && (calendarRow.current) && calendarRow.date && handleDayCellKeyDown($event, calendarRow.date)\"\n              (keyup)=\"weekSelection && (calendarRow.current) && calendarRow.date && handleDayCellKeyUp($event, calendarRow.date)\"\n              (mouseenter)=\"weekSelection && calendarRow.date && handleCellMouseEnter(calendarRow.date)\"\n              [cCalendarRow]=\"week\"\n          >\n            @if (showWeekNumber()) {\n              <th class=\"calendar-cell-week-number\">\n                {{ week.weekNumber === 0 ? 53 : week.weekNumber }}\n              </th>\n            }\n            @for (dateObj of week.days; track dateObj.date; let idx = $index) {\n              @let currentMonth = dateObj.month === 'current';\n              @if (currentMonth || showAdjacentDays()) {\n                @let selectable = daySelection && (currentMonth || selectAdjacentDays());\n                <td #calendarCell=\"cCalendarDay\"\n                    (click)=\"selectable && handleDayCellClick(dateObj.date)\"\n                    (keydown)=\"selectable && handleDayCellKeyDown($event, dateObj.date)\"\n                    (keyup)=\"selectable && handleDayCellKeyUp($event, dateObj.date)\"\n                    (mouseenter)=\"selectable && handleCellMouseEnter(dateObj.date)\"\n                    [attr.aria-label]=\"dateObj.date | calendarDayTitle:locale()\"\n                    [date]=\"dateObj.date\"\n                    [month]=\"dateObj.month\"\n                    [ngClass]=\"dateObj | calendarClassDay:{minDate: minDate(), maxDate: maxDate(), disabledDates: disabledDates(), dateFilter: dateFilter()}\"\n                    [tabindex]=\"selectable && !isDateDisabled(dateObj.date) ? 0 : -1\"\n                    cCalendarDay\n                >\n                  <div class=\"calendar-cell-inner\">\n                    {{ dateObj.date | calendarDay:dayFormat():locale() }}\n                  </div>\n                </td>\n              } @else {\n                <td class=\"calendar-cell\"></td>\n              }\n            }\n          </tr>\n        }\n      }\n    }\n  </tbody>\n</table>\n\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}.calendar-row:focus-visible{box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-row:focus-within:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-row:focus:not([tabindex=\"-1\"]){outline:0;box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem;outline-style:auto!important}.calendar-cell:focus:not(:focus-visible):not([tabindex=\"-1\"]){box-shadow:var(--cui-calendar-cell-focus-box-shadow);border-radius:.375rem}.calendar-cell-inner{-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { calendarDays: [{
                 type: ViewChildren,
                 args: [CalendarDayDirective]
             }], calendarRows: [{
@@ -3128,365 +3088,335 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }] });
 
 class CalendarComponent {
-    #destroyRef;
-    constructor(calendarService) {
-        this.calendarService = calendarService;
+    constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this._calendarDate = tryDate(new Date());
-        this._calendars = 1;
-        this._dayFormat = 'numeric';
-        this._disabledDates = [];
-        this._startDate = null;
-        this._endDate = null;
-        this._firstDayOfWeek = 1;
-        this._locale = 'default';
-        this._maxDate = null;
-        this._minDate = null;
-        this._navigation = true;
-        this._navYearFirst = false;
-        this._range = false;
-        this._view = 'days';
-        this._weekdayFormat = 'short';
-        // #selectionType = signal<SelectionType>('month');
-        this.#selectionType = 'day';
-        this.#showWeekNumber = signal(false);
-        this.calendarCellHover = new EventEmitter();
-        this.calendarDateChange = new EventEmitter();
-        this.endDateChange = new EventEmitter();
-        this.startDateChange = new EventEmitter();
-        this.viewChange = new EventEmitter();
-        this._hoverDate = null;
-        this.getCalendarDate = getCalendarDate;
-        this.calendarStateSubscribe();
-    }
-    /**
-     * Default date of the component
-     * @type  Date | string
-     */
-    set calendarDate(value) {
-        // const _value = new Date(tryDate((value ?? this.startDate ?? new Date()), 'calendarDate'));
-        const _value = new Date(tryDate(value ?? this.startDate, 'calendarDate'));
-        // if (!isDateBetweenMinMax(_value, this.minDate, this.maxDate)) {
-        //   // _value = _value < (this.minDate ?? 0) ? this.minDate ?? this.maxDate ?? _value : this.maxDate ?? this.minDate ?? _value;
-        //   // return;
-        //   _value = this._calendarDate;
-        // }
-        if (!!_value && this._calendarDate.getTime() !== _value.getTime()) {
-            const _calendarDate = new Date(new Date(_value.setDate(1)).setHours(0, 0, 0, 0));
-            this._calendarDate = _calendarDate;
-            this.calendarDateChange.emit(_calendarDate);
-            this.calendarService.update({ calendarDate: _calendarDate });
-        }
-    }
-    get calendarDate() {
-        return this._calendarDate;
-    }
-    /**
-     * The number of calendars that render on desktop devices.
-     * @type number
-     * default 1
-     */
-    set calendars(value) {
-        this._calendars = value;
-    }
-    get calendars() {
-        return this._calendars;
-    }
-    get calendarsArray() {
-        return Array.from({ length: this.calendars }, (v, i) => i);
-    }
-    /**
-     * Set the format of day name.
-     * @default 'numeric'
-     * @type DayFormatType
-     */
-    set dayFormat(value) {
-        this._dayFormat = value;
-        this.calendarService.update({ dayFormat: this._dayFormat });
-    }
-    get dayFormat() {
-        return this._dayFormat;
-    }
-    /**
-     * Specify the list of dates that cannot be selected.
-     * @type  Date[] | Date[][]
-     */
-    set disabledDates(value) {
-        this._disabledDates = value;
-        this.calendarService.update({ disabledDates: this._disabledDates });
-    }
-    get disabledDates() {
-        return this._disabledDates;
-    }
-    /**
-     * Initial selected date.
-     * @type  (Date | null)
-     */
-    set startDate(value) {
-        const date = !!value ? tryDate(value, 'startDate') : null;
-        if (this._startDate?.getTime() !== date?.getTime()) {
-            this._startDate = date;
-            this.calendarService.update({ startDate: this._startDate });
-            if (!this.range || !this._startDate || (this.endDate && this._startDate > this.endDate)) {
-                this.endDate = null;
-            }
-        }
-    }
-    get startDate() {
-        return this._startDate;
-    }
-    /**
-     * Initial selected to date (range).
-     * @type Date | null
-     */
-    set endDate(value) {
-        const date = !!value ? tryDate(value, 'endDate') : null;
-        if (this._endDate?.getTime() !== date?.getTime()) {
-            this._endDate = date;
-            // this._endDate = this.range ? this._endDate : null;
-            this.calendarService.update({ endDate: this._endDate });
-        }
-    }
-    get endDate() {
-        return this.range ? this._endDate : null;
-    }
-    /**
-     * Sets the day of start week.
-     * - 0 - Sunday,
-     * - 1 - Monday,
-     * - 2 - Tuesday,
-     * - 3 - Wednesday,
-     * - 4 - Thursday,
-     * - 5 - Friday,
-     * - 6 - Saturday,
-     *
-     * @type number
-     * @default 1
-     */
-    set firstDayOfWeek(value) {
-        this._firstDayOfWeek = value;
-    }
-    get firstDayOfWeek() {
-        return this._firstDayOfWeek;
-    }
-    /**
-     * Sets the default locale for components. If not set, it is inherited from the browser.
-     * @default 'default'
-     */
-    set locale(value) {
-        this._locale = value;
-        this.calendarService.update({ locale: value });
-    }
-    get locale() {
-        return this._locale;
-    }
-    /**
-     * Max selectable date.
-     */
-    set maxDate(value) {
-        this._maxDate = !!value ? tryDate(value, 'maxDate') : null;
-        this.calendarService.update({ maxDate: this._maxDate });
-    }
-    get maxDate() {
-        return this._maxDate;
-    }
-    /**
-     * Min selectable date.
-     */
-    set minDate(value) {
-        this._minDate = value ? tryDate(value, 'minDate') : null;
-        this.calendarService.update({ minDate: this._minDate });
-    }
-    get minDate() {
-        return this._minDate;
-    }
-    /**
-     * Show navigation.
-     * @type boolean
-     */
-    set navigation(value) {
-        this._navigation = value;
-    }
-    get navigation() {
-        return this._navigation;
-    }
-    /**
-     * Reorder year-month navigation, and render year first.
-     * @type boolean
-     * @default false
-     */
-    set navYearFirst(value) {
-        this._navYearFirst = value;
-        this.calendarService.update({ navYearFirst: this._navYearFirst });
-    }
-    get navYearFirst() {
-        return this._navYearFirst;
-    }
-    /**
-     * Allow range selection.
-     * @type boolean
-     * @default false
-     */
-    set range(value) {
-        this._range = value;
-        this.calendarService.update({ range: this._range });
-    }
-    get range() {
-        return this._range;
-    }
-    /**
-     * Set calendar view.
-     * @type 'days' | 'months' | 'years'
-     * @default 'days'
-     */
-    set view(value) {
-        // if (!['days', 'weeks'].includes(this.selectionType)) {
-        //   value = this.selectionType === 'month' ? 'months' : 'years';
-        // }
-        this._view = value;
-        this.calendarService.update({ view: value });
-    }
-    get view() {
-        return this._view;
-    }
-    /**
-     * Set length or format of day name.
-     * @type number | 'long' | 'narrow' | 'short'
-     * @default 'short'
-     */
-    set weekdayFormat(value) {
-        this._weekdayFormat = value;
-        this.calendarService.update({ weekdayFormat: this._weekdayFormat });
-    }
-    get weekdayFormat() {
-        return this._weekdayFormat;
-    }
-    set dateFilter(value) {
-        this.calendarService.update({ dateFilter: value });
-    }
-    /**
-     * 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
-     * @default false
-     * @since 4.4.10
-     */
-    set selectAdjacentDays(value) {
-        this.calendarService.update({ selectAdjacentDays: value });
-    }
-    /**
-     * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
-     * @type boolean
-     * @default true
-     * @since 4.4.10
-     */
-    set showAdjacentDays(value) {
-        this.calendarService.update({ showAdjacentDays: value ?? true });
-    }
-    /**
-     * Specify the type of date selection as day, week, month, or year.
-     * @type 'day' | 'week' | 'month' | 'year'
-     * @default 'day'
-     * @since 5.0.0
-     */
-    set selectionType(value) {
-        this.calendars = ['month', 'year'].includes(value) ? 1 : this.calendars;
-        this.#selectionType = value;
-        this.view = ['day', 'week'].includes(value) ? 'days' : value === 'month' ? 'months' : 'years';
-        this.calendarService.update({ selectionType: value, view: this.view });
-    }
-    get selectionType() {
-        return this.#selectionType;
-    }
-    // #selectionType = signal<SelectionType>('month');
-    #selectionType;
-    /**
-     * Set whether to display week numbers in the calendar.
-     * @type boolean
-     * @default false
-     * @since 5.0.0
-     */
-    set showWeekNumber(value) {
-        this.#showWeekNumber.set(value);
-        this.calendarService.update({ showWeekNumber: value });
-    }
-    #showWeekNumber;
-    /**
-     * Label displayed over week numbers in the calendar.
-     * @type string
-     * @default undefined
-     * @since 5.0.0
-     */
-    set weekNumbersLabel(value) {
-        this.calendarService.update({ weekNumbersLabel: value });
-    }
-    // used with calendarService
-    set hoverDate(value) {
-        this._hoverDate = value;
-        this.calendarCellHover.emit(value);
-    }
-    get hoverDate() {
-        return this._hoverDate;
-    }
-    get hostClasses() {
-        const selectionType = this.#selectionType;
-        const view = this.view;
-        return {
-            calendars: true,
-            [`select-${selectionType}`]: selectionType && view === 'days',
-            'show-week-numbers': this.#showWeekNumber()
-        };
+        this.#calendarService = inject(CalendarService);
+        this.calendarDateChange = output();
+        /**
+         * Default date of the component
+         * @type  Date | string
+         */
+        this.calendarDateModel = model(new Date(new Date().setDate(1)).setHours(0, 0, 0, 0), {
+            alias: 'calendarDate'
+        });
+        this.calendarDate = computed(() => {
+            const date = convertToDateObject(this.calendarDateModel() ?? this.startDate() ?? new Date(), this.selectionType(), 'calendarDate') ?? new Date();
+            const calendarDate = new Date(new Date(date.setDate(1)).setHours(0, 0, 0, 0));
+            return convertToDateObject(calendarDate, this.selectionType(), 'calendarDate');
+        }, { equal: equalDates });
+        this.calendarDateEffect = effect(() => {
+            this.#calendarService.update({ calendarDate: this.calendarDate() });
+            this.calendarDateChange.emit(this.calendarDate());
+        }, { allowSignalWrites: true });
+        /**
+         * The number of calendars that render on desktop devices.
+         * @type number
+         * default 1
+         */
+        this.calendars = input(1, { transform: numberAttribute });
+        this.calendarsArray = computed(() => {
+            const calendars = ['month', 'year'].includes(this.selectionType()) ? 1 : this.calendars();
+            return Array.from({ length: calendars }, (v, i) => i);
+        });
+        /**
+         * Set the format of day name.
+         * @default 'numeric'
+         * @type DayFormatType
+         */
+        this.dayFormat = input('numeric');
+        this.dayFormatEffect = effect(() => {
+            this.#calendarService.update({ dayFormat: this.dayFormat() });
+        }, { allowSignalWrites: true });
+        /**
+         * Specify the list of dates that cannot be selected.
+         * @type (Date | Date[])[]
+         */
+        this.disabledDates = input([]);
+        this.disabledDatesEffect = effect(() => {
+            this.#calendarService.update({ disabledDates: this.disabledDates() });
+        }, { allowSignalWrites: true });
+        this.endDateChange = output();
+        this.startDateChange = output();
+        /**
+         * Initial selected date.
+         * @type  (Date | null)
+         */
+        this.startDateModel = model(null, { alias: 'startDate' });
+        this.startDate = computed(() => {
+            const date = this.startDateModel() ?? null;
+            return !!date ? convertToDateObject(date, this.selectionType(), 'startDate') : null;
+        }, { equal: equalDates });
+        /**
+         * Initial selected to date (range).
+         * @type Date | null
+         */
+        this.endDateModel = model(null, { alias: 'endDate' });
+        this.endDate = computed(() => {
+            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());
+        }, { allowSignalWrites: true });
+        /**
+         * Sets the day of start week.
+         * - 0 - Sunday,
+         * - 1 - Monday,
+         * - 2 - Tuesday,
+         * - 3 - Wednesday,
+         * - 4 - Thursday,
+         * - 5 - Friday,
+         * - 6 - Saturday,
+         *
+         * @type number
+         * @default 1
+         */
+        this.firstDayOfWeek = input(1);
+        this.firstDayOfWeekEffect = effect(() => {
+            this.#calendarService.update({ firstDayOfWeek: this.firstDayOfWeek() });
+        }, { allowSignalWrites: true });
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the browser.
+         * @default 'default'
+         */
+        this.locale = input('default');
+        this.localeEffect = effect(() => {
+            this.#calendarService.update({ locale: this.locale() });
+        }, { allowSignalWrites: true });
+        /**
+         * Max selectable date.
+         */
+        this.maxDateInput = input(null, { alias: 'maxDate' });
+        this.maxDateEffect = effect(() => {
+            const date = this.maxDateInput();
+            const maxDate = !!date ? convertToDateObject(date, undefined, 'maxDate') : null;
+            this.#calendarService.update({ maxDate: maxDate });
+        }, { allowSignalWrites: true });
+        /**
+         * Min selectable date.
+         */
+        this.minDateInput = input(null, { alias: 'minDate' });
+        this.minDateEffect = effect(() => {
+            const date = this.minDateInput();
+            const minDate = !!date ? convertToDateObject(date, undefined, 'minDate') : null;
+            this.#calendarService.update({ minDate: minDate });
+        }, { allowSignalWrites: true });
+        /**
+         * Show navigation.
+         * @type boolean
+         */
+        this.navigation = input(true, { transform: booleanAttribute });
+        /**
+         * Reorder year-month navigation, and render year first.
+         * @type boolean
+         * @default false
+         */
+        this.navYearFirst = input(false, { transform: booleanAttribute });
+        this.navYearFirstEffect = effect(() => {
+            this.#calendarService.update({ navYearFirst: this.navYearFirst() });
+        }, { allowSignalWrites: true });
+        /**
+         * Allow range selection.
+         * @type boolean
+         * @default false
+         */
+        this.range = input(false, { transform: booleanAttribute });
+        this.rangeEffect = effect(() => {
+            this.#calendarService.update({ range: this.range() });
+        }, { allowSignalWrites: true });
+        /**
+         * Set calendar view.
+         * @type 'days' | 'months' | 'years'
+         * @default 'days'
+         */
+        this.view = model('days');
+        this.viewEffect = effect(() => {
+            this.#calendarService.update({ view: this.view() });
+        }, { allowSignalWrites: true });
+        /**
+         * Set length or format of day name.
+         * @type number | 'long' | 'narrow' | 'short'
+         * @default 'short'
+         */
+        this.weekdayFormat = input('short');
+        this.weekdayFormatEffect = effect(() => {
+            this.#calendarService.update({ weekdayFormat: this.weekdayFormat() });
+        }, { allowSignalWrites: true });
+        this.dateFilter = input();
+        this.dateFilterEffect = effect(() => {
+            this.#calendarService.update({ dateFilter: this.dateFilter() });
+        }, { allowSignalWrites: true });
+        /**
+         * 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
+         * @default false
+         * @since 4.4.10
+         */
+        this.selectAdjacentDays = input(false, { transform: booleanAttribute });
+        this.selectAdjacentDaysEffect = effect(() => {
+            this.#calendarService.update({ selectAdjacentDays: this.selectAdjacentDays() });
+        }, { allowSignalWrites: true });
+        /**
+         * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+         * @type boolean
+         * @default true
+         * @since 4.4.10
+         */
+        this.showAdjacentDays = input(true, { transform: booleanAttribute });
+        this.showAdjacentDaysEffect = effect(() => {
+            this.#calendarService.update({ showAdjacentDays: this.showAdjacentDays() });
+        }, { allowSignalWrites: true });
+        /**
+         * Specify the type of date selection as day, week, month, or year.
+         * @type 'day' | 'week' | 'month' | 'year'
+         * @default 'day'
+         * @since 5.0.0
+         */
+        this.selectionType = input('day');
+        this.selectionTypeEffect = effect(() => {
+            const selectionType = this.selectionType();
+            const view = ['day', 'week'].includes(selectionType) ? 'days' : selectionType === 'month' ? 'months' : 'years';
+            this.#calendarService.update({ selectionType: selectionType, view: view });
+        }, { allowSignalWrites: true });
+        /**
+         * Set whether to display week numbers in the calendar.
+         * @type boolean
+         * @default false
+         * @since 5.0.0
+         */
+        this.showWeekNumber = input(false, { transform: booleanAttribute });
+        this.showWeekNumberEffect = effect(() => {
+            this.#calendarService.update({ showWeekNumber: this.showWeekNumber() });
+        }, { allowSignalWrites: true });
+        /**
+         * Label displayed over week numbers in the calendar.
+         * @type string
+         * @default undefined
+         * @since 5.0.0
+         */
+        this.weekNumbersLabel = input();
+        this.weekNumbersLabelEffect = effect(() => {
+            this.#calendarService.update({ weekNumbersLabel: this.weekNumbersLabel() });
+        }, { allowSignalWrites: true });
+        this.ariaNextMonthLabel = input('Next month');
+        this.ariaNextYearLabel = input('Next year');
+        this.ariaPrevMonthLabel = input('Previous month');
+        this.ariaPrevYearLabel = input('Previous year');
+        this.calendarCellHover = output();
+        // used with calendarService
+        this.hoverDate = signal(null);
+        this.hoverDateEffect = effect(() => {
+            this.calendarCellHover.emit(this.hoverDate());
+        }, { allowSignalWrites: true });
+        this.hostClasses = computed(() => {
+            const selectionType = this.selectionType();
+            const view = this.view();
+            return {
+                calendars: true,
+                [`select-${selectionType}`]: selectionType && view === 'days',
+                'show-week-numbers': this.showWeekNumber()
+            };
+        });
     }
+    #destroyRef;
+    #calendarService;
+    // @ViewChildren(CalendarMonthComponent) calendarMonths!: QueryList<CalendarMonthComponent>;
     ngOnInit() {
-        this.calendarService.update({
-            locale: this.locale ?? 'default',
-            view: this.view,
-            range: this.range,
-            selectionType: this.selectionType
+        this.#calendarService.update({
+            locale: this.locale() ?? 'default',
+            view: this.view(),
+            range: this.range(),
+            selectionType: this.selectionType()
             // showAdjacentDays: this.showAdjacentDays,
             // selectAdjacentDays: this.selectAdjacentDays
         });
     }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.calendarStateSubscribe();
+        });
+    }
     calendarStateSubscribe() {
-        this.calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
+        const inputs = [
+            'dateFilter',
+            'dayFormat',
+            'disabledDates',
+            'firstDayOfWeek',
+            'locale',
+            'maxDate',
+            'minDate',
+            'navYearFirst',
+            'range',
+            'selectAdjacentDays',
+            'selectionType',
+            'showAdjacentDays',
+            'showWeekNumber',
+            'weekdayFormat',
+            'weekNumbersLabel'
+        ];
+        // const models = ['startDate', 'endDate', 'calendarDate'];
+        this.#calendarService.calendarState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((state) => {
             const keys = Object.keys(state);
             for (const key of keys) {
                 if (key in this) {
+                    if (inputs.includes(key)) {
+                        continue;
+                    }
+                    // if (models.includes(key) && state[key] !== undefined) {
+                    //   const model = `${key}Model`;
+                    //   // @ts-ignore
+                    //   this[model].set(state[key]);
+                    // }
+                    if (key === 'startDate') {
+                        this.startDateModel.set(state[key]);
+                        continue;
+                    }
+                    if (key === 'endDate') {
+                        this.endDateModel.set(state[key]);
+                        continue;
+                    }
+                    if (key === 'calendarDate') {
+                        this.calendarDateModel.set(state[key]);
+                        continue;
+                    }
+                    if (key === 'view') {
+                        this.view.set(state[key]);
+                        continue;
+                    }
+                    // @ts-ignore
+                    const isWritableSignal = typeof this[key] === 'function' && typeof this[key].set === 'function';
+                    // @ts-ignore
+                    const isReadonlySignal = typeof this[key] === 'function' && typeof this[key].set === 'undefined';
                     // @ts-ignore
-                    if (this[key] !== state[key]) {
+                    if (isWritableSignal && !isReadonlySignal ? this[key]() !== state[key] : this[key] !== state[key]) {
                         // @ts-ignore
-                        this[key] = state[key];
-                        if (key === 'startDate') {
-                            setTimeout(() => {
-                                this.startDateChange.emit(this._startDate);
-                            });
-                            continue;
-                        }
-                        if (key === 'endDate') {
-                            setTimeout(() => {
-                                this.endDateChange.emit(this._endDate);
-                            });
-                        }
+                        isWritableSignal ? this[key].set(state[key]) : (this[key] = state[key]);
+                        // this[key] = state[key];
                     }
                 }
             }
         });
     }
     setCalendarPage(years, months = 0, setMonth) {
-        const year = this.calendarDate.getFullYear();
-        const month = this.calendarDate.getMonth();
+        const calendarDate = this.calendarDate();
+        const year = calendarDate.getFullYear();
+        const month = calendarDate.getMonth();
         const d = new Date(year, month, 1);
         years && d.setFullYear(d.getFullYear() + years);
         months && d.setMonth(d.getMonth() + months);
         typeof setMonth === 'number' && d.setMonth(setMonth);
-        this.calendarDate = d;
+        this.calendarDateModel.set(d);
     }
     handleNavigationClick(direction, years = false) {
+        const view = this.view();
         if (direction === 'prev') {
             if (years) {
-                this.setCalendarPage(this.view === 'years' ? -10 : -1);
+                this.setCalendarPage(view === 'years' ? -10 : -1);
                 return;
             }
-            if (this.view !== 'days') {
+            if (view !== 'days') {
                 this.setCalendarPage(-1);
                 return;
             }
@@ -3495,10 +3425,10 @@ class CalendarComponent {
         }
         if (direction === 'next') {
             if (years) {
-                this.setCalendarPage(this.view === 'years' ? 10 : 1);
+                this.setCalendarPage(view === 'years' ? 10 : 1);
                 return;
             }
-            if (this.view !== 'days') {
+            if (view !== 'days') {
                 this.setCalendarPage(1);
                 return;
             }
@@ -3511,87 +3441,20 @@ class CalendarComponent {
      * @type void
      */
     clearDates() {
-        this.calendarService.update({ endDate: null });
-        this.calendarService.update({ startDate: null });
+        this.#calendarService.update({ startDate: null, endDate: null });
     }
     handleFocusChange($event) {
         if ($event === null) {
-            this.calendarService.update({ hoverDate: null });
+            this.#calendarService.update({ hoverDate: null });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CalendarComponent, isStandalone: true, selector: "c-calendar", inputs: { calendarDate: "calendarDate", calendars: ["calendars", "calendars", numberAttribute], dayFormat: "dayFormat", disabledDates: "disabledDates", startDate: "startDate", endDate: "endDate", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], range: ["range", "range", booleanAttribute], view: "view", weekdayFormat: "weekdayFormat", dateFilter: "dateFilter", selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange", viewChange: "viewChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CalendarService], viewQueries: [{ propertyName: "calendarMonths", predicate: CalendarMonthComponent, descendants: true }], exportAs: ["cCalendar"], ngImport: i0, template: "@for (calendar of calendarsArray; track calendar; let i = $index) {\n  <div [ngClass]=\"view | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [addMonths]=\"i\"\n      [navigation]=\"navigation\"\n    />\n\n    <c-calendar-month\n      [addMonths]=\"i\"\n      [firstDayOfWeek]=\"firstDayOfWeek\"\n      [weekdayFormat]=\"weekdayFormat\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n}\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"], dependencies: [{ kind: "component", type: CalendarNavigationComponent, selector: "c-calendar-navigation", inputs: ["addMonths", "navigation"], outputs: ["navigationClick"] }, { kind: "pipe", type: CalendarClassViewPipe, name: "calendarClassView" }, { kind: "component", type: CalendarMonthComponent, selector: "c-calendar-month", inputs: ["addMonths", "startDate", "endDate", "disabledDates", "firstDayOfWeek", "locale", "range", "weekdayFormat", "view", "maxDate", "minDate", "calendarDate"], exportAs: ["cCalendarMonth"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CalendarComponent, isStandalone: true, selector: "c-calendar", inputs: { calendarDateModel: { classPropertyName: "calendarDateModel", publicName: "calendarDate", isSignal: true, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, dayFormat: { classPropertyName: "dayFormat", publicName: "dayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, navYearFirst: { classPropertyName: "navYearFirst", publicName: "navYearFirst", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", 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 }, ariaNextMonthLabel: { classPropertyName: "ariaNextMonthLabel", publicName: "ariaNextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaNextYearLabel: { classPropertyName: "ariaNextYearLabel", publicName: "ariaNextYearLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaPrevMonthLabel: { classPropertyName: "ariaPrevMonthLabel", publicName: "ariaPrevMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaPrevYearLabel: { classPropertyName: "ariaPrevYearLabel", publicName: "ariaPrevYearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { calendarDateChange: "calendarDateChange", calendarDateModel: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange", startDateModel: "startDateChange", endDateModel: "endDateChange", view: "viewChange", calendarCellHover: "calendarCellHover" }, host: { properties: { "class": "hostClasses()" }, classAttribute: "calendar" }, providers: [CalendarService], exportAs: ["cCalendar"], ngImport: i0, template: "@for (calendar of calendarsArray(); track calendar; let i = $index) {\n  <div [ngClass]=\"view() | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [pageIndex]=\"i\"\n      [navigation]=\"navigation()\"\n      [ariaNextMonthLabel]=\"ariaNextMonthLabel()\"\n      [ariaNextYearLabel]=\"ariaNextYearLabel()\"\n      [ariaPrevMonthLabel]=\"ariaPrevMonthLabel()\"\n      [ariaPrevYearLabel]=\"ariaPrevYearLabel()\"\n    />\n\n    <c-calendar-month\n      [pageIndex]=\"i\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n}\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"], dependencies: [{ kind: "component", type: CalendarNavigationComponent, selector: "c-calendar-navigation", inputs: ["pageIndex", "navigation", "ariaNextMonthLabel", "ariaNextYearLabel", "ariaPrevMonthLabel", "ariaPrevYearLabel"], outputs: ["navigationClick"] }, { kind: "pipe", type: CalendarClassViewPipe, name: "calendarClassView" }, { kind: "component", type: CalendarMonthComponent, selector: "c-calendar-month", inputs: ["pageIndex"], exportAs: ["cCalendarMonth"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-calendar', exportAs: 'cCalendar', providers: [CalendarService], standalone: true, imports: [CalendarNavigationComponent, CalendarClassViewPipe, CalendarMonthComponent, NgClass, A11yModule], template: "@for (calendar of calendarsArray; track calendar; let i = $index) {\n  <div [ngClass]=\"view | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [addMonths]=\"i\"\n      [navigation]=\"navigation\"\n    />\n\n    <c-calendar-month\n      [addMonths]=\"i\"\n      [firstDayOfWeek]=\"firstDayOfWeek\"\n      [weekdayFormat]=\"weekdayFormat\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n}\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"] }]
-        }], ctorParameters: () => [{ type: CalendarService }], propDecorators: { calendarDate: [{
-                type: Input
-            }], calendars: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], dayFormat: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], startDate: [{
-                type: Input
-            }], endDate: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], locale: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], navigation: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], navYearFirst: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], range: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], view: [{
-                type: Input
-            }], weekdayFormat: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], selectAdjacentDays: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showAdjacentDays: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectionType: [{
-                type: Input
-            }], showWeekNumber: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], weekNumbersLabel: [{
-                type: Input
-            }], calendarCellHover: [{
-                type: Output
-            }], calendarDateChange: [{
-                type: Output
-            }], endDateChange: [{
-                type: Output
-            }], startDateChange: [{
-                type: Output
-            }], viewChange: [{
-                type: Output
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], calendarMonths: [{
-                type: ViewChildren,
-                args: [CalendarMonthComponent]
-            }] } });
+            args: [{ selector: 'c-calendar', exportAs: 'cCalendar', providers: [CalendarService], standalone: true, imports: [CalendarNavigationComponent, CalendarClassViewPipe, CalendarMonthComponent, NgClass, A11yModule], host: { class: 'calendar', '[class]': 'hostClasses()' }, template: "@for (calendar of calendarsArray(); track calendar; let i = $index) {\n  <div [ngClass]=\"view() | calendarClassView\">\n    <c-calendar-navigation\n      (navigationClick)=\"handleNavigationClick($event.direction, $event.years)\"\n      [pageIndex]=\"i\"\n      [navigation]=\"navigation()\"\n      [ariaNextMonthLabel]=\"ariaNextMonthLabel()\"\n      [ariaNextYearLabel]=\"ariaNextYearLabel()\"\n      [ariaPrevMonthLabel]=\"ariaPrevMonthLabel()\"\n      [ariaPrevYearLabel]=\"ariaPrevYearLabel()\"\n    />\n\n    <c-calendar-month\n      [pageIndex]=\"i\"\n      cdkMonitorSubtreeFocus\n      (cdkFocusChange)=\"handleFocusChange($event)\"\n    />\n  </div>\n}\n", styles: [".btn-transparent:focus-visible{outline:-webkit-focus-ring-color auto 1px}\n"] }]
+        }] });
 
 class CalendarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -7513,198 +7376,259 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 //   };
 // }
 class DateRangePickerComponent {
-    constructor(breakpointObserver) {
-        this.breakpointObserver = breakpointObserver;
+    constructor() {
+        this.#breakpointObserver = inject(BreakpointObserver);
+        this.#destroyRef = inject(DestroyRef);
         /**
          * Set the format of day name.
          * @default 'numeric'
          * @type DayFormatType
          */
-        this.dayFormat = 'numeric';
+        this.dayFormat = input('numeric');
         /**
          * The number of calendars that render on desktop devices.
          * @type number
          * @default 2
          */
-        this.calendars = 2;
+        this.calendars = input(2, { transform: numberAttribute });
         /**
          * Toggle visibility or set the content of the cleaner button.
          * @type boolean
          * @default true
          */
-        this.cleaner = true;
+        this.cleaner = input(true, { transform: booleanAttribute });
         /**
          * Determine if the dropdown should be closed after value setting.
          * @type boolean
          * @default false
          */
-        this.closeOnSelect = false;
+        this.closeOnSelect = input(false, { transform: booleanAttribute });
+        /**
+         * Set date format.
+         * We use Angular formatDate() function, see:
+         * - https://angular.io/api/common/formatDate
+         * - https://angular.io/api/common/DatePipe#pre-defined-format-options
+         */
+        this.format = input();
         /**
          * Toggle visibility or set the content of the input indicator.
          * @type boolean
          * @default true
          */
-        this.indicator = true;
-        this.#inputReadOnly = false;
+        this.indicator = input(true);
+        /**
+         * Custom function to format the selected date into a string according to a custom format.
+         * @since v5.0.0
+         */
+        this.inputDateFormat = input();
+        /**
+         * Custom function to parse the input value into a valid Date object.
+         * @since v5.0.0
+         */
+        this.inputDateParse = input();
+        /**
+         * Toggle the readonly state for the component.
+         * @type boolean
+         * @default false
+         */
+        this.inputReadOnlyInput = input(false, { transform: booleanAttribute, alias: 'inputReadOnly' });
+        this.inputReadOnly = computed(() => {
+            return this.inputReadOnlyInput() || typeof this.format() === 'string';
+        });
         /**
          * Reorder year-month navigation, and render year first.
          * @type boolean
          * @default false
          */
-        this.navYearFirst = false;
+        this.navYearFirst = input(false, { transform: booleanAttribute });
         /**
          * Specifies short hints that are visible in start date and end date inputs.
          * type string
          */
-        this.placeholder = ['Start date', 'End date'];
+        this.placeholder = input(['Start date', 'End date']);
+        /**
+         * Predefined date ranges the user can select from.
+         * @type 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
          * @default 'secondary'
          */
-        this.rangesButtonsColor = 'secondary';
+        this.rangesButtonsColor = input('secondary');
         /**
          * Size the ranges button small or large.
          * @type 'sm' | 'lg' | ''
          */
-        this.rangesButtonsSize = '';
+        this.rangesButtonsSize = input('');
         /**
          * Set the ranges button variant to an outlined button or a ghost button.
          * @type 'outline' | 'ghost' | undefined
          */
-        this.rangesButtonsVariant = 'ghost';
+        this.rangesButtonsVariant = input('ghost');
         /**
          * Default icon or character that separates two dates.
          * @type boolean
          * @default true
          */
-        this.separator = true;
-        this.#timepicker = false;
+        this.separator = input(true, { transform: booleanAttribute });
+        /**
+         * Size the component small or large.
+         * @type 'sm' | 'lg' | undefined
+         * @default undefined
+         */
+        this.size = input();
+        /**
+         * Provide an additional time selection by adding select boxes to choose time.
+         * @type boolean
+         * @default false
+         */
+        this.timepickerInput = input(false, { transform: booleanAttribute, alias: 'timepicker' });
         /**
          * Toggle visual validation feedback.
          * @type boolean | undefined
          * @default undefined
          */
-        this.valid = undefined;
+        this.valid = input();
         /**
          * Toggle the visibility of the dropdown date-picker component.
          * @type boolean
          * @default false
          */
-        this.visible = false;
-        this.startDateModel = model(undefined, {
+        this.visibleInput = input(false, { transform: booleanAttribute });
+        this.visibleInputEffect = effect(() => {
+            this.visible.set(this.visibleInput());
+        }, { allowSignalWrites: true });
+        this.visible = signal(false);
+        this.startDateModel = model(null, {
             alias: 'startDate'
         });
         this.dateModelEffect = effect(() => {
             this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
-        });
-        this.startDateChange = outputToObservable(this.startDateModel);
+            const startDate = this.startDate();
+            const endDate = this.endDate();
+            this.value = this.range() ? { startDate: startDate, endDate: endDate } : startDate;
+            this.startDateModel.set(startDate);
+            this.endDateModel.set(endDate);
+        }, { allowSignalWrites: true });
         this.startDate = computed(() => {
-            const prevDate = this.#startDate ? new Date(this.#startDate) : null;
-            const currDate = this.startDateModel() ? new Date(this.startDateModel()) : null;
-            if (prevDate?.getTime() !== currDate?.getTime()) {
-                return currDate;
-            }
-            return prevDate;
-        });
-        this.#startDate = null;
-        this.endDateModel = model(undefined, {
+            const startDate = this.startDateModel();
+            return startDate ? new Date(startDate) : null;
+        }, { equal: equalDates });
+        this.startDateChange = toObservable(this.startDate);
+        this.endDateModel = model(null, {
             alias: 'endDate'
         });
-        this.endDateChange = outputToObservable(this.endDateModel);
         this.endDate = computed(() => {
-            const prevDate = this.#endDate ? new Date(this.#endDate) : null;
-            const currDate = this.endDateModel() ? new Date(this.endDateModel()) : null;
-            if (prevDate?.getTime() !== currDate?.getTime()) {
-                return currDate;
-            }
-            return prevDate;
-        });
-        this.#endDate = null;
+            const endDate = this.endDateModel();
+            return endDate ? new Date(endDate) : null;
+        }, { equal: equalDates });
+        this.endDateChange = toObservable(this.endDate);
         this.calendarDate = new Date();
-        this.disabledDates = [];
+        this.disabledDates = input([]);
         /**
          * Set first day of week.
-         * @type number
+         * @type DaysOfWeek
          * @default 1 (Monday)
          */
-        this.firstDayOfWeek = 1;
+        this.firstDayOfWeek = input(1);
         this.locale = input('default');
-        this.maxDate = null;
-        this.minDate = null;
+        this.maxDate = input(null);
+        this.minDate = input(null);
         /**
          * Show calendar navigation.
          * @type boolean
          * @default true
          */
-        this.navigation = true;
+        this.navigation = input(true, { transform: booleanAttribute });
         /**
          * Allow range selection.
          * @type boolean
-         * @default false
+         * @default true
          */
-        this.range = true;
-        this.#disabled = false;
+        this.rangeInput = input(true, { transform: booleanAttribute, alias: 'range' });
+        this.range = computed(() => {
+            return this.rangeInput();
+        });
+        this.dateFilter = input();
+        this.disabledInput = input(false, { transform: booleanAttribute, alias: 'disabled' });
+        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 = {};
         /**
          * Set length or format of day name.
          * @type WeekdayFormatType
          * @default 'short'
          */
-        this.weekdayFormat = 'short';
+        this.weekdayFormat = input('short');
         /**
          * Optional popper Options object
          * @type Partial<Options>
          */
-        this.popperjsOptions = {
-            strategy: 'absolute'
-        };
+        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
          * @default false
          * @since 4.4.10
          */
-        this.selectAdjacentDays = false;
+        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
          * @default true
          * @since 4.4.10
          */
-        this.showAdjacentDays = true;
+        this.showAdjacentDays = input(true, { transform: booleanAttribute });
         /**
          * Specify the type of date selection as day, week, month, or year.
          * @type 'day' | 'week' | 'month' | 'year'
          * @default 'day'
          * @since 5.0.0
          */
-        this.selectionType = 'day';
+        this.selectionType = input('day');
         /**
          * Set whether to display week numbers in the calendar.
          * @type boolean
          * @default false
          * @since 5.0.0
          */
-        this.showWeekNumber = false;
-        this.valueChange = new EventEmitter();
-        this.calendarCellHover = new EventEmitter();
-        this.calendarDateChange = new EventEmitter();
-        this.templates = {};
+        this.showWeekNumber = input(false, { transform: booleanAttribute });
+        /**
+         * Label displayed over week numbers in the calendar.
+         * @type string
+         * @default undefined
+         * @since 5.0.0
+         */
+        this.weekNumbersLabel = input();
+        this.valueChange = output();
+        this.calendarCellHover = output();
+        this.calendarDateChange = output();
+        this.startDateElementRef = viewChild('startDateElementRef');
+        this.endDateElementRef = viewChild('endDateElementRef');
+        this.contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
+        this.templates = computed(() => {
+            return this.contentTemplates().reduce((acc, child) => {
+                acc[child.id] = child.templateRef;
+                return acc;
+            }, {});
+        });
         this.dateChangeSubscriptions = [];
         this.isMobile = true;
         this.showRanges = false;
         this.startDateValue = computed(() => {
             const locale = this.locale() ?? 'default';
-            const dateFormatted = this.formatDate(this.startDate());
-            this.#startDate = this.startDate();
-            return dateFormatted;
+            return this.formatDate(this.startDate());
         });
         this.endDateValue = computed(() => {
             const locale = this.locale() ?? 'default';
-            const dateFormatted = this.formatDate(this.endDate());
-            this.#endDate = this.endDate();
-            return dateFormatted;
+            return this.formatDate(this.endDate());
         });
         // todo: validation
         // startDateInput = new FormControl({ value: this.startDateValue, disabled: this.disabled }, [
@@ -7720,9 +7644,11 @@ class DateRangePickerComponent {
         //   // invalidDateStringValidator(this.locale)
         // ]);
         this.dateRangeGroup = new FormGroup({
-            startDateInput: new FormControl({ value: '', disabled: this.disabled }, [Validators.required]),
-            endDateInput: new FormControl({ value: '', disabled: this.disabled }, [Validators.required])
+            startDateInput: new FormControl({ value: '', disabled: this.disabled() }, [Validators.required]),
+            endDateInput: new FormControl({ value: '', disabled: this.disabled() }, [Validators.required])
         });
+        this.inputStartHoverValue = signal(null);
+        this.inputEndHoverValue = signal(null);
         this.#breakpoints = {
             OneCalendarRanges: '(min-width: 480px)',
             TwoCalendars: '(max-width: 650px)',
@@ -7743,52 +7669,23 @@ class DateRangePickerComponent {
             /* empty */
         };
     }
-    /**
-     * Toggle the readonly state for the component.
-     * @type boolean
-     * @default false
-     */
-    set inputReadOnly(value) {
-        this.#inputReadOnly = value;
-    }
-    get inputReadOnly() {
-        return this.#inputReadOnly || typeof this.format === 'string';
-    }
-    #inputReadOnly;
-    /**
-     * Provide an additional time selection by adding select boxes to choose time.
-     * @type boolean
-     * @default false
-     */
-    set timepicker(value) {
-        this.#timepicker = value;
-    }
+    #breakpointObserver;
+    #destroyRef;
     get timepicker() {
         return false;
-        // return this.#timepicker;
-    }
-    #timepicker;
-    #startDate;
-    #endDate;
-    set disabled(value) {
-        this.#disabled = value;
-        this.#disabled ? this.dateRangeGroup.disable() : this.dateRangeGroup.enable();
-    }
-    get disabled() {
-        return this.#disabled;
+        // return this.timepickerInput();
     }
     #disabled;
     set value(value) {
-        const newValue = this.range ? { ...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);
-            // this.dateRangeGroup.setValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
-            if (this.closeOnSelect) {
-                const hasValue = this.range ? !!(this.value.startDate && this.value.endDate) : !!this.value;
-                this.visible = !hasValue;
+            this.valueChange.emit(this._value);
+            if (this.closeOnSelect() && this.visible()) {
+                const hasValue = this.range() ? !!(this._value.startDate && this._value.endDate) : !!this._value;
+                this.visible.set(!hasValue);
             }
         }
     }
@@ -7822,49 +7719,44 @@ class DateRangePickerComponent {
         this.onTouched();
     }
     get startDatePlaceholder() {
-        return Array.isArray(this.placeholder) ? this.placeholder[0] : this.placeholder;
+        const placeholder = this.placeholder();
+        return Array.isArray(placeholder) ? placeholder[0] : placeholder;
     }
     get endDatePlaceholder() {
-        return Array.isArray(this.placeholder) ? this.placeholder[1] : this.placeholder;
-    }
-    set inputStartHoverValue(value) {
-        this._inputStartHoverValue = value;
-    }
-    get inputStartHoverValue() {
-        return this._inputStartHoverValue;
-    }
-    set inputEndHoverValue(value) {
-        this._inputEndHoverValue = value;
-    }
-    get inputEndHoverValue() {
-        return this._inputEndHoverValue;
+        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
+            [`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();
+        const locale = this.locale();
         return !date || !isValidDate(date)
             ? ''
-            : typeof this.inputDateFormat === 'function'
-                ? this.inputDateFormat(date)
-                : !!this.format && !!this.locale() && this.locale() !== 'default'
-                    ? formatDate(date, this.format, this.locale())
+            : typeof inputDateFormat === 'function'
+                ? inputDateFormat(date)
+                : !!format && !!locale && locale !== 'default'
+                    ? formatDate(date, format, locale)
                     : this.timepicker
-                        ? date.toLocaleString(this.locale())
-                        : date.toLocaleDateString(this.locale());
+                        ? date.toLocaleString(locale)
+                        : date.toLocaleDateString(locale);
     }
     #breakpoints;
     ngOnInit() {
-        this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
+        const ranges = this.ranges();
+        this.customRanges = ranges ? Object.entries(ranges) : [];
         const breakpoints = this.#breakpoints;
-        this.layoutChanges = this.breakpointObserver
+        this.#breakpointObserver
             .observe([breakpoints.OneCalendarRanges, breakpoints.TwoCalendars, breakpoints.TwoCalendarsRanges])
+            .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe((result) => {
             if (result.matches) {
                 this.isMobile =
@@ -7878,33 +7770,8 @@ class DateRangePickerComponent {
         this.subscribeDateChange();
     }
     ngOnDestroy() {
-        this.layoutChanges?.unsubscribe();
         this.subscribeDateChange(false);
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.contentTemplates.forEach((child) => {
-                this.templates[child.id] = child.templateRef;
-            });
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['date']) {
-            // for date-picker component
-            const date = this.convertValueToDate(changes['date']?.currentValue) ?? null;
-            this.handleStartDateChange(date);
-            this.calendarDate = date ?? this.calendarDate;
-        }
-        if (changes['startDate']) {
-            const date = this.convertValueToDate(changes['startDate']?.currentValue) ?? null;
-            this.handleStartDateChange(date);
-            this.calendarDate = date ?? this.calendarDate;
-        }
-        if (changes['endDate']) {
-            const date = this.convertValueToDate(changes['endDate']?.currentValue) ?? null;
-            this.handleEndDateChange(date);
-        }
-    }
     convertValueToDate(value) {
         if (!value) {
             return null;
@@ -7915,8 +7782,9 @@ class DateRangePickerComponent {
         return new Date(value);
     }
     inputParse(date) {
-        if (typeof this.inputDateParse === 'function') {
-            const parsedDate = this.inputDateParse(date);
+        const inputDateParse = this.inputDateParse();
+        if (typeof inputDateParse === 'function') {
+            const parsedDate = inputDateParse(date);
             if (isValidDate(parsedDate)) {
                 return parsedDate;
             }
@@ -7934,15 +7802,15 @@ class DateRangePickerComponent {
     handleCalendarCellHover($event) {
         this.calendarCellHover.emit($event);
         if (!this.startDate()) {
-            this.setInputValue(this.startDateElementRef, $event);
-            this.inputStartHoverValue = $event;
-            this.setInputValue(this.endDateElementRef, null);
-            this.inputEndHoverValue = null;
+            this.setInputValue(this.startDateElementRef(), $event);
+            this.inputStartHoverValue.set($event);
+            this.setInputValue(this.endDateElementRef(), null);
+            this.inputEndHoverValue.set(null);
             return;
         }
         if (!this.endDate()) {
-            this.setInputValue(this.endDateElementRef, $event);
-            this.inputEndHoverValue = $event;
+            this.setInputValue(this.endDateElementRef(), $event);
+            this.inputEndHoverValue.set($event);
             return;
         }
     }
@@ -7953,21 +7821,16 @@ class DateRangePickerComponent {
     }
     handleStartDateChange(date) {
         this.startDateModel.set(date ?? null);
-        this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue() });
-        this.inputStartHoverValue = null;
-        this.value = this.range ? { startDate: this.startDate(), endDate: this.endDate() } : this.startDate();
+        this.inputStartHoverValue.set(null);
     }
     handleEndDateChange(date) {
-        if (!this.range) {
+        if (!this.range()) {
             return;
         }
         this.endDateModel.set(date ?? null);
-        this.dateRangeGroup.patchValue({ endDateInput: this.endDateValue() });
-        this.inputEndHoverValue = null;
-        this.value = this.range ? { startDate: this.startDate(), endDate: this.endDate() } : this.startDate();
+        this.inputEndHoverValue.set(null);
     }
     handleClear($event) {
-        // this.calendarComponent.clearDates();
         this.handleStartDateChange(null);
         this.handleEndDateChange(null);
     }
@@ -7975,14 +7838,13 @@ class DateRangePickerComponent {
         const inputValue = $event.target.value;
         const date = this.inputParse(inputValue);
         if (!date) {
-            // this.calendarComponent.clearDates();
             this.handleStartDateChange(null);
             this.handleEndDateChange(null);
             return;
         }
         if (date instanceof Date && date.getTime()) {
-            // @ts-ignore
-            if (!(this.forbiddenDate(date) || (this.endDate() && this.endDate() < date))) {
+            const endDate = this.endDate();
+            if (!(this.forbiddenDate(date) || (endDate && endDate < date))) {
                 this.calendarDate = date;
                 this.handleStartDateChange(date);
             }
@@ -7997,8 +7859,8 @@ class DateRangePickerComponent {
             return;
         }
         if (date instanceof Date && date.getTime()) {
-            // @ts-ignore
-            if (!(this.forbiddenDate(date) || (this.startDate() && this.startDate() > date))) {
+            const startDate = this.startDate();
+            if (!(this.forbiddenDate(date) || (startDate && startDate > date))) {
                 this.calendarDate = date;
                 this.handleEndDateChange(date);
             }
@@ -8009,8 +7871,9 @@ class DateRangePickerComponent {
         this.handleEndDateChange(this.endDate() ?? null);
     }
     forbiddenDate(date) {
-        return (isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) ||
-            (this.dateFilter ? !this.dateFilter(date) : false));
+        const dateFilter = this.dateFilter();
+        return (isDateDisabled(date, this.minDate(), this.maxDate(), this.disabledDates()) ||
+            (dateFilter ? !dateFilter(date) : false));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -8019,31 +7882,31 @@ class DateRangePickerComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.#disabled.set(isDisabled);
     }
     writeValue(value) {
         if (!!value) {
-            this.handleStartDateChange(this.range ? value.startDate : value);
-            this.handleEndDateChange(this.range ? value.endDate : null);
+            this.handleStartDateChange(this.range() ? value.startDate : value);
+            this.handleEndDateChange(this.range() ? value.endDate : null);
         }
     }
     handleStartTimeChange(time) {
         this.startDateModel.set(time ?? this.startDate());
     }
     handleEndTimeChange(time) {
-        if (!this.range) {
+        if (!this.range()) {
             return;
         }
         this.endDateModel.set(time ?? this.endDate());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: { classPropertyName: "dayFormat", publicName: "dayFormat", isSignal: false, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: false, isRequired: false, transformFunction: numberAttribute }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: false, isRequired: false, transformFunction: null }, inputDateParse: { classPropertyName: "inputDateParse", publicName: "inputDateParse", isSignal: false, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, navYearFirst: { classPropertyName: "navYearFirst", publicName: "navYearFirst", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsColor: { classPropertyName: "rangesButtonsColor", publicName: "rangesButtonsColor", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsSize: { classPropertyName: "rangesButtonsSize", publicName: "rangesButtonsSize", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsVariant: { classPropertyName: "rangesButtonsVariant", publicName: "rangesButtonsVariant", isSignal: false, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, startDateModel: { classPropertyName: "startDateModel", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDateModel: { classPropertyName: "endDateModel", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, calendarDate: { classPropertyName: "calendarDate", publicName: "calendarDate", isSignal: false, isRequired: false, transformFunction: dateTransform }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: numberAttribute }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, range: { classPropertyName: "range", publicName: "range", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: false, isRequired: false, transformFunction: null }, popperjsOptions: { classPropertyName: "popperjsOptions", publicName: "popperOptions", isSignal: false, isRequired: false, transformFunction: null }, selectAdjacentDays: { classPropertyName: "selectAdjacentDays", publicName: "selectAdjacentDays", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, weekNumbersLabel: { classPropertyName: "weekNumbersLabel", publicName: "weekNumbersLabel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { startDateModel: "startDateChange", endDateModel: "endDateChange", valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel", "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: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -8067,114 +7930,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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 !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { dayFormat: [{
-                type: Input
-            }], calendars: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], cleaner: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closeOnSelect: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], format: [{
-                type: Input
-            }], indicator: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], inputDateFormat: [{
-                type: Input
-            }], inputDateParse: [{
-                type: Input
-            }], inputReadOnly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], navYearFirst: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], placeholder: [{
-                type: Input
-            }], ranges: [{
-                type: Input
-            }], rangesButtonsColor: [{
-                type: Input
-            }], rangesButtonsSize: [{
-                type: Input
-            }], rangesButtonsVariant: [{
-                type: Input
-            }], separator: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], size: [{
-                type: Input
-            }], timepicker: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], valid: [{
-                type: Input
-            }], visible: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], calendarDate: [{
+                    ], 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 }]
-            }], disabledDates: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], maxDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], navigation: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], range: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], dateFilter: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], value: [{
                 type: Input
-            }], weekdayFormat: [{
-                type: Input
-            }], popperjsOptions: [{
-                type: Input,
-                args: ['popperOptions']
-            }], selectAdjacentDays: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showAdjacentDays: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectionType: [{
-                type: Input
-            }], showWeekNumber: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], weekNumbersLabel: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], calendarCellHover: [{
-                type: Output
-            }], calendarDateChange: [{
-                type: Output
-            }], startDateElementRef: [{
-                type: ViewChild,
-                args: ['startDateElementRef']
-            }], endDateElementRef: [{
-                type: ViewChild,
-                args: ['endDateElementRef']
-            }], contentTemplates: [{
-                type: ContentChildren,
-                args: [TemplateIdDirective, { descendants: true }]
             }], onBlur: [{
                 type: HostListener,
                 args: ['focusout']
@@ -8197,30 +7958,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }] });
 
 class DatePickerComponent extends DateRangePickerComponent {
-    constructor(breakpointObserver) {
-        super(breakpointObserver);
-        this.placeholder = 'Select date';
+    constructor() {
+        super(...arguments);
         this.dateChange = output();
-        this.range = false;
-        this.calendars = 1;
-        this.endDate = model(null);
-    }
-    set date(value) {
-        this.startDateModel.set(value);
+        this.calendars = input(1, { transform: numberAttribute });
+        this.placeholder = input('Select date');
+        this.range = signal(false);
+        this.endDate = signal(null);
+        this.startDateModel = model(null, {
+            alias: 'date'
+        });
     }
     get date() {
         return this.startDate();
     }
     writeValue(value) {
-        this.date = value;
+        this.startDateModel.set(value);
         super.writeValue(value);
     }
     subscribeDateChange(subscribe = true) {
         if (subscribe) {
             this.dateChangeSubscriptions.push(this.startDateChange.subscribe((next) => {
-                this.date = next;
-                this.onChange(next);
-                this.dateChange.emit(this.date);
+                if (this.startDateModel()?.getTime() !== next?.getTime()) {
+                    this.startDateModel.set(next);
+                    this.onChange(next);
+                    this.dateChange.emit(next);
+                }
             }));
             return;
         }
@@ -8228,14 +7991,14 @@ class DatePickerComponent extends DateRangePickerComponent {
             subscription?.unsubscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", endDate: "endDateChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, startDateModel: { classPropertyName: "startDateModel", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", startDateModel: "dateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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 !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel", "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: "18.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -8259,12 +8022,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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 !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { placeholder: [{
-                type: Input
-            }], date: [{
-                type: Input
-            }] } });
+                    ], 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 {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }