cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-calendar.mjs

@@ -1,4 +1,4 @@
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -12,13 +12,9 @@ import { DomHandler, ConnectedOverlayScrollHandler } from 'cax-design-system/dom
 import * as i4 from 'cax-design-system/ripple';
 import { RippleModule } from 'cax-design-system/ripple';
 import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'cax-design-system/utils';
-import { ChevronLeftIcon } from 'cax-design-system/icons/chevronleft';
-import { ChevronRightIcon } from 'cax-design-system/icons/chevronright';
 import { ChevronUpIcon } from 'cax-design-system/icons/chevronup';
 import { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';
 import { TimesIcon } from 'cax-design-system/icons/times';
-import { CalendarIcon } from 'cax-design-system/icons/calendar';
-import { ArrowDownIcon } from 'cax-design-system/icons/arrowdown';
 import * as i5 from 'cax-design-system/autofocus';
 import { AutoFocusModule } from 'cax-design-system/autofocus';
 
@@ -39,7 +35,7 @@ class Calendar {
     zone;
     config;
     overlayService;
-    iconDisplay = 'button';
+    iconDisplay = 'input';
     /**
      * Inline style of the component.
      * @group Props
@@ -95,6 +91,11 @@ class Calendar {
      * @group Props
      */
     disabled;
+    /**
+     * Specifies the size of the input.
+     * @group Props
+     */
+    size = 'md';
     /**
      * Format of the date which can also be defined at locale settings.
      * @group Props
@@ -129,7 +130,7 @@ class Calendar {
      * When enabled, displays a button with icon next to input.
      * @group Props
      */
-    showIcon;
+    showIcon = true;
     /**
      * Icon of the calendar button.
      * @group Props
@@ -176,7 +177,7 @@ class Calendar {
      * Years to change per step in yearpicker.
      * @group Props
      */
-    stepYearPicker = 9;
+    stepYearPicker = 12;
     /**
      * Hours to change per step.
      * @group Props
@@ -297,6 +298,9 @@ class Calendar {
      * @group Props
      */
     labelText;
+    helperText;
+    errorText;
+    invalid;
     timeSeparator = ':';
     leftIcon = true;
     //@Input() rightIcon: boolean= false;
@@ -481,8 +485,9 @@ class Calendar {
     }
     get inputClass() {
         return {
-            'cax-inputtext cax-component': true,
-            'cax-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'
+            'cax-inputtext cax-calendar-input cax-component': true,
+            'cax-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled',
+            'cax-input-invalid': this.invalid
         };
     }
     /**
@@ -553,8 +558,7 @@ class Calendar {
      * Callback to invoke when datepicker panel is shown.
      * @group Emits
      */
-    onInlineSaved = new EventEmitter();
-    onInlineCancelled = new EventEmitter();
+    onDateSaved = new EventEmitter();
     onShow = new EventEmitter();
     templates;
     containerViewChild;
@@ -641,8 +645,12 @@ class Calendar {
     _defaultDate;
     _focusKey = null;
     originalValue = null;
-    formattedInlineDate = '';
     window;
+    isJustFocused = false;
+    preSelectValue;
+    isSaved = false;
+    manualInputValue = '';
+    manualInputError = null;
     get locale() {
         return this._locale;
     }
@@ -685,7 +693,6 @@ class Calendar {
             this.cd.markForCheck();
         });
         this.initialized = true;
-        this.updateFormattedInlineDate();
     }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -745,17 +752,6 @@ class Calendar {
             }
         }
     }
-    updateFormattedInlineDate() {
-        if (this.value) {
-            const day = this.value.getDate().toString().padStart(2, '0');
-            const month = (this.value.getMonth() + 1).toString().padStart(2, '0');
-            const year = this.value.getFullYear();
-            this.formattedInlineDate = `${month}/${day}/${year}`;
-        }
-        else {
-            this.formattedInlineDate = '';
-        }
-    }
     getTranslation(option) {
         return this.config.getTranslation(option);
     }
@@ -783,8 +779,7 @@ class Calendar {
     }
     yearPickerValues() {
         let yearPickerValues = [];
-        let halfRange = Math.floor(this.stepYearPicker / 2);
-        let startYear = this.currentYear - halfRange;
+        let startYear = Math.floor(this.currentYear / this.stepYearPicker) * this.stepYearPicker;
         for (let i = 0; i < this.stepYearPicker; i++) {
             yearPickerValues.push(startYear + i);
         }
@@ -942,6 +937,42 @@ class Calendar {
             this.createMonths(this.currentMonth, this.currentYear);
         }
     }
