cax-design-system 3.0.0 → 3.0.2

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

@@ -3264,8 +3264,8 @@ class Calendar {
         }
         this.cd.markForCheck();
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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%)',
@@ -3283,7 +3283,7 @@ class Calendar {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'cax-calendar', animations: [
                         trigger('overlayAnimation', [
@@ -3530,11 +3530,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class CalendarModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule], exports: [Calendar, ButtonModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarModule, imports: [Calendar, ButtonModule, SharedModule, ButtonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Calendar, ButtonModule, SharedModule],