+    navBackwardYear(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.isMonthNavigate = true;
+        if (this.currentView === 'year') {
+            this.decrementYearPickerStep();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
+        else {
+            this.decrementYear();
+            this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    navForwardYear(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.isMonthNavigate = true;
+        if (this.currentView === 'year') {
+            this.incrementYearPickerStep();
+            setTimeout(() => {
+                this.updateFocus();
+            }, 1);
+        }
+        else {
+            this.incrementYear();
+            this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
     decrementYear() {
         this.currentYear--;
         let _yearOptions = this.yearOptions;
@@ -964,6 +995,24 @@ class Calendar {
             this.populateYearOptions(_yearOptions[0] + difference, _yearOptions[_yearOptions.length - 1] + difference);
         }
     }
+    // switchToMonthView(event: Event) {
+    //     if (this.view === 'month') return;
+    //     if (this.currentView == 'month') {
+    //         this.setCurrentView(this.view);
+    //     } else {
+    //         this.setCurrentView('month');
+    //     }
+    //     event.preventDefault();
+    // }
+    // switchToYearView(event: Event) {
+    //     if (this.view === 'year') return;
+    //     if (this.currentView == 'year') {
+    //         this.setCurrentView(this.view);
+    //     } else {
+    //         this.setCurrentView('year');
+    //     }
+    //     event.preventDefault();
+    // }
     switchToMonthView(event) {
         this.setCurrentView('month');
         event.preventDefault();
@@ -984,26 +1033,13 @@ class Calendar {
             if (this.value.length === 0) {
                 this.value = null;
             }
-            this.updateModel(this.value);
         }
         else {
             if (this.shouldSelectDate(dateMeta)) {
                 this.selectDate(dateMeta);
             }
         }
-        if (this.hideOnDateTimeSelect && (this.isSingleSelection() || (this.isRangeSelection() && this.value[1]))) {
-            setTimeout(() => {
-                event.preventDefault();
-                this.hideOverlay();
-                if (this.mask) {
-                    this.disableModality();
-                }
-                this.cd.markForCheck();
-            }, 150);
-        }
-        this.updateInputfield();
         event.preventDefault();
-        this.updateFormattedInlineDate();
     }
     shouldSelectDate(dateMeta) {
         if (this.isMultipleSelection())
@@ -1011,6 +1047,26 @@ class Calendar {
         else
             return true;
     }
+    // onMonthSelect(event: Event, index: number) {
+    //     if (this.view === 'month') {
+    //         this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
+    //     } else {
+    //         this.currentMonth = index;
+    //         this.createMonths(this.currentMonth, this.currentYear);
+    //         this.setCurrentView(this.view);
+    //         this.onMonthChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+    //     }
+    // }
+    // onYearSelect(event: Event, year: number) {
+    //     if (this.view === 'year') {
+    //         this.onDateSelect(event, { year: year, month: 0, day: 1, selectable: true });
+    //     } else {
+    //         this.currentYear = year;
+    //         this.setCurrentView(this.view);
+    //         this.createMonths(this.currentMonth, this.currentYear);
+    //         this.onYearChange.emit({ month: this.currentMonth + 1, year: this.currentYear });
+    //     }
+    // }
     onMonthSelect(event, index) {
         if (this.view === 'month') {
             this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
@@ -1033,24 +1089,31 @@ class Calendar {
         }
     }
     updateInputfield() {
+        this.inputFieldValue = this.getFormattedValue(this.value);
+        this.updateFilledState();
+        if (this.inputfieldViewChild && this.inputfieldViewChild.nativeElement) {
+            this.inputfieldViewChild.nativeElement.value = this.inputFieldValue;
+        }
+    }
+    getFormattedValue(value) {
         let formattedValue = '';
-        if (this.value) {
+        if (value) {
             if (this.isSingleSelection()) {
-                formattedValue = this.formatDateTime(this.value);
+                formattedValue = this.formatDateTime(value);
             }
             else if (this.isMultipleSelection()) {
-                for (let i = 0; i < this.value.length; i++) {
-                    let dateAsString = this.formatDateTime(this.value[i]);
+                for (let i = 0; i < value.length; i++) {
+                    let dateAsString = this.formatDateTime(value[i]);
                     formattedValue += dateAsString;
-                    if (i !== this.value.length - 1) {
+                    if (i !== value.length - 1) {
                         formattedValue += this.multipleSeparator + ' ';
                     }
                 }
             }
             else if (this.isRangeSelection()) {
-                if (this.value && this.value.length) {
-                    let startDate = this.value[0];
-                    let endDate = this.value[1];
+                if (value.length) {
+                    let startDate = value[0];
+                    let endDate = value[1];
                     formattedValue = this.formatDateTime(startDate);
                     if (endDate) {
                         formattedValue += ' ' + this.rangeSeparator + ' ' + this.formatDateTime(endDate);
@@ -1058,11 +1121,7 @@ class Calendar {
                 }
             }
         }
-        this.inputFieldValue = formattedValue;
-        this.updateFilledState();
-        if (this.inputfieldViewChild && this.inputfieldViewChild.nativeElement) {
-            this.inputfieldViewChild.nativeElement.value = this.inputFieldValue;
-        }
+        return formattedValue;
     }
     formatDateTime(date) {
         let formattedValue = this.keepInvalid ? date : null;
@@ -1137,10 +1196,10 @@ class Calendar {
             this.currentSecond = date.getSeconds();
         }
         if (this.isSingleSelection()) {
-            this.updateModel(date);
+            this.value = date;
         }
         else if (this.isMultipleSelection()) {
-            this.updateModel(this.value ? [...this.value, date] : [date]);
+            this.value = this.value ? [...this.value, date] : [date];
         }
         else if (this.isRangeSelection()) {
             if (this.value && this.value.length) {
@@ -1153,13 +1212,22 @@ class Calendar {
                     startDate = date;
                     endDate = null;
                 }
-                this.updateModel([startDate, endDate]);
+                this.value = [startDate, endDate];
             }
             else {
-                this.updateModel([date, null]);
+                this.value = [date, null];
             }
         }
         this.onSelect.emit(date);
+        this.manualInputValue = this.getFormattedValue(this.value);
+        if (this.isRangeSelection() && (!this.value || this.value[1] == null)) {
+            this.manualInputError = 'Please select end date';
+        }
+        else {
+            this.manualInputError = null;
+        }
+        this.updateUI();
+        this.cd.markForCheck();
     }
     updateModel(value) {
         this.value = value;
@@ -1248,16 +1316,34 @@ class Calendar {
             return false;
         }
     }
+    isRangeStart(dateMeta) {
+        return this.isRangeSelection() && this.value && this.isDateEquals(this.value[0], dateMeta);
+    }
+    isRangeEnd(dateMeta) {
+        return this.isRangeSelection() && this.value && this.isDateEquals(this.value[1], dateMeta);
+    }
+    isRangeSelectionCompleted() {
+        return this.isRangeSelection() && !!this.value && !!this.value[0] && !!this.value[1];
+    }
+    isRangeBetween(dateMeta) {
+        return this.isRangeSelection() && !!this.value && !!this.value[0] && !!this.value[1] && this.isDateBetween(this.value[0], this.value[1], dateMeta) && !this.isDateEquals(this.value[0], dateMeta) && !this.isDateEquals(this.value[1], dateMeta);
+    }
     isComparable() {
         return this.value != null && typeof this.value !== 'string';
     }
     isMonthSelected(month) {
         if (!this.isComparable())
             return false;
-        if (this.isMultipleSelection())
-            return false;
-        let value = this.isRangeSelection() ? this.value[0] : this.value;
-        return value ? value.getMonth() === month : false;
+        const isMatch = (date) => date && date.getMonth() === month && date.getFullYear() === this.currentYear;
+        if (this.isMultipleSelection()) {
+            return this.value.some((d) => isMatch(d));
+        }
+        else if (this.isRangeSelection()) {
+            return (this.value[0] && isMatch(this.value[0])) || (this.value[1] && isMatch(this.value[1]));
+        }
+        else {
+            return isMatch(this.value);
+        }
     }
     isMonthDisabled(month, year) {
         const yearToCheck = year ?? this.currentYear;
@@ -1276,10 +1362,16 @@ class Calendar {
     isYearSelected(year) {
         if (!this.isComparable())
             return false;
-        if (this.isMultipleSelection())
-            return false;
-        let value = this.isRangeSelection() ? this.value[0] : this.value;
-        return value ? value.getFullYear() === year : false;
+        const isMatch = (date) => date && date.getFullYear() === year;
+        if (this.isMultipleSelection()) {
+            return this.value.some((d) => isMatch(d));
+        }
+        else if (this.isRangeSelection()) {
+            return (this.value[0] && isMatch(this.value[0])) || (this.value[1] && isMatch(this.value[1]));
+        }
+        else {
+            return isMatch(this.value);
+        }
     }
     isDateEquals(value, dateMeta) {
         if (value && ObjectUtils.isDate(value))
@@ -1375,6 +1467,7 @@ class Calendar {
         this.focus = true;
         if (this.showOnFocus) {
             this.showOverlay();
+            this.isJustFocused = true;
         }
         this.onFocus.emit(event);
     }
@@ -1392,6 +1485,10 @@ class Calendar {
         this.onModelTouched();
     }
     onButtonClick(event, inputfield = this.inputfieldViewChild?.nativeElement) {
+        if (this.isJustFocused) {
+            this.isJustFocused = false;
+            return;
+        }
         if (!this.overlayVisible) {
             inputfield.focus();
             this.showOverlay();
@@ -1400,13 +1497,22 @@ class Calendar {
             this.hideOverlay();
         }
     }
-    clear() {
-        this.inputFieldValue = null;
+    clear(event) {
         this.value = null;
-        this.onModelChange(this.value);
+        if (!this.overlayVisible) {
+            this.updateModel(null);
+            this.updateInputfield();
+        }
+        this.updateUI();
         this.onClear.emit();
+        if (event) {
+            event.stopPropagation();
+        }
     }
     onOverlayClick(event) {
+        if (event) {
+            event.stopPropagation();
+        }
         this.overlayService.add({
             originalEvent: event,
             target: this.el.nativeElement
@@ -1429,6 +1535,14 @@ class Calendar {
         this.navigationState = { backward: false, button: true };
         this.navForward(event);
     }
+    onPrevYearButtonClick(event) {
+        this.navigationState = { backward: true, button: true };
+        this.navBackwardYear(event);
+    }
+    onNextYearButtonClick(event) {
+        this.navigationState = { backward: false, button: true };
+        this.navForwardYear(event);
+    }
     onContainerButtonKeydown(event) {
         switch (event.which) {
             //tab
@@ -1836,13 +1950,13 @@ class Calendar {
     }
     updateFocus() {
         let cell;
-        if (this.navigationState) {
+        if (this.navigationState && this.contentViewChild && this.contentViewChild.nativeElement) {
             if (this.navigationState.button) {
                 this.initFocusableCell();
-                if (this.navigationState.backward)
-                    DomHandler.findSingle(this.contentViewChild.nativeElement, '.cax-datepicker-prev').focus();
-                else
-                    DomHandler.findSingle(this.contentViewChild.nativeElement, '.cax-datepicker-next').focus();
+                const buttonEl = this.navigationState.backward ? DomHandler.findSingle(this.contentViewChild.nativeElement, '.cax-datepicker-prev') : DomHandler.findSingle(this.contentViewChild.nativeElement, '.cax-datepicker-next');
+                if (buttonEl) {
+                    buttonEl.focus();
+                }
             }
             else {
                 if (this.navigationState.backward) {
@@ -2220,9 +2334,10 @@ class Calendar {
         if (this.isMultipleSelection()) {
             value = [...this.value.slice(0, -1), value];
         }
-        this.updateModel(value);
+        this.value = value;
         this.onSelect.emit(value);
-        this.updateInputfield();
+        this.updateUI();
+        this.cd.markForCheck();
     }
     toggleAMPM(event) {
         const newPM = !this.pm;
@@ -2257,14 +2372,20 @@ class Calendar {
         this.onInput.emit(event);
     }
     isValidSelection(value) {
+        if (!value) {
+            return true;
+        }
         if (this.isSingleSelection()) {
             return this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false);
         }
-        let isValid = value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false));
-        if (isValid && this.isRangeSelection()) {
-            isValid = value.length === 1 || (value.length > 1 && value[1] >= value[0]);
+        if (Array.isArray(value)) {
+            let isValid = value.every((v) => v == null || this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false));
+            if (isValid && this.isRangeSelection()) {
+                isValid = value.length === 1 || (value.length > 1 && (!value[1] || value[1] >= value[0]));
+            }
+            return isValid;
         }
-        return isValid;
+        return false;
     }
     parseValueFromString(text) {
         if (!text || text.trim().length === 0) {
@@ -2345,6 +2466,15 @@ class Calendar {
             if (!this.touchUI) {
                 this.preventFocus = true;
             }
+            this.preSelectValue = this.value ? (Array.isArray(this.value) ? [...this.value] : this.value) : null;
+            this.manualInputValue = this.getFormattedValue(this.value);
+            if (this.isRangeSelection() && this.value && !this.value[1]) {
+                this.manualInputError = 'Please select end date';
+            }
+            else {
+                this.manualInputError = null;
+            }
+            this.isSaved = false;
             this.overlayVisible = true;
         }
     }
@@ -2533,6 +2663,18 @@ class Calendar {
     getDateFormat() {
         return this.dateFormat || this.getTranslation('dateFormat');
     }
+    getInputMask() {
+        let format = this.getDateFormat();
+        if (!format)
+            return '';
+        // Replace d, m, h, s, etc. with 9 for the mask
+        // Specifically handle 'yy' to always expect 4 digits (yyyy)
+        let mask = format.replace(/[dmhMsH]/g, '9').replace(/yy/g, '9999');
+        if (this.isRangeSelection()) {
+            return `${mask} ${this.rangeSeparator} ${mask}`;
+        }
+        return mask;
+    }
     getFirstDateOfWeek() {
         return this._firstDayOfWeek || this.getTranslation(TranslationKeys.FIRST_DAY_OF_WEEK);
     }
@@ -2832,10 +2974,15 @@ class Calendar {
         this.onTodayClick.emit(date);
     }
     onClearButtonClick(event) {
+        this.value = null;
+        this.preSelectValue = null;
+        this.manualInputValue = '';
+        this.manualInputError = null;
         this.updateModel(null);
         this.updateInputfield();
-        this.hideOverlay();
+        this.updateUI();
         this.onClearClick.emit(event);
+        this.cd.markForCheck();
     }
     onBackButtonClick(event) {
         if (this.currentView == 'year')
@@ -2933,7 +3080,7 @@ class Calendar {
         }
     }
     isOutsideClicked(event) {
-        return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        return !(this.containerViewChild?.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.containerViewChild?.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
     }
     isNavIconClicked(event) {
         return (DomHandler.hasClass(event.target, 'cax-datepicker-prev') ||
@@ -2951,6 +3098,10 @@ class Calendar {
         if (this.mask) {
             this.destroyMask();
         }
+        if (!this.isSaved) {
+            this.value = this.preSelectValue;
+            this.updateUI();
+        }
         this.unbindDocumentClickListener();
         this.unbindDocumentResizeListener();
         this.unbindScrollListener();
@@ -2972,19 +3123,149 @@ class Calendar {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    onInlineSave(event) {
-        this.onInlineSaved.emit(this.value);
+    onDateSave(event) {
+        if (this.manualInputError) {
+            return;
+        }
+        this.isSaved = true;
+        this.updateModel(this.value);
+        this.updateInputfield();
+        this.onDateSaved.emit(this.value);
+        this.hideOverlay();
     }
-    onInlineCancel() {
-        // Revert to original value if needed
-        if (this.originalValue) {
-            this.value = new Date(this.originalValue);
-            this.updateFormattedInlineDate();
+    onManualInput(event) {
+        let val = event.target.value;
+        const baseDateFormat = this.getDateFormat();
+        const baseMask = baseDateFormat.replace(/[dmhMsH]/g, '9').replace(/yy/g, '9999');
+        if (val) {
+            const rawDigits = val.replace(/\D/g, '');
+            let maskedValue = '';
+            let rawIdx = 0;
+            if (this.isMultipleSelection()) {
+                const dateDigitsLen = baseMask.replace(/[^9]/g, '').length;
+                const numDates = Math.ceil(rawDigits.length / dateDigitsLen);
+                for (let n = 0; n < numDates; n++) {
+                    if (n > 0)
+                        maskedValue += this.multipleSeparator + ' ';
+                    for (let i = 0; i < baseMask.length && rawIdx < rawDigits.length; i++) {
+                        if (baseMask[i] === '9') {
+                            maskedValue += rawDigits[rawIdx++];
+                        }
+                        else {
+                            maskedValue += baseMask[i];
+                        }
+                    }
+                }
+            }
+            else if (this.isRangeSelection()) {
+                const fullMask = `${baseMask} ${this.rangeSeparator} ${baseMask}`;
+                for (let i = 0; i < fullMask.length && rawIdx < rawDigits.length; i++) {
+                    if (fullMask[i] === '9') {
+                        maskedValue += rawDigits[rawIdx++];
+                    }
+                    else {
+                        maskedValue += fullMask[i];
+                    }
+                }
+            }
+            else {
+                for (let i = 0; i < baseMask.length && rawIdx < rawDigits.length; i++) {
+                    if (baseMask[i] === '9') {
+                        maskedValue += rawDigits[rawIdx++];
+                    }
+                    else {
+                        maskedValue += baseMask[i];
+                    }
+                }
+            }
+            val = maskedValue;
+            event.target.value = val;
+        }
+        this.manualInputValue = val;
+        if (!val || val.trim().length === 0) {
+            this.value = null;
+            this.manualInputError = null;
+            this.updateUI();
+            this.cd.markForCheck();
+            return;
+        }
+        this.preventFocus = true;
+        try {
+            const parsedValue = this.parseValueFromString(val);
+            if (this.isValidSelection(parsedValue)) {
+                this.value = parsedValue;
+                if (this.isRangeSelection() && (!this.value || this.value[1] == null)) {
+                    this.manualInputError = 'Please enter end date';
+                }
+                else {
+                    this.manualInputError = null;
+                }
+                this.updateUI();
+            }
+            else {
+                // If invalid selection, try to keep valid parts for highlights
+                if (this.isRangeSelection() && Array.isArray(parsedValue) && parsedValue.length > 0) {
+                    if (this.isValidDate(parsedValue[0])) {
+                        this.value = [parsedValue[0], null];
+                    }
+                    else {
+                        this.value = null;
+                    }
+                }
+                else if (this.isMultipleSelection() && Array.isArray(parsedValue)) {
+                    this.value = parsedValue.filter((d) => this.isValidDate(d));
+                }
+                else {
+                    this.value = null;
+                }
+                this.manualInputError = 'Invalid date selection';
+                this.updateUI();
+            }
         }
-        this.onInlineCancelled.emit();
+        catch (err) {
+            // Partial input or formatting error - try to preserve valid parts
+            if (this.isRangeSelection()) {
+                const tokens = val.split(' ' + this.rangeSeparator + ' ');
+                try {
+                    const firstDate = this.parseDateTime(tokens[0].trim());
+                    if (this.isValidDate(firstDate)) {
+                        this.value = [firstDate, null];
+                        this.manualInputError = 'Please enter end date';
+                    }
+                    else {
+                        this.value = null;
+                        this.manualInputError = 'Invalid date format';
+                    }
+                }
+                catch {
+                    this.value = null;
+                    this.manualInputError = 'Invalid date format';
+                }
+            }
+            else if (this.isMultipleSelection()) {
+                const tokens = val.split(this.multipleSeparator);
+                const validDates = [];
+                for (let token of tokens) {
+                    try {
+                        const d = this.parseDateTime(token.trim());
+                        if (this.isValidDate(d))
+                            validDates.push(d);
+                    }
+                    catch { }
+                }
+                this.value = validDates.length > 0 ? validDates : null;
+                this.manualInputError = 'Invalid date format';
+            }
+            else {
+                this.value = null;
+                this.manualInputError = 'Invalid date format';
+            }
+            this.updateUI();
+        }
+        this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Calendar, isStandalone: true, selector: "cax-calendar", inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: ["inline", "inline", booleanAttribute], showOtherMonths: ["showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: ["selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: ["readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: ["monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: ["yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: ["timeOnly", "timeOnly", booleanAttribute], stepYearPicker: ["stepYearPicker", "stepYearPicker", numberAttribute], stepHour: ["stepHour", "stepHour", numberAttribute], stepMinute: ["stepMinute", "stepMinute", numberAttribute], stepSecond: ["stepSecond", "stepSecond", numberAttribute], showSeconds: ["showSeconds", "showSeconds", booleanAttribute], required: ["required", "required", booleanAttribute], showOnFocus: ["showOnFocus", "showOnFocus", booleanAttribute], showWeek: ["showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: ["showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: ["maxDateCount", "maxDateCount", numberAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: ["keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: ["hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: ["touchUI", "touchUI", booleanAttribute], labelText: "labelText", timeSeparator: "timeSeparator", leftIcon: "leftIcon", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onInlineSaved: "onInlineSaved", onInlineCancelled: "onInlineCancelled", onShow: "onShow" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focus", "class.cax-calendar-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-calendar-main-label': labelText}\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n</div>\r\n<span\r\n    #container\r\n    [ngClass]=\"{\r\n                'cax-calendar': true,\r\n                'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\r\n                'cax-input-icon-right': showIcon && iconDisplay === 'input',\r\n                'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\r\n                'cax-calendar-timeonly': timeOnly,\r\n                'cax-calendar-disabled': disabled,\r\n                'cax-focus': focus || overlayVisible\r\n            }\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n>\r\n    <ng-template [ngIf]=\"!inline\">\r\n        <input\r\n            #inputfield\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.name]=\"name\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-required]=\"required\"\r\n            aria-autocomplete=\"none\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [value]=\"inputFieldValue\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (keydown)=\"onInputKeydown($event)\"\r\n            (click)=\"onInputClick()\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [readonly]=\"readonlyInput\"\r\n            (input)=\"onUserInput($event)\"\r\n            [ngStyle]=\"inputStyle\"\r\n            [class]=\"inputStyleClass\"\r\n            [placeholder]=\"placeholder || ''\"\r\n            [disabled]=\"disabled\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.inputmode]=\"touchUI ? 'off' : null\"\r\n            [ngClass]=\"inputClass\"\r\n            autocomplete=\"off\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n        <ng-container *ngIf=\"showClear && !disabled && value != null\">\r\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear()\" />\r\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear()\">\r\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n        <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"iconButtonAriaLabel\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            caxButton\r\n            caxRipple\r\n            *ngIf=\"showIcon && iconDisplay === 'button'\"\r\n            (click)=\"onButtonClick($event, inputfield)\"\r\n            class=\"cax-datepicker-trigger cax-button-icon-only\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"0\"\r\n        >\r\n            <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\r\n            <ng-container *ngIf=\"!icon\">\r\n                <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\" ></i>\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n            <i class=\"cax cax-calendar-icon\"\r\n                (click)=\"onButtonClick($event)\"\r\n                *ngIf=\"!inputIconTemplate\"\r\n                [ngClass]=\"{\r\n                            'cax-datepicker-icon': showOnFocus\r\n                        }\"\r\n            ></i>\r\n            <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n           <i class=\"cax cax-alt-arrow-down cax-downarrow\"></i>\r\n        </ng-container>\r\n    \r\n    <div\r\n        #contentWrapper\r\n        [attr.id]=\"panelId\"\r\n        [class]=\"panelStyleClass\"\r\n        [ngStyle]=\"panelStyle\"\r\n        [ngClass]=\"{\r\n                    'cax-datepicker cax-component': true,\r\n                    'cax-datepicker-inline': inline,\r\n                    'cax-disabled': disabled,\r\n                    'cax-datepicker-timeonly': timeOnly,\r\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\r\n                    'cax-datepicker-monthpicker': view === 'month',\r\n                    'cax-datepicker-touch-ui': touchUI\r\n                }\"\r\n        [@overlayAnimation]=\"\r\n                    touchUI\r\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                \"\r\n        [attr.aria-label]=\"getTranslation('chooseDate')\"\r\n        [attr.role]=\"inline ? null : 'dialog'\"\r\n        [attr.aria-modal]=\"inline ? null : 'true'\"\r\n        [@.disabled]=\"inline === true\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\r\n        (click)=\"onOverlayClick($event)\"\r\n        *ngIf=\"inline || overlayVisible\"\r\n    >\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        <ng-container *ngIf=\"!timeOnly\">\r\n            <div class=\"cax-datepicker-group-container\">\r\n                <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\r\n                    <div class=\"cax-datepicker-header\">\r\n                        <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\r\n                            <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\r\n                            <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                        <div class=\"cax-datepicker-title\">\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToMonthView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView === 'date'\"\r\n                                class=\"cax-datepicker-month cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\r\n                            >\r\n                                {{ getMonthName(month.month) }}\r\n                            </button>\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToYearView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView !== 'year'\"\r\n                                class=\"cax-datepicker-year cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"getTranslation('chooseYear')\"\r\n                            >\r\n                                {{ getYear(month) }}\r\n                            </button>\r\n                            <span class=\"cax-datepicker-decade\" *ngIf=\"currentView === 'year'\">\r\n                                Year\r\n                                <!-- <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\r\n                                <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container> -->\r\n                            </span>\r\n                        </div>\r\n                        <button\r\n                            (keydown)=\"onContainerButtonKeydown($event)\"\r\n                            class=\"cax-datepicker-next cax-link\"\r\n                            (click)=\"onNextButtonClick($event)\"\r\n                            [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\r\n                            type=\"button\"\r\n                            [attr.aria-label]=\"nextIconAriaLabel\"\r\n                            caxRipple\r\n                        >\r\n                            <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\r\n                            <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\r\n                        <table class=\"cax-datepicker-calendar\" role=\"grid\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\r\n                                        <span>{{ getTranslation('weekHeader') }}</span>\r\n                                    </th>\r\n                                    <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\r\n                                        <span>{{ weekDay }}</span>\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr *ngFor=\"let week of month.dates; let j = index\">\r\n                                    <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\r\n                                        <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\r\n                                    </td>\r\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\r\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\r\n                                            <span\r\n                                                [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable }\"\r\n                                                (click)=\"onDateSelect($event, date)\"\r\n                                                draggable=\"false\"\r\n                                                [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\r\n                                                (keydown)=\"onDateCellKeydown($event, date, i)\"\r\n                                                caxRipple\r\n                                            >\r\n                                                <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\r\n                                                <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\r\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"!date.selectable\">\r\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                            </span>\r\n                                            <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\r\n                                        </ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\r\n                <span\r\n                    *ngFor=\"let m of monthPickerValues(); let i = index\"\r\n                    (click)=\"onMonthSelect($event, i)\"\r\n                    (keydown)=\"onMonthCellKeydown($event, i)\"\r\n                    class=\"cax-monthpicker-month\"\r\n                    [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ m }}\r\n                    <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\r\n                </span>\r\n            </div>\r\n            <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\r\n                <span\r\n                    *ngFor=\"let y of yearPickerValues()\"\r\n                    (click)=\"onYearSelect($event, y)\"\r\n                    (keydown)=\"onYearCellKeydown($event, y)\"\r\n                    class=\"cax-yearpicker-year\"\r\n                    [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ y }}\r\n                    <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\r\n                </span>\r\n            </div>\r\n        </ng-container>\r\n        <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\r\n            <div class=\"cax-hour-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementHour($event)\"\r\n                    (keydown.space)=\"incrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementHour($event)\"\r\n                    (keydown.space)=\"decrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-minute-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementMinute($event)\"\r\n                    (keydown.space)=\"incrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementMinute($event)\"\r\n                    (keydown.space)=\"decrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\" *ngIf=\"showSeconds\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementSecond($event)\"\r\n                    (keydown.space)=\"incrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementSecond($event)\"\r\n                    (keydown.space)=\"decrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span>{{ pm ? 'PM' : 'AM' }}</span>\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\r\n            <cax-button\r\n                *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\r\n                type=\"button\"\r\n                [link]=\"true\"\r\n                [label]=\"getTranslation('clear')\"\r\n                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                (onClick)=\"onClearButtonClick($event)\"\r\n                caxRipple\r\n            ></cax-button>\r\n            <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\r\n        </div>\r\n         <!-- For the inline  -->\r\n        <div class=\"cax-datepicker-inline-actions\" *ngIf=\"inline\">\r\n                        <cax-button\r\n                        [label]=\"'Cancel'\"\r\n                        [severity]=\"'secondary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineCancel()\">\r\n                        </cax-button>\r\n            <div class=\"left-side\">\r\n            <div class=\"cax-datepicker-inline-input\">\r\n                <i class=\"cax cax-calendar-minimalistic\"></i>\r\n                <input\r\n                    type=\"text\"\r\n                    [attr.id]=\"inputId\"\r\n                    [value]=\"formattedInlineDate\"\r\n                    readonly\r\n                    class=\"cax-datepicker-inline-display\"\r\n                />\r\n            </div>\r\n            <div class=\"cax-datepicker-inline-buttons\">\r\n                <cax-button\r\n                        [label]=\"'Save'\"\r\n                        [severity]=\"'Primary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineSave()\">\r\n                </cax-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n        <ng-content select=\"cax-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-calendar{position:relative;display:inline-flex;width:100%}.cax-calendar-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-calendar .cax-inputtext{flex:1 1 auto;width:1%;text-overflow:ellipsis;height:40px;padding-left:1.8rem!important;padding-right:1.8rem!important}.cax-calendar-w-btn .cax-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.cax-calendar-w-btn .cax-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.cax-fluid .cax-calendar{display:flex}.cax-fluid .cax-calendar .cax-inputtext{width:1%}.cax-calendar .cax-datepicker{min-width:100%}.cax-datepicker{width:auto;position:absolute;top:0;left:0}.cax-datepicker-inline{display:inline-block;position:static;overflow-x:auto}.cax-datepicker-header{display:flex;align-items:center;justify-content:space-between}.cax-datepicker-header .cax-datepicker-title{margin:0 auto}.cax-datepicker-prev,.cax-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group{flex:1 1 auto}.cax-datepicker-multiple-month .cax-datepicker-group-container{display:flex}.cax-datepicker table{width:100%;border-collapse:collapse}.cax-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.cax-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.cax-timepicker{display:flex;justify-content:center;align-items:center}.cax-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-timepicker>div{display:flex;align-items:center;flex-direction:column}.cax-datepicker-touch-ui,.cax-calendar .cax-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.cax-yearpicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-calendar-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-datepicker-icon{pointer-events:none}.cax-calendar-clearable{position:relative}.cax-datepicker-icon{pointer-events:none;left:1.67px;margin-top:1px!important}.cax-input-icon-left{order:-1}.cax-datepicker-inline-actions{display:flex;justify-content:space-between;margin-top:13px;padding:10px}.cax-datepicker-inline-actions .cax-datepicker-inline-input{margin-bottom:10px;position:relative;display:inline-block}.cax-datepicker-inline-actions .cax-datepicker-inline-input input{width:130px;height:32px;padding-left:2rem;border-radius:8px;font-size:14px;font-weight:500}.cax-datepicker-inline-actions .cax-datepicker-inline-input .cax-calendar-minimalistic{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none}.left-side{display:flex;justify-content:space-between;gap:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i3.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4.Ripple, selector: "[caxRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: Calendar, isStandalone: true, selector: "cax-calendar", inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], size: "size", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: ["inline", "inline", booleanAttribute], showOtherMonths: ["showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: ["selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: ["readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: ["monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: ["yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: ["timeOnly", "timeOnly", booleanAttribute], stepYearPicker: ["stepYearPicker", "stepYearPicker", numberAttribute], stepHour: ["stepHour", "stepHour", numberAttribute], stepMinute: ["stepMinute", "stepMinute", numberAttribute], stepSecond: ["stepSecond", "stepSecond", numberAttribute], showSeconds: ["showSeconds", "showSeconds", booleanAttribute], required: ["required", "required", booleanAttribute], showOnFocus: ["showOnFocus", "showOnFocus", booleanAttribute], showWeek: ["showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: ["showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: ["maxDateCount", "maxDateCount", numberAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: ["keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: ["hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: ["touchUI", "touchUI", booleanAttribute], labelText: "labelText", helperText: "helperText", errorText: "errorText", invalid: ["invalid", "invalid", booleanAttribute], timeSeparator: "timeSeparator", leftIcon: "leftIcon", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onDateSaved: "onDateSaved", onShow: "onShow" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focus", "class.cax-calendar-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"cax-calendar-container\" [ngClass]=\"['cax-calendar-' + size]\" [ngStyle]=\"style\" [class]=\"styleClass\">\n    <div *ngIf=\"labelText\" [ngClass]=\"{'cax-calendar-main-label': labelText}\">\n        <label *ngIf=\"labelText\" [ngClass]=\"{'cax-text-action-sm-semibold': size == 'sm', 'cax-text-action-md-semibold': size == 'md', 'cax-text-action-lg-semibold': size == 'lg'}\">{{ labelText }}</label>\n    </div>\n    <span\n        #container\n        (click)=\"onButtonClick($event)\"\n        [ngClass]=\"{\n                    'cax-calendar': true,\n                    'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\n                    'cax-input-icon-right': showIcon && iconDisplay === 'input',\n                    'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\n                    'cax-calendar-timeonly': timeOnly,\n                    'cax-calendar-disabled': disabled,\n                    'cax-focus': focus || overlayVisible\n                }\"\n    >\n        <ng-template [ngIf]=\"!inline\">\n            <input\n                #inputfield\n                type=\"text\"\n                role=\"combobox\"\n                [attr.id]=\"inputId\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.aria-required]=\"required\"\n                aria-autocomplete=\"none\"\n                aria-haspopup=\"dialog\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"ariaLabel\"\n                [value]=\"inputFieldValue\"\n                (focus)=\"onInputFocus($event)\"\n                (keydown)=\"onInputKeydown($event)\"\n                (blur)=\"onInputBlur($event)\"\n                [readonly]=\"readonlyInput\"\n                (input)=\"onUserInput($event)\"\n                [ngStyle]=\"inputStyle\"\n                [class]=\"inputStyleClass\"\n                [placeholder]=\"placeholder || ''\"\n                [disabled]=\"disabled\"\n                [attr.tabindex]=\"tabindex\"\n                [attr.inputmode]=\"touchUI ? 'off' : null\"\n                [ngClass]=\"inputClass\"\n                autocomplete=\"off\"\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n                [class.cax-text-action-md-regular]=\"size === 'md'\"\n                [class.cax-text-action-lg-regular]=\"size === 'lg'\"\n            />\n            <ng-container *ngIf=\"showClear && !disabled && value != null\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear($event)\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear($event)\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n            <button\n                type=\"button\"\n                [attr.aria-label]=\"iconButtonAriaLabel\"\n                aria-haspopup=\"dialog\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n                caxButton\n                caxRipple\n                *ngIf=\"showIcon && iconDisplay === 'button'\"\n                (click)=\"onButtonClick($event, inputfield)\"\n                class=\"cax-datepicker-trigger cax-button-icon-only\"\n                [disabled]=\"disabled\"\n                tabindex=\"0\"\n            >\n                <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n                <ng-container *ngIf=\"!icon\">\n                    <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\"></i>\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n            <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n                <i\n                    class=\"cax cax-calendar-icon\"\n                    *ngIf=\"!inputIconTemplate\"\n                    [ngClass]=\"{\n                            'cax-datepicker-icon': showOnFocus\n                        }\"\n                ></i>\n                <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n            </ng-container>\n        </ng-template>\n        <ng-container>\n            <i class=\"cax cax-downarrow\" [ngClass]=\"overlayVisible ? 'cax-alt-arrow-up' : 'cax-alt-arrow-down'\"></i>\n        </ng-container>\n\n        <div\n            #contentWrapper\n            (click)=\"onOverlayClick($event)\"\n            [attr.id]=\"panelId\"\n            [class]=\"panelStyleClass\"\n            [ngStyle]=\"panelStyle\"\n            [ngClass]=\"{\n                    'cax-datepicker cax-component': true,\n                    'cax-datepicker-inline': inline,\n                    'cax-disabled': disabled,\n                    'cax-datepicker-timeonly': timeOnly,\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\n                    'cax-datepicker-monthpicker': view === 'month',\n                    'cax-datepicker-touch-ui': touchUI\n                }\"\n            [@overlayAnimation]=\"\n                    touchUI\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                \"\n            [attr.aria-label]=\"getTranslation('chooseDate')\"\n            [attr.role]=\"inline ? null : 'dialog'\"\n            [attr.aria-modal]=\"inline ? null : 'true'\"\n            [@.disabled]=\"inline === true\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\n            (click)=\"onOverlayClick($event)\"\n            *ngIf=\"inline || overlayVisible\"\n        >\n            <ng-content select=\"cax-header\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            <ng-container *ngIf=\"!timeOnly\">\n                <div class=\"cax-datepicker-group-container\">\n                    <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\n                        <!-- <div class=\"cax-datepicker-header\">\n                            <div class=\"cax-datepicker-month-selector\" *ngIf=\"view !== 'year' && view !== 'month'\">\n                                <cax-button icon=\"cax cax-alt-arrow-left\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onPrevButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-prev\"></cax-button>\n                                <div class=\"cax-datepicker-month-dropdown\" [class.cax-datepicker-dropdown-no-icon]=\"view === 'month'\" (click)=\"switchToMonthView($event)\" (keydown)=\"onContainerButtonKeydown($event)\">\n                                    <span>{{ getMonthName(month.month) }}</span>\n                                    <i *ngIf=\"currentView !== 'month' && view !== 'month'\" class=\"cax cax-alt-arrow-down\"></i>\n                                    <i *ngIf=\"currentView === 'month' && view !== 'month'\" class=\"cax cax-alt-arrow-up\"></i>\n                                </div>\n                                <cax-button icon=\"cax cax-alt-arrow-right\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onNextButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-next\"></cax-button>\n                            </div>\n                            <div class=\"cax-datepicker-year-selector\">\n                                <cax-button icon=\"cax cax-alt-arrow-left\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onPrevYearButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-prev\"></cax-button>\n                                <div class=\"cax-datepicker-year-dropdown\" [class.cax-datepicker-dropdown-no-icon]=\"view === 'year'\" (click)=\"switchToYearView($event)\" (keydown)=\"onContainerButtonKeydown($event)\">\n                                    <span>{{ getYear(month) }}</span>\n                                    <i *ngIf=\"currentView !== 'year' && view !== 'year'\" class=\"cax cax-alt-arrow-down\"></i>\n                                    <i *ngIf=\"currentView === 'year' && view !== 'year'\" class=\"cax cax-alt-arrow-up\"></i>\n                                </div>\n                                <cax-button icon=\"cax cax-alt-arrow-right\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onNextYearButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-next\"></cax-button>\n                            </div>\n                        </div> -->\n                        <div class=\"cax-datepicker-header\">\n                            <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\n                                <!-- <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" /> -->\n                                <i class=\"cax cax-alt-arrow-left cax-datepicker-prev-icon\" *ngIf=\"!previousIconTemplate\"></i>\n                                <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\n                                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n                                </span>\n                            </button>\n                            <div class=\"cax-datepicker-title\">\n                                <button\n                                    type=\"button\"\n                                    (click)=\"switchToMonthView($event)\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    *ngIf=\"currentView === 'date'\"\n                                    class=\"cax-datepicker-month cax-link cax-text-action-lg-link-semibold\"\n                                    [disabled]=\"switchViewButtonDisabled()\"\n                                    [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                                >\n                                    {{ getMonthName(month.month) }}\n                                </button>\n                                <button\n                                    type=\"button\"\n                                    (click)=\"switchToYearView($event)\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    *ngIf=\"currentView !== 'year'\"\n                                    class=\"cax-datepicker-year cax-link cax-text-action-lg-link-semibold\"\n                                    [disabled]=\"switchViewButtonDisabled()\"\n                                    [attr.aria-label]=\"getTranslation('chooseYear')\"\n                                >\n                                    {{ getYear(month) }}\n                                </button>\n                                <span class=\"cax-datepicker-decade cax-text-action-lg-link-semibold\" *ngIf=\"currentView === 'year'\">\n                                    <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                    <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                                </span>\n                            </div>\n                            <button\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                class=\"cax-datepicker-next cax-link\"\n                                (click)=\"onNextButtonClick($event)\"\n                                [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\n                                type=\"button\"\n                                [attr.aria-label]=\"nextIconAriaLabel\"\n                                caxRipple\n                            >\n                                <!-- <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" /> -->\n                                <i class=\"cax cax-alt-arrow-right cax-datepicker-next-icon\" *ngIf=\"!nextIconTemplate\"></i>\n                                <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\n                                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n                                </span>\n                            </button>\n                        </div>\n\n                        <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\n                            <table class=\"cax-datepicker-calendar\" role=\"grid\">\n                                <thead>\n                                    <tr>\n                                        <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\n                                            <span>{{ getTranslation('weekHeader') }}</span>\n                                        </th>\n                                        <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                            <span>{{ weekDay }}</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let week of month.dates; let j = index\">\n                                        <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\n                                            <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\n                                        </td>\n                                        <td class=\"cax-text-action-lg-semibold\" *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <span\n                                                    [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable, 'cax-datepicker-range-start': isRangeStart(date) && isRangeSelectionCompleted(), 'cax-datepicker-range-end': isRangeEnd(date) && isRangeSelectionCompleted(), 'cax-datepicker-range-between': isRangeBetween(date) }\"\n                                                    (click)=\"onDateSelect($event, date)\"\n                                                    draggable=\"false\"\n                                                    [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                                                    (keydown)=\"onDateCellKeydown($event, date, i)\"\n                                                    caxRipple\n                                                >\n                                                    <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\n                                                    <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\n                                                    </ng-container>\n                                                    <ng-container *ngIf=\"!date.selectable\">\n                                                        <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                                                    </ng-container>\n                                                </span>\n                                                <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\n                                            </ng-container>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\n                    <span\n                        *ngFor=\"let m of monthPickerValues(); let i = index\"\n                        (click)=\"onMonthSelect($event, i)\"\n                        (keydown)=\"onMonthCellKeydown($event, i)\"\n                        class=\"cax-monthpicker-month cax-text-action-lg-semibold\"\n                        [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\n                        caxRipple\n                    >\n                        {{ m }}\n                        <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\n                    </span>\n                </div>\n                <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\n                    <span\n                        *ngFor=\"let y of yearPickerValues()\"\n                        (click)=\"onYearSelect($event, y)\"\n                        (keydown)=\"onYearCellKeydown($event, y)\"\n                        class=\"cax-yearpicker-year cax-text-action-lg-semibold\"\n                        [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\n                        caxRipple\n                    >\n                        {{ y }}\n                        <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n                <div class=\"cax-hour-picker\">\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"incrementHour($event)\"\n                        (keydown.space)=\"incrementHour($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('nextHour')\"\n                        caxRipple\n                    >\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"decrementHour($event)\"\n                        (keydown.space)=\"decrementHour($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('prevHour')\"\n                        caxRipple\n                    >\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n                <div class=\"cax-separator\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div class=\"cax-minute-picker\">\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"incrementMinute($event)\"\n                        (keydown.space)=\"incrementMinute($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('nextMinute')\"\n                        caxRipple\n                    >\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"decrementMinute($event)\"\n                        (keydown.space)=\"decrementMinute($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('prevMinute')\"\n                        caxRipple\n                    >\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n                <div class=\"cax-separator\" *ngIf=\"showSeconds\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"incrementSecond($event)\"\n                        (keydown.space)=\"incrementSecond($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('nextSecond')\"\n                        caxRipple\n                    >\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"decrementSecond($event)\"\n                        (keydown.space)=\"decrementSecond($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('prevSecond')\"\n                        caxRipple\n                    >\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n                <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\n                    <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span>{{ pm ? 'PM' : 'AM' }}</span>\n                    <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n            </div>\n            <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                <cax-button\n                    *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\n                    type=\"button\"\n                    [link]=\"true\"\n                    [label]=\"getTranslation('clear')\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (onClick)=\"onClearButtonClick($event)\"\n                    caxRipple\n                ></cax-button>\n                <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\n            </div>\n\n            <div class=\"cax-datepicker-inline-actions\">\n                <div class=\"cax-datepicker-manual-input\">\n                    <span class=\"cax-input-icon-left\">\n                        <i class=\"cax cax-calendar-icon\"></i>\n                        <input\n                            type=\"text\"\n                            class=\"cax-inputtext cax-text-action-sm-medium\"\n                            [ngClass]=\"{'cax-invalid': manualInputError}\"\n                            [placeholder]=\"getDateFormat() + (isRangeSelection() ? ' - ' + getDateFormat() : '')\"\n                            [value]=\"manualInputValue\"\n                            (input)=\"onManualInput($event)\"\n                            [disabled]=\"disabled\"\n                        />\n                    </span>\n                    <small *ngIf=\"manualInputError\" class=\"cax-error cax-text-action-sm-medium\">{{ manualInputError }}</small>\n                </div>\n                <!-- Similar to input mask -->\n                <div class=\"cax-datepicker-inline-buttons\">\n                    <cax-button [label]=\"'Clear'\" [severity]=\"'secondary'\" [size]=\"'sm'\" outlined=\"true\" (onClick)=\"onClearButtonClick($event)\"> </cax-button>\n                    <cax-button [label]=\"'Save'\" [size]=\"'sm'\" outlined=\"true\" (onClick)=\"onDateSave($event)\" [disabled]=\"!!manualInputError\"> </cax-button>\n                </div>\n            </div>\n            <ng-content select=\"cax-footer\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n    </span>\n\n    <small *ngIf=\"invalid\" class=\"cax-error\" [ngClass]=\"{'disabled-opacity': disabled, 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\"> {{ errorText }} </small>\n    <small *ngIf=\"helperText && !invalid\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled, 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\">\n        {{ helperText }}\n    </small>\n</div>\n", styles: ["@layer cax{.cax-calendar-container{display:flex;flex-direction:column;gap:8px;width:216px}.cax-calendar{position:relative;display:inline-flex}.cax-calendar-main-label{font-weight:600;font-size:14px;line-height:20px}.cax-calendar .cax-inputtext{height:40px;padding:0 38px;cursor:pointer}.cax-calendar-w-btn .cax-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.cax-calendar-w-btn .cax-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.cax-downarrow{position:absolute;font-size:20px;top:25%!important;right:10px;cursor:pointer;pointer-events:none}.cax-fluid .cax-calendar{display:flex}.cax-calendar .cax-datepicker{width:360px;min-width:360px}.cax-datepicker{width:auto;position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:16px}.cax-datepicker .cax-datepicker-group{display:flex;flex-direction:column;gap:16px}.cax-datepicker-inline{position:relative}.cax-datepicker-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.cax-datepicker-header .cax-datepicker-prev,.cax-datepicker-header .cax-datepicker-next{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.cax-datepicker-header .cax-datepicker-prev-icon,.cax-datepicker-header .cax-datepicker-next-icon{font-size:24px}.cax-datepicker-header .cax-datepicker-title{display:flex;gap:4px}.cax-datepicker-header .cax-datepicker-title .cax-datepicker-month,.cax-datepicker-header .cax-datepicker-title .cax-datepicker-year,.cax-datepicker-header .cax-datepicker-title .cax-datepicker-decade{padding:8px 12px;font-size:16px;font-weight:600;text-decoration:underline}.cax-datepicker-header .cax-datepicker-month-selector,.cax-datepicker-header .cax-datepicker-year-selector{display:flex;align-items:center}.cax-datepicker-header .cax-datepicker-month-selector .cax-button .cax-button-icon-center,.cax-datepicker-header .cax-datepicker-year-selector .cax-button .cax-button-icon-center{font-size:16px!important;font-weight:500!important}.cax-datepicker-header .cax-datepicker-month-selector .cax-button:focus,.cax-datepicker-header .cax-datepicker-year-selector .cax-button:focus{outline:none!important}.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-month-dropdown,.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-year-dropdown,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-month-dropdown,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-year-dropdown{display:flex;align-items:center;font-weight:600;margin-left:12px;cursor:pointer}.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-month-dropdown.cax-datepicker-dropdown-no-icon,.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-year-dropdown.cax-datepicker-dropdown-no-icon,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-month-dropdown.cax-datepicker-dropdown-no-icon,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-year-dropdown.cax-datepicker-dropdown-no-icon{margin-right:12px}.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-month-dropdown i,.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-year-dropdown i,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-month-dropdown i,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-year-dropdown i{font-size:16px;height:32px;width:32px;display:flex;align-items:center;justify-content:center}.cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group{flex:1 1 auto}.cax-datepicker-multiple-month .cax-datepicker-group-container{display:flex}.cax-datepicker table{width:100%;border-collapse:collapse;border-spacing:0}.cax-datepicker td{padding:0}.cax-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;overflow:visible;position:relative;margin:0 auto;width:48px;height:48px}.cax-datepicker td>span.cax-datepicker-range-between{background:var(--primary-75)!important;border-radius:0!important;color:var(--neutral-900)!important;width:100%!important}.cax-datepicker td>span.cax-datepicker-range-start.cax-highlight{background:transparent!important;width:100%!important;z-index:1}.cax-datepicker td>span.cax-datepicker-range-start.cax-highlight:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;background:var(--primary-75);z-index:-1}.cax-datepicker td>span.cax-datepicker-range-start.cax-highlight:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:48px;height:48px;background:var(--primary-500);border-radius:50%;z-index:-1}.cax-datepicker td>span.cax-datepicker-range-end.cax-highlight{background:transparent!important;width:100%!important;z-index:1}.cax-datepicker td>span.cax-datepicker-range-end.cax-highlight:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;background:var(--primary-75);z-index:-1}.cax-datepicker td>span.cax-datepicker-range-end.cax-highlight:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:48px;height:48px;background:var(--primary-500);border-radius:50%;z-index:-1}.cax-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.cax-timepicker{display:flex;justify-content:center;align-items:center}.cax-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-timepicker>div{display:flex;align-items:center;flex-direction:column}.cax-datepicker-touch-ui,.cax-calendar .cax-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.cax-calendar-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-calendar-clearable{position:relative}.cax-datepicker-icon{pointer-events:none;position:absolute;left:10px;font-size:20px;top:25%!important}.cax-datepicker-inline-actions{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 16px 0}.cax-datepicker-inline-actions .cax-datepicker-manual-input{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;margin-right:12px}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left{width:100%;position:relative;display:flex;align-items:center}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left i{position:absolute;left:8px;top:25%!important;font-size:16px;color:var(--neutral-900)}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left .cax-inputtext{width:100%;height:32px;padding:4px 8px 4px 30px;font-size:12px}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left .cax-inputtext.cax-invalid{border-color:var(--error-600)}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left .cax-inputtext.cax-invalid:hover{border-color:var(--error-750);box-shadow:0 0 0 1px var(--error-750)}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-error{font-size:11px;color:var(--error-600)}.cax-datepicker-inline-actions .cax-datepicker-inline-buttons{margin-left:auto;display:flex;align-items:center;gap:8px}.left-side{display:flex;justify-content:space-between;gap:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i3.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4.Ripple, selector: "[caxRipple]" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }], animations: [
             trigger('overlayAnimation', [
                 state('visibleTouchUI', style({
                     transform: 'translate(-50%,-50%)',
@@ -3002,7 +3283,7 @@ class Calendar {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'cax-calendar', animations: [
                         trigger('overlayAnimation', [
@@ -3025,7 +3306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': 'focus',
                         '[class.cax-calendar-clearable]': 'showClear && !disabled'
-                    }, providers: [CALENDAR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocusModule, ArrowDownIcon], template: "<div [ngClass]=\"{'cax-calendar-main-label': labelText}\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n</div>\r\n<span\r\n    #container\r\n    [ngClass]=\"{\r\n                'cax-calendar': true,\r\n                'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\r\n                'cax-input-icon-right': showIcon && iconDisplay === 'input',\r\n                'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\r\n                'cax-calendar-timeonly': timeOnly,\r\n                'cax-calendar-disabled': disabled,\r\n                'cax-focus': focus || overlayVisible\r\n            }\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n>\r\n    <ng-template [ngIf]=\"!inline\">\r\n        <input\r\n            #inputfield\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.name]=\"name\"\r\n            [attr.required]=\"required\"\r\n            [attr.aria-required]=\"required\"\r\n            aria-autocomplete=\"none\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [value]=\"inputFieldValue\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (keydown)=\"onInputKeydown($event)\"\r\n            (click)=\"onInputClick()\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            [readonly]=\"readonlyInput\"\r\n            (input)=\"onUserInput($event)\"\r\n            [ngStyle]=\"inputStyle\"\r\n            [class]=\"inputStyleClass\"\r\n            [placeholder]=\"placeholder || ''\"\r\n            [disabled]=\"disabled\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.inputmode]=\"touchUI ? 'off' : null\"\r\n            [ngClass]=\"inputClass\"\r\n            autocomplete=\"off\"\r\n            caxAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n        <ng-container *ngIf=\"showClear && !disabled && value != null\">\r\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear()\" />\r\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear()\">\r\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n        <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"iconButtonAriaLabel\"\r\n            aria-haspopup=\"dialog\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\r\n            caxButton\r\n            caxRipple\r\n            *ngIf=\"showIcon && iconDisplay === 'button'\"\r\n            (click)=\"onButtonClick($event, inputfield)\"\r\n            class=\"cax-datepicker-trigger cax-button-icon-only\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"0\"\r\n        >\r\n            <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\r\n            <ng-container *ngIf=\"!icon\">\r\n                <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\" ></i>\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n            <i class=\"cax cax-calendar-icon\"\r\n                (click)=\"onButtonClick($event)\"\r\n                *ngIf=\"!inputIconTemplate\"\r\n                [ngClass]=\"{\r\n                            'cax-datepicker-icon': showOnFocus\r\n                        }\"\r\n            ></i>\r\n            <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\r\n           <i class=\"cax cax-alt-arrow-down cax-downarrow\"></i>\r\n        </ng-container>\r\n    \r\n    <div\r\n        #contentWrapper\r\n        [attr.id]=\"panelId\"\r\n        [class]=\"panelStyleClass\"\r\n        [ngStyle]=\"panelStyle\"\r\n        [ngClass]=\"{\r\n                    'cax-datepicker cax-component': true,\r\n                    'cax-datepicker-inline': inline,\r\n                    'cax-disabled': disabled,\r\n                    'cax-datepicker-timeonly': timeOnly,\r\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\r\n                    'cax-datepicker-monthpicker': view === 'month',\r\n                    'cax-datepicker-touch-ui': touchUI\r\n                }\"\r\n        [@overlayAnimation]=\"\r\n                    touchUI\r\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\r\n                \"\r\n        [attr.aria-label]=\"getTranslation('chooseDate')\"\r\n        [attr.role]=\"inline ? null : 'dialog'\"\r\n        [attr.aria-modal]=\"inline ? null : 'true'\"\r\n        [@.disabled]=\"inline === true\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\r\n        (click)=\"onOverlayClick($event)\"\r\n        *ngIf=\"inline || overlayVisible\"\r\n    >\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        <ng-container *ngIf=\"!timeOnly\">\r\n            <div class=\"cax-datepicker-group-container\">\r\n                <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\r\n                    <div class=\"cax-datepicker-header\">\r\n                        <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\r\n                            <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\r\n                            <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                        <div class=\"cax-datepicker-title\">\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToMonthView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView === 'date'\"\r\n                                class=\"cax-datepicker-month cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\r\n                            >\r\n                                {{ getMonthName(month.month) }}\r\n                            </button>\r\n                            <button\r\n                                type=\"button\"\r\n                                (click)=\"switchToYearView($event)\"\r\n                                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                                *ngIf=\"currentView !== 'year'\"\r\n                                class=\"cax-datepicker-year cax-link\"\r\n                                [disabled]=\"switchViewButtonDisabled()\"\r\n                                [attr.aria-label]=\"getTranslation('chooseYear')\"\r\n                            >\r\n                                {{ getYear(month) }}\r\n                            </button>\r\n                            <span class=\"cax-datepicker-decade\" *ngIf=\"currentView === 'year'\">\r\n                                Year\r\n                                <!-- <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\r\n                                <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container> -->\r\n                            </span>\r\n                        </div>\r\n                        <button\r\n                            (keydown)=\"onContainerButtonKeydown($event)\"\r\n                            class=\"cax-datepicker-next cax-link\"\r\n                            (click)=\"onNextButtonClick($event)\"\r\n                            [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\r\n                            type=\"button\"\r\n                            [attr.aria-label]=\"nextIconAriaLabel\"\r\n                            caxRipple\r\n                        >\r\n                            <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\r\n                            <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                            </span>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\r\n                        <table class=\"cax-datepicker-calendar\" role=\"grid\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\r\n                                        <span>{{ getTranslation('weekHeader') }}</span>\r\n                                    </th>\r\n                                    <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\r\n                                        <span>{{ weekDay }}</span>\r\n                                    </th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr *ngFor=\"let week of month.dates; let j = index\">\r\n                                    <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\r\n                                        <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\r\n                                    </td>\r\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\r\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\r\n                                            <span\r\n                                                [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable }\"\r\n                                                (click)=\"onDateSelect($event, date)\"\r\n                                                draggable=\"false\"\r\n                                                [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\r\n                                                (keydown)=\"onDateCellKeydown($event, date, i)\"\r\n                                                caxRipple\r\n                                            >\r\n                                                <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\r\n                                                <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\r\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                                <ng-container *ngIf=\"!date.selectable\">\r\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\r\n                                                </ng-container>\r\n                                            </span>\r\n                                            <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\r\n                                        </ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\r\n                <span\r\n                    *ngFor=\"let m of monthPickerValues(); let i = index\"\r\n                    (click)=\"onMonthSelect($event, i)\"\r\n                    (keydown)=\"onMonthCellKeydown($event, i)\"\r\n                    class=\"cax-monthpicker-month\"\r\n                    [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ m }}\r\n                    <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\r\n                </span>\r\n            </div>\r\n            <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\r\n                <span\r\n                    *ngFor=\"let y of yearPickerValues()\"\r\n                    (click)=\"onYearSelect($event, y)\"\r\n                    (keydown)=\"onYearCellKeydown($event, y)\"\r\n                    class=\"cax-yearpicker-year\"\r\n                    [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\r\n                    caxRipple\r\n                >\r\n                    {{ y }}\r\n                    <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\r\n                </span>\r\n            </div>\r\n        </ng-container>\r\n        <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\r\n            <div class=\"cax-hour-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementHour($event)\"\r\n                    (keydown.space)=\"incrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementHour($event)\"\r\n                    (keydown.space)=\"decrementHour($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevHour')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-minute-picker\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementMinute($event)\"\r\n                    (keydown.space)=\"incrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementMinute($event)\"\r\n                    (keydown.space)=\"decrementMinute($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevMinute')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-separator\" *ngIf=\"showSeconds\">\r\n                <span>{{ timeSeparator }}</span>\r\n            </div>\r\n            <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"incrementSecond($event)\"\r\n                    (keydown.space)=\"incrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('nextSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\r\n                <button\r\n                    class=\"cax-link\"\r\n                    type=\"button\"\r\n                    (keydown)=\"onContainerButtonKeydown($event)\"\r\n                    (keydown.enter)=\"decrementSecond($event)\"\r\n                    (keydown.space)=\"decrementSecond($event)\"\r\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\r\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\r\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\r\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\r\n                    [attr.aria-label]=\"getTranslation('prevSecond')\"\r\n                    caxRipple\r\n                >\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n            <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\r\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\r\n                </button>\r\n                <span>{{ pm ? 'PM' : 'AM' }}</span>\r\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\r\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\r\n            <cax-button\r\n                *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\r\n                type=\"button\"\r\n                [link]=\"true\"\r\n                [label]=\"getTranslation('clear')\"\r\n                (keydown)=\"onContainerButtonKeydown($event)\"\r\n                (onClick)=\"onClearButtonClick($event)\"\r\n                caxRipple\r\n            ></cax-button>\r\n            <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\r\n        </div>\r\n         <!-- For the inline  -->\r\n        <div class=\"cax-datepicker-inline-actions\" *ngIf=\"inline\">\r\n                        <cax-button\r\n                        [label]=\"'Cancel'\"\r\n                        [severity]=\"'secondary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineCancel()\">\r\n                        </cax-button>\r\n            <div class=\"left-side\">\r\n            <div class=\"cax-datepicker-inline-input\">\r\n                <i class=\"cax cax-calendar-minimalistic\"></i>\r\n                <input\r\n                    type=\"text\"\r\n                    [attr.id]=\"inputId\"\r\n                    [value]=\"formattedInlineDate\"\r\n                    readonly\r\n                    class=\"cax-datepicker-inline-display\"\r\n                />\r\n            </div>\r\n            <div class=\"cax-datepicker-inline-buttons\">\r\n                <cax-button\r\n                        [label]=\"'Save'\"\r\n                        [severity]=\"'Primary'\"\r\n                        [size]=\"'small'\"\r\n                        (click)=\"onInlineSave()\">\r\n                </cax-button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n        <ng-content select=\"cax-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-calendar{position:relative;display:inline-flex;width:100%}.cax-calendar-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-calendar .cax-inputtext{flex:1 1 auto;width:1%;text-overflow:ellipsis;height:40px;padding-left:1.8rem!important;padding-right:1.8rem!important}.cax-calendar-w-btn .cax-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.cax-calendar-w-btn .cax-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.cax-fluid .cax-calendar{display:flex}.cax-fluid .cax-calendar .cax-inputtext{width:1%}.cax-calendar .cax-datepicker{min-width:100%}.cax-datepicker{width:auto;position:absolute;top:0;left:0}.cax-datepicker-inline{display:inline-block;position:static;overflow-x:auto}.cax-datepicker-header{display:flex;align-items:center;justify-content:space-between}.cax-datepicker-header .cax-datepicker-title{margin:0 auto}.cax-datepicker-prev,.cax-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group{flex:1 1 auto}.cax-datepicker-multiple-month .cax-datepicker-group-container{display:flex}.cax-datepicker table{width:100%;border-collapse:collapse}.cax-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;overflow:hidden;position:relative}.cax-monthpicker-month{width:33.3%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.cax-timepicker{display:flex;justify-content:center;align-items:center}.cax-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-timepicker>div{display:flex;align-items:center;flex-direction:column}.cax-datepicker-touch-ui,.cax-calendar .cax-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.cax-yearpicker-year{width:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-calendar-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-datepicker-icon{pointer-events:none}.cax-calendar-clearable{position:relative}.cax-datepicker-icon{pointer-events:none;left:1.67px;margin-top:1px!important}.cax-input-icon-left{order:-1}.cax-datepicker-inline-actions{display:flex;justify-content:space-between;margin-top:13px;padding:10px}.cax-datepicker-inline-actions .cax-datepicker-inline-input{margin-bottom:10px;position:relative;display:inline-block}.cax-datepicker-inline-actions .cax-datepicker-inline-input input{width:130px;height:32px;padding-left:2rem;border-radius:8px;font-size:14px;font-weight:500}.cax-datepicker-inline-actions .cax-datepicker-inline-input .cax-calendar-minimalistic{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none}.left-side{display:flex;justify-content:space-between;gap:15px}}\n"] }]
+                    }, providers: [CALENDAR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronUpIcon, ChevronDownIcon, TimesIcon, AutoFocusModule], template: "<div class=\"cax-calendar-container\" [ngClass]=\"['cax-calendar-' + size]\" [ngStyle]=\"style\" [class]=\"styleClass\">\n    <div *ngIf=\"labelText\" [ngClass]=\"{'cax-calendar-main-label': labelText}\">\n        <label *ngIf=\"labelText\" [ngClass]=\"{'cax-text-action-sm-semibold': size == 'sm', 'cax-text-action-md-semibold': size == 'md', 'cax-text-action-lg-semibold': size == 'lg'}\">{{ labelText }}</label>\n    </div>\n    <span\n        #container\n        (click)=\"onButtonClick($event)\"\n        [ngClass]=\"{\n                    'cax-calendar': true,\n                    'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\n                    'cax-input-icon-right': showIcon && iconDisplay === 'input',\n                    'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\n                    'cax-calendar-timeonly': timeOnly,\n                    'cax-calendar-disabled': disabled,\n                    'cax-focus': focus || overlayVisible\n                }\"\n    >\n        <ng-template [ngIf]=\"!inline\">\n            <input\n                #inputfield\n                type=\"text\"\n                role=\"combobox\"\n                [attr.id]=\"inputId\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.aria-required]=\"required\"\n                aria-autocomplete=\"none\"\n                aria-haspopup=\"dialog\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"ariaLabel\"\n                [value]=\"inputFieldValue\"\n                (focus)=\"onInputFocus($event)\"\n                (keydown)=\"onInputKeydown($event)\"\n                (blur)=\"onInputBlur($event)\"\n                [readonly]=\"readonlyInput\"\n                (input)=\"onUserInput($event)\"\n                [ngStyle]=\"inputStyle\"\n                [class]=\"inputStyleClass\"\n                [placeholder]=\"placeholder || ''\"\n                [disabled]=\"disabled\"\n                [attr.tabindex]=\"tabindex\"\n                [attr.inputmode]=\"touchUI ? 'off' : null\"\n                [ngClass]=\"inputClass\"\n                autocomplete=\"off\"\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n                [class.cax-text-action-md-regular]=\"size === 'md'\"\n                [class.cax-text-action-lg-regular]=\"size === 'lg'\"\n            />\n            <ng-container *ngIf=\"showClear && !disabled && value != null\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear($event)\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear($event)\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n            <button\n                type=\"button\"\n                [attr.aria-label]=\"iconButtonAriaLabel\"\n                aria-haspopup=\"dialog\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n                caxButton\n                caxRipple\n                *ngIf=\"showIcon && iconDisplay === 'button'\"\n                (click)=\"onButtonClick($event, inputfield)\"\n                class=\"cax-datepicker-trigger cax-button-icon-only\"\n                [disabled]=\"disabled\"\n                tabindex=\"0\"\n            >\n                <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n                <ng-container *ngIf=\"!icon\">\n                    <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\"></i>\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n            <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n                <i\n                    class=\"cax cax-calendar-icon\"\n                    *ngIf=\"!inputIconTemplate\"\n                    [ngClass]=\"{\n                            'cax-datepicker-icon': showOnFocus\n                        }\"\n                ></i>\n                <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n            </ng-container>\n        </ng-template>\n        <ng-container>\n            <i class=\"cax cax-downarrow\" [ngClass]=\"overlayVisible ? 'cax-alt-arrow-up' : 'cax-alt-arrow-down'\"></i>\n        </ng-container>\n\n        <div\n            #contentWrapper\n            (click)=\"onOverlayClick($event)\"\n            [attr.id]=\"panelId\"\n            [class]=\"panelStyleClass\"\n            [ngStyle]=\"panelStyle\"\n            [ngClass]=\"{\n                    'cax-datepicker cax-component': true,\n                    'cax-datepicker-inline': inline,\n                    'cax-disabled': disabled,\n                    'cax-datepicker-timeonly': timeOnly,\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\n                    'cax-datepicker-monthpicker': view === 'month',\n                    'cax-datepicker-touch-ui': touchUI\n                }\"\n            [@overlayAnimation]=\"\n                    touchUI\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                \"\n            [attr.aria-label]=\"getTranslation('chooseDate')\"\n            [attr.role]=\"inline ? null : 'dialog'\"\n            [attr.aria-modal]=\"inline ? null : 'true'\"\n            [@.disabled]=\"inline === true\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\n            (click)=\"onOverlayClick($event)\"\n            *ngIf=\"inline || overlayVisible\"\n        >\n            <ng-content select=\"cax-header\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            <ng-container *ngIf=\"!timeOnly\">\n                <div class=\"cax-datepicker-group-container\">\n                    <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\n                        <!-- <div class=\"cax-datepicker-header\">\n                            <div class=\"cax-datepicker-month-selector\" *ngIf=\"view !== 'year' && view !== 'month'\">\n                                <cax-button icon=\"cax cax-alt-arrow-left\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onPrevButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-prev\"></cax-button>\n                                <div class=\"cax-datepicker-month-dropdown\" [class.cax-datepicker-dropdown-no-icon]=\"view === 'month'\" (click)=\"switchToMonthView($event)\" (keydown)=\"onContainerButtonKeydown($event)\">\n                                    <span>{{ getMonthName(month.month) }}</span>\n                                    <i *ngIf=\"currentView !== 'month' && view !== 'month'\" class=\"cax cax-alt-arrow-down\"></i>\n                                    <i *ngIf=\"currentView === 'month' && view !== 'month'\" class=\"cax cax-alt-arrow-up\"></i>\n                                </div>\n                                <cax-button icon=\"cax cax-alt-arrow-right\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onNextButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-next\"></cax-button>\n                            </div>\n                            <div class=\"cax-datepicker-year-selector\">\n                                <cax-button icon=\"cax cax-alt-arrow-left\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onPrevYearButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-prev\"></cax-button>\n                                <div class=\"cax-datepicker-year-dropdown\" [class.cax-datepicker-dropdown-no-icon]=\"view === 'year'\" (click)=\"switchToYearView($event)\" (keydown)=\"onContainerButtonKeydown($event)\">\n                                    <span>{{ getYear(month) }}</span>\n                                    <i *ngIf=\"currentView !== 'year' && view !== 'year'\" class=\"cax cax-alt-arrow-down\"></i>\n                                    <i *ngIf=\"currentView === 'year' && view !== 'year'\" class=\"cax cax-alt-arrow-up\"></i>\n                                </div>\n                                <cax-button icon=\"cax cax-alt-arrow-right\" link=\"true\" size=\"sm\" severity=\"secondary\" (click)=\"onNextYearButtonClick($event)\" (keydown)=\"onContainerButtonKeydown($event)\" styleClass=\"cax-datepicker-next\"></cax-button>\n                            </div>\n                        </div> -->\n                        <div class=\"cax-datepicker-header\">\n                            <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\n                                <!-- <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" /> -->\n                                <i class=\"cax cax-alt-arrow-left cax-datepicker-prev-icon\" *ngIf=\"!previousIconTemplate\"></i>\n                                <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\n                                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n                                </span>\n                            </button>\n                            <div class=\"cax-datepicker-title\">\n                                <button\n                                    type=\"button\"\n                                    (click)=\"switchToMonthView($event)\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    *ngIf=\"currentView === 'date'\"\n                                    class=\"cax-datepicker-month cax-link cax-text-action-lg-link-semibold\"\n                                    [disabled]=\"switchViewButtonDisabled()\"\n                                    [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                                >\n                                    {{ getMonthName(month.month) }}\n                                </button>\n                                <button\n                                    type=\"button\"\n                                    (click)=\"switchToYearView($event)\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    *ngIf=\"currentView !== 'year'\"\n                                    class=\"cax-datepicker-year cax-link cax-text-action-lg-link-semibold\"\n                                    [disabled]=\"switchViewButtonDisabled()\"\n                                    [attr.aria-label]=\"getTranslation('chooseYear')\"\n                                >\n                                    {{ getYear(month) }}\n                                </button>\n                                <span class=\"cax-datepicker-decade cax-text-action-lg-link-semibold\" *ngIf=\"currentView === 'year'\">\n                                    <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                    <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                                </span>\n                            </div>\n                            <button\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                class=\"cax-datepicker-next cax-link\"\n                                (click)=\"onNextButtonClick($event)\"\n                                [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\n                                type=\"button\"\n                                [attr.aria-label]=\"nextIconAriaLabel\"\n                                caxRipple\n                            >\n                                <!-- <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" /> -->\n                                <i class=\"cax cax-alt-arrow-right cax-datepicker-next-icon\" *ngIf=\"!nextIconTemplate\"></i>\n                                <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\n                                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n                                </span>\n                            </button>\n                        </div>\n\n                        <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\n                            <table class=\"cax-datepicker-calendar\" role=\"grid\">\n                                <thead>\n                                    <tr>\n                                        <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\n                                            <span>{{ getTranslation('weekHeader') }}</span>\n                                        </th>\n                                        <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                            <span>{{ weekDay }}</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let week of month.dates; let j = index\">\n                                        <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\n                                            <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\n                                        </td>\n                                        <td class=\"cax-text-action-lg-semibold\" *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <span\n                                                    [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable, 'cax-datepicker-range-start': isRangeStart(date) && isRangeSelectionCompleted(), 'cax-datepicker-range-end': isRangeEnd(date) && isRangeSelectionCompleted(), 'cax-datepicker-range-between': isRangeBetween(date) }\"\n                                                    (click)=\"onDateSelect($event, date)\"\n                                                    draggable=\"false\"\n                                                    [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                                                    (keydown)=\"onDateCellKeydown($event, date, i)\"\n                                                    caxRipple\n                                                >\n                                                    <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\n                                                    <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\n                                                    </ng-container>\n                                                    <ng-container *ngIf=\"!date.selectable\">\n                                                        <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                                                    </ng-container>\n                                                </span>\n                                                <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\n                                            </ng-container>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\n                    <span\n                        *ngFor=\"let m of monthPickerValues(); let i = index\"\n                        (click)=\"onMonthSelect($event, i)\"\n                        (keydown)=\"onMonthCellKeydown($event, i)\"\n                        class=\"cax-monthpicker-month cax-text-action-lg-semibold\"\n                        [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\n                        caxRipple\n                    >\n                        {{ m }}\n                        <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\n                    </span>\n                </div>\n                <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\n                    <span\n                        *ngFor=\"let y of yearPickerValues()\"\n                        (click)=\"onYearSelect($event, y)\"\n                        (keydown)=\"onYearCellKeydown($event, y)\"\n                        class=\"cax-yearpicker-year cax-text-action-lg-semibold\"\n                        [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\n                        caxRipple\n                    >\n                        {{ y }}\n                        <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n                <div class=\"cax-hour-picker\">\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"incrementHour($event)\"\n                        (keydown.space)=\"incrementHour($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('nextHour')\"\n                        caxRipple\n                    >\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"decrementHour($event)\"\n                        (keydown.space)=\"decrementHour($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('prevHour')\"\n                        caxRipple\n                    >\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n                <div class=\"cax-separator\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div class=\"cax-minute-picker\">\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"incrementMinute($event)\"\n                        (keydown.space)=\"incrementMinute($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('nextMinute')\"\n                        caxRipple\n                    >\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"decrementMinute($event)\"\n                        (keydown.space)=\"decrementMinute($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('prevMinute')\"\n                        caxRipple\n                    >\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n                <div class=\"cax-separator\" *ngIf=\"showSeconds\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"incrementSecond($event)\"\n                        (keydown.space)=\"incrementSecond($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('nextSecond')\"\n                        caxRipple\n                    >\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                    <button\n                        class=\"cax-link\"\n                        type=\"button\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (keydown.enter)=\"decrementSecond($event)\"\n                        (keydown.space)=\"decrementSecond($event)\"\n                        (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                        (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                        (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                        (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                        [attr.aria-label]=\"getTranslation('prevSecond')\"\n                        caxRipple\n                    >\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n                <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\n                    <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\n                        <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                    </button>\n                    <span>{{ pm ? 'PM' : 'AM' }}</span>\n                    <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\n                        <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                    </button>\n                </div>\n            </div>\n            <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                <cax-button\n                    *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\n                    type=\"button\"\n                    [link]=\"true\"\n                    [label]=\"getTranslation('clear')\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (onClick)=\"onClearButtonClick($event)\"\n                    caxRipple\n                ></cax-button>\n                <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\n            </div>\n\n            <div class=\"cax-datepicker-inline-actions\">\n                <div class=\"cax-datepicker-manual-input\">\n                    <span class=\"cax-input-icon-left\">\n                        <i class=\"cax cax-calendar-icon\"></i>\n                        <input\n                            type=\"text\"\n                            class=\"cax-inputtext cax-text-action-sm-medium\"\n                            [ngClass]=\"{'cax-invalid': manualInputError}\"\n                            [placeholder]=\"getDateFormat() + (isRangeSelection() ? ' - ' + getDateFormat() : '')\"\n                            [value]=\"manualInputValue\"\n                            (input)=\"onManualInput($event)\"\n                            [disabled]=\"disabled\"\n                        />\n                    </span>\n                    <small *ngIf=\"manualInputError\" class=\"cax-error cax-text-action-sm-medium\">{{ manualInputError }}</small>\n                </div>\n                <!-- Similar to input mask -->\n                <div class=\"cax-datepicker-inline-buttons\">\n                    <cax-button [label]=\"'Clear'\" [severity]=\"'secondary'\" [size]=\"'sm'\" outlined=\"true\" (onClick)=\"onClearButtonClick($event)\"> </cax-button>\n                    <cax-button [label]=\"'Save'\" [size]=\"'sm'\" outlined=\"true\" (onClick)=\"onDateSave($event)\" [disabled]=\"!!manualInputError\"> </cax-button>\n                </div>\n            </div>\n            <ng-content select=\"cax-footer\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n    </span>\n\n    <small *ngIf=\"invalid\" class=\"cax-error\" [ngClass]=\"{'disabled-opacity': disabled, 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\"> {{ errorText }} </small>\n    <small *ngIf=\"helperText && !invalid\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled, 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\">\n        {{ helperText }}\n    </small>\n</div>\n", styles: ["@layer cax{.cax-calendar-container{display:flex;flex-direction:column;gap:8px;width:216px}.cax-calendar{position:relative;display:inline-flex}.cax-calendar-main-label{font-weight:600;font-size:14px;line-height:20px}.cax-calendar .cax-inputtext{height:40px;padding:0 38px;cursor:pointer}.cax-calendar-w-btn .cax-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.cax-calendar-w-btn .cax-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.cax-downarrow{position:absolute;font-size:20px;top:25%!important;right:10px;cursor:pointer;pointer-events:none}.cax-fluid .cax-calendar{display:flex}.cax-calendar .cax-datepicker{width:360px;min-width:360px}.cax-datepicker{width:auto;position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:16px}.cax-datepicker .cax-datepicker-group{display:flex;flex-direction:column;gap:16px}.cax-datepicker-inline{position:relative}.cax-datepicker-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.cax-datepicker-header .cax-datepicker-prev,.cax-datepicker-header .cax-datepicker-next{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.cax-datepicker-header .cax-datepicker-prev-icon,.cax-datepicker-header .cax-datepicker-next-icon{font-size:24px}.cax-datepicker-header .cax-datepicker-title{display:flex;gap:4px}.cax-datepicker-header .cax-datepicker-title .cax-datepicker-month,.cax-datepicker-header .cax-datepicker-title .cax-datepicker-year,.cax-datepicker-header .cax-datepicker-title .cax-datepicker-decade{padding:8px 12px;font-size:16px;font-weight:600;text-decoration:underline}.cax-datepicker-header .cax-datepicker-month-selector,.cax-datepicker-header .cax-datepicker-year-selector{display:flex;align-items:center}.cax-datepicker-header .cax-datepicker-month-selector .cax-button .cax-button-icon-center,.cax-datepicker-header .cax-datepicker-year-selector .cax-button .cax-button-icon-center{font-size:16px!important;font-weight:500!important}.cax-datepicker-header .cax-datepicker-month-selector .cax-button:focus,.cax-datepicker-header .cax-datepicker-year-selector .cax-button:focus{outline:none!important}.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-month-dropdown,.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-year-dropdown,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-month-dropdown,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-year-dropdown{display:flex;align-items:center;font-weight:600;margin-left:12px;cursor:pointer}.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-month-dropdown.cax-datepicker-dropdown-no-icon,.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-year-dropdown.cax-datepicker-dropdown-no-icon,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-month-dropdown.cax-datepicker-dropdown-no-icon,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-year-dropdown.cax-datepicker-dropdown-no-icon{margin-right:12px}.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-month-dropdown i,.cax-datepicker-header .cax-datepicker-month-selector .cax-datepicker-year-dropdown i,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-month-dropdown i,.cax-datepicker-header .cax-datepicker-year-selector .cax-datepicker-year-dropdown i{font-size:16px;height:32px;width:32px;display:flex;align-items:center;justify-content:center}.cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group{flex:1 1 auto}.cax-datepicker-multiple-month .cax-datepicker-group-container{display:flex}.cax-datepicker table{width:100%;border-collapse:collapse;border-spacing:0}.cax-datepicker td{padding:0}.cax-datepicker td>span{display:flex;justify-content:center;align-items:center;cursor:pointer;overflow:visible;position:relative;margin:0 auto;width:48px;height:48px}.cax-datepicker td>span.cax-datepicker-range-between{background:var(--primary-75)!important;border-radius:0!important;color:var(--neutral-900)!important;width:100%!important}.cax-datepicker td>span.cax-datepicker-range-start.cax-highlight{background:transparent!important;width:100%!important;z-index:1}.cax-datepicker td>span.cax-datepicker-range-start.cax-highlight:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;background:var(--primary-75);z-index:-1}.cax-datepicker td>span.cax-datepicker-range-start.cax-highlight:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:48px;height:48px;background:var(--primary-500);border-radius:50%;z-index:-1}.cax-datepicker td>span.cax-datepicker-range-end.cax-highlight{background:transparent!important;width:100%!important;z-index:1}.cax-datepicker td>span.cax-datepicker-range-end.cax-highlight:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;background:var(--primary-75);z-index:-1}.cax-datepicker td>span.cax-datepicker-range-end.cax-highlight:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:48px;height:48px;background:var(--primary-500);border-radius:50%;z-index:-1}.cax-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.cax-timepicker{display:flex;justify-content:center;align-items:center}.cax-timepicker button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.cax-timepicker>div{display:flex;align-items:center;flex-direction:column}.cax-datepicker-touch-ui,.cax-calendar .cax-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}.cax-calendar-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-calendar-clearable{position:relative}.cax-datepicker-icon{pointer-events:none;position:absolute;left:10px;font-size:20px;top:25%!important}.cax-datepicker-inline-actions{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 16px 0}.cax-datepicker-inline-actions .cax-datepicker-manual-input{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;margin-right:12px}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left{width:100%;position:relative;display:flex;align-items:center}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left i{position:absolute;left:8px;top:25%!important;font-size:16px;color:var(--neutral-900)}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left .cax-inputtext{width:100%;height:32px;padding:4px 8px 4px 30px;font-size:12px}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left .cax-inputtext.cax-invalid{border-color:var(--error-600)}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-input-icon-left .cax-inputtext.cax-invalid:hover{border-color:var(--error-750);box-shadow:0 0 0 1px var(--error-750)}.cax-datepicker-inline-actions .cax-datepicker-manual-input .cax-error{font-size:11px;color:var(--error-600)}.cax-datepicker-inline-actions .cax-datepicker-inline-buttons{margin-left:auto;display:flex;align-items:center;gap:8px}.left-side{display:flex;justify-content:space-between;gap:15px}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3054,6 +3335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
             }], dateFormat: [{
                 type: Input
             }], multipleSeparator: [{
@@ -3159,6 +3442,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], labelText: [{
                 type: Input
+            }], helperText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], invalid: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], timeSeparator: [{
                 type: Input
             }], leftIcon: [{
@@ -3221,9 +3511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Output
             }], onClickOutside: [{
                 type: Output
-            }], onInlineSaved: [{
-                type: Output
-            }], onInlineCancelled: [{
+            }], onDateSaved: [{
                 type: Output
             }], onShow: [{
                 type: Output
@@ -3242,11 +3530,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class CalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule], exports: [Calendar, ButtonModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule, ButtonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule], exports: [Calendar, ButtonModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule, ButtonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Calendar, ButtonModule, SharedModule],