cax-design-system 2.7.6 → 2.7.7

package/esm2022/table/components/column-filter-form-element/column-filter-form-element.mjs

@@ -63,7 +63,7 @@ export class ColumnFilterFormElement {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: i1.Table }, { token: i2.ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ColumnFilterFormElement, isStandalone: true, selector: "cax-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"filterTemplate; else builtInElement\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            filterTemplate;\r\n            context: {\r\n                $implicit: filterConstraint.value,\r\n                filterCallback: filterCallback,\r\n                type: type,\r\n                field: field,\r\n                filterConstraint: filterConstraint,\r\n                placeholder: placeholder,\r\n                minFractionDigits: minFractionDigits,\r\n                maxFractionDigits: maxFractionDigits,\r\n                prefix: prefix,\r\n                suffix: suffix,\r\n                locale: locale,\r\n                localeMatcher: localeMatcher,\r\n                currency: currency,\r\n                currencyDisplay: currencyDisplay,\r\n                useGrouping: useGrouping,\r\n                showButtons: showButtons\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-container>\r\n<ng-template #builtInElement>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <input\r\n            *ngSwitchCase=\"'text'\"\r\n            type=\"text\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            caxInputText\r\n            [value]=\"filterConstraint?.value\"\r\n            (input)=\"onModelChange($event.target.value)\"\r\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\r\n            [attr.placeholder]=\"placeholder\"\r\n        />\r\n        <cax-inputNumber\r\n            *ngSwitchCase=\"'numeric'\"\r\n            [ngModel]=\"filterConstraint?.value\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\r\n            [showButtons]=\"showButtons\"\r\n            [minFractionDigits]=\"minFractionDigits\"\r\n            [maxFractionDigits]=\"maxFractionDigits\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            [prefix]=\"prefix\"\r\n            [suffix]=\"suffix\"\r\n            [placeholder]=\"placeholder\"\r\n            [mode]=\"currency ? 'currency' : 'decimal'\"\r\n            [locale]=\"locale\"\r\n            [localeMatcher]=\"localeMatcher\"\r\n            [currency]=\"currency\"\r\n            [currencyDisplay]=\"currencyDisplay\"\r\n            [useGrouping]=\"useGrouping\"\r\n        ></cax-inputNumber>\r\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></cax-triStateCheckbox>\r\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\"></cax-calendar>\r\n    </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onInlineSaved", "onInlineCancelled", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i8.TriStateCheckbox, selector: "cax-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ColumnFilterFormElement, isStandalone: true, selector: "cax-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"filterTemplate; else builtInElement\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            filterTemplate;\r\n            context: {\r\n                $implicit: filterConstraint.value,\r\n                filterCallback: filterCallback,\r\n                type: type,\r\n                field: field,\r\n                filterConstraint: filterConstraint,\r\n                placeholder: placeholder,\r\n                minFractionDigits: minFractionDigits,\r\n                maxFractionDigits: maxFractionDigits,\r\n                prefix: prefix,\r\n                suffix: suffix,\r\n                locale: locale,\r\n                localeMatcher: localeMatcher,\r\n                currency: currency,\r\n                currencyDisplay: currencyDisplay,\r\n                useGrouping: useGrouping,\r\n                showButtons: showButtons\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-container>\r\n<ng-template #builtInElement>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <input\r\n            *ngSwitchCase=\"'text'\"\r\n            type=\"text\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            caxInputText\r\n            [value]=\"filterConstraint?.value\"\r\n            (input)=\"onModelChange($event.target.value)\"\r\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\r\n            [attr.placeholder]=\"placeholder\"\r\n        />\r\n        <cax-inputNumber\r\n            *ngSwitchCase=\"'numeric'\"\r\n            [ngModel]=\"filterConstraint?.value\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\r\n            [showButtons]=\"showButtons\"\r\n            [minFractionDigits]=\"minFractionDigits\"\r\n            [maxFractionDigits]=\"maxFractionDigits\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            [prefix]=\"prefix\"\r\n            [suffix]=\"suffix\"\r\n            [placeholder]=\"placeholder\"\r\n            [mode]=\"currency ? 'currency' : 'decimal'\"\r\n            [locale]=\"locale\"\r\n            [localeMatcher]=\"localeMatcher\"\r\n            [currency]=\"currency\"\r\n            [currencyDisplay]=\"currencyDisplay\"\r\n            [useGrouping]=\"useGrouping\"\r\n        ></cax-inputNumber>\r\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></cax-triStateCheckbox>\r\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\"></cax-calendar>\r\n    </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "labelText", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onInlineSaved", "onInlineCancelled", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i8.TriStateCheckbox, selector: "cax-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
@@ -104,4 +104,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], ariaLabel: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLWZpbHRlci1mb3JtLWVsZW1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvdGFibGUvY29tcG9uZW50cy9jb2x1bW4tZmlsdGVyLWZvcm0tZWxlbWVudC9jb2x1bW4tZmlsdGVyLWZvcm0tZWxlbWVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvY29tcG9uZW50cy90YWJsZS9jb21wb25lbnRzL2NvbHVtbi1maWx0ZXItZm9ybS1lbGVtZW50L2NvbHVtbi1maWx0ZXItZm9ybS1lbGVtZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBVSxLQUFLLEVBQWUsZUFBZSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBSzVILE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzVELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7Ozs7Ozs7OztBQVk1RSxNQUFNLE9BQU8sdUJBQXVCO0lBc0NyQjtJQUNDO0lBdENILEtBQUssQ0FBcUI7SUFFMUIsSUFBSSxDQUFxQjtJQUV6QixnQkFBZ0IsQ0FBNkI7SUFFN0MsY0FBYyxDQUE2QjtJQUUzQyxXQUFXLENBQXFCO0lBRStCLGlCQUFpQixDQUFxQjtJQUV0QyxpQkFBaUIsQ0FBcUI7SUFFckcsTUFBTSxDQUFxQjtJQUUzQixNQUFNLENBQXFCO0lBRTNCLE1BQU0sQ0FBcUI7SUFFM0IsYUFBYSxDQUFxQjtJQUVsQyxRQUFRLENBQXFCO0lBRTdCLGVBQWUsQ0FBcUI7SUFFTCxXQUFXLEdBQVksSUFBSSxDQUFDO0lBRTNELFNBQVMsQ0FBcUI7SUFFdkMsSUFBSSxXQUFXO1FBQ1gsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQztJQUN0QyxDQUFDO0lBRUQsY0FBYyxDQUFNO0lBRXBCLFlBQ1csRUFBUyxFQUNSLFNBQXVCO1FBRHhCLE9BQUUsR0FBRixFQUFFLENBQU87UUFDUixjQUFTLEdBQVQsU0FBUyxDQUFjO0lBQ2hDLENBQUM7SUFFSixRQUFRO1FBQ0osSUFBSSxDQUFDLGNBQWMsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFO1lBQzNCLElBQUksQ0FBQyxnQkFBaUIsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1lBQzNDLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDO0lBQ04sQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLGdCQUFpQixDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFFM0MsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLE1BQU0sSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssRUFBRSxFQUFFLENBQUM7WUFDbEUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUN0QixDQUFDO0lBQ0wsQ0FBQztJQUVELHVCQUF1QixDQUFDLEtBQW9CO1FBQ3hDLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDbEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxxQkFBcUIsQ0FBQyxLQUFvQjtRQUN0QyxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDeEIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDM0IsQ0FBQztJQUNMLENBQUM7dUdBbkVRLHVCQUF1QjsyRkFBdkIsdUJBQXVCLHlRQVdaLENBQUMsS0FBYyxFQUFFLEVBQUUsQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxpRUFFaEQsQ0FBQyxLQUFjLEVBQUUsRUFBRSxDQUFDLGVBQWUsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLCtMQWNoRCxnQkFBZ0IsOEZDakR4Qyw0c0ZBNERBLDJDRDNDYyxZQUFZLHFlQUFFLGVBQWUsd0xBQUUsV0FBVyw4VkFBRSxjQUFjLDgyQ0FBRSxpQkFBaUIseXdCQUFFLHNCQUFzQjs7MkZBS3RHLHVCQUF1QjtrQkFWbkMsU0FBUzsrQkFDSSw2QkFBNkIsaUJBRXhCLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxXQUFXLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLHNCQUFzQixDQUFDLFFBQzFHO3dCQUNGLEtBQUssRUFBRSxhQUFhO3FCQUN2QjtxR0FHUSxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUVHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFFRyxjQUFjO3NCQUF0QixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRWtFLGlCQUFpQjtzQkFBeEYsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxDQUFDLEtBQWMsRUFBRSxFQUFFLENBQUMsZUFBZSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsRUFBRTtnQkFFRSxpQkFBaUI7c0JBQXhGLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsQ0FBQyxLQUFjLEVBQUUsRUFBRSxDQUFDLGVBQWUsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEVBQUU7Z0JBRTdELE1BQU07c0JBQWQsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUVHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxlQUFlO3NCQUF2QixLQUFLO2dCQUVrQyxXQUFXO3NCQUFsRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUU3QixTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgT25Jbml0LCBJbnB1dCwgVGVtcGxhdGVSZWYsIG51bWJlckF0dHJpYnV0ZSwgYm9vbGVhbkF0dHJpYnV0ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmlsdGVyTWV0YWRhdGEgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9hcGknO1xuaW1wb3J0IHsgVGFibGUgfSBmcm9tICcuLi8uLi90YWJsZSc7XG5pbXBvcnQgeyBOdWxsYWJsZSB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL3RzLWhlbHBlcnMnO1xuaW1wb3J0IHsgQ29sdW1uRmlsdGVyIH0gZnJvbSAnLi4vY29sdW1uLWZpbHRlci9jb2x1bW4tZmlsdGVyJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IENhbGVuZGFyTW9kdWxlIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vY2FsZW5kYXInO1xuaW1wb3J0IHsgSW5wdXROdW1iZXJNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pbnB1dG51bWJlcic7XG5pbXBvcnQgeyBJbnB1dFRleHRNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pbnB1dHRleHQnO1xuaW1wb3J0IHsgVHJpU3RhdGVDaGVja2JveE1vZHVsZSB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL3RyaXN0YXRlY2hlY2tib3gnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2NheC1jb2x1bW5GaWx0ZXJGb3JtRWxlbWVudCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NvbHVtbi1maWx0ZXItZm9ybS1lbGVtZW50Lmh0bWwnLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJbnB1dFRleHRNb2R1bGUsIEZvcm1zTW9kdWxlLCBDYWxlbmRhck1vZHVsZSwgSW5wdXROdW1iZXJNb2R1bGUsIFRyaVN0YXRlQ2hlY2tib3hNb2R1bGVdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdjYXgtZWxlbWVudCdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIENvbHVtbkZpbHRlckZvcm1FbGVtZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKSBmaWVsZDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgdHlwZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgZmlsdGVyQ29uc3RyYWludDogRmlsdGVyTWV0YWRhdGEgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBmaWx0ZXJUZW1wbGF0ZTogTnVsbGFibGU8VGVtcGxhdGVSZWY8YW55Pj47XG5cbiAgICBASW5wdXQoKSBwbGFjZWhvbGRlcjogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiAodmFsdWU6IHVua25vd24pID0+IG51bWJlckF0dHJpYnV0ZSh2YWx1ZSwgbnVsbCkgfSkgbWluRnJhY3Rpb25EaWdpdHM6IG51bWJlciB8IHVuZGVmaW5lZDtcblxuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogKHZhbHVlOiB1bmtub3duKSA9PiBudW1iZXJBdHRyaWJ1dGUodmFsdWUsIG51bGwpIH0pIG1heEZyYWN0aW9uRGlnaXRzOiBudW1iZXIgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBwcmVmaXg6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAgIEBJbnB1dCgpIHN1ZmZpeDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgbG9jYWxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBsb2NhbGVNYXRjaGVyOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBjdXJyZW5jeTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgY3VycmVuY3lEaXNwbGF5OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgdXNlR3JvdXBpbmc6IGJvb2xlYW4gPSB0cnVlO1xuXG4gICAgQElucHV0KCkgYXJpYUxhYmVsOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBnZXQgc2hvd0J1dHRvbnMoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmNvbEZpbHRlci5zaG93QnV0dG9ucztcbiAgICB9XG5cbiAgICBmaWx0ZXJDYWxsYmFjazogYW55O1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHB1YmxpYyBkdDogVGFibGUsXG4gICAgICAgIHByaXZhdGUgY29sRmlsdGVyOiBDb2x1bW5GaWx0ZXJcbiAgICApIHt9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5maWx0ZXJDYWxsYmFjayA9ICh2YWx1ZTogYW55KSA9PiB7XG4gICAgICAgICAgICAoPGFueT50aGlzLmZpbHRlckNvbnN0cmFpbnQpLnZhbHVlID0gdmFsdWU7XG4gICAgICAgICAgICB0aGlzLmR0Ll9maWx0ZXIoKTtcbiAgICAgICAgfTtcbiAgICB9XG5cbiAgICBvbk1vZGVsQ2hhbmdlKHZhbHVlOiBhbnkpIHtcbiAgICAgICAgKDxhbnk+dGhpcy5maWx0ZXJDb25zdHJhaW50KS52YWx1ZSA9IHZhbHVlO1xuXG4gICAgICAgIGlmICh0aGlzLnR5cGUgPT09ICdkYXRlJyB8fCB0aGlzLnR5cGUgPT09ICdib29sZWFuJyB8fCB2YWx1ZSA9PT0gJycpIHtcbiAgICAgICAgICAgIHRoaXMuZHQuX2ZpbHRlcigpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb25UZXh0SW5wdXRFbnRlcktleURvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICAgICAgdGhpcy5kdC5fZmlsdGVyKCk7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgfVxuXG4gICAgb25OdW1lcmljSW5wdXRLZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICAgIHRoaXMuZHQuX2ZpbHRlcigpO1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJmaWx0ZXJUZW1wbGF0ZTsgZWxzZSBidWlsdEluRWxlbWVudFwiPlxyXG4gICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiXHJcbiAgICAgICAgICAgIGZpbHRlclRlbXBsYXRlO1xyXG4gICAgICAgICAgICBjb250ZXh0OiB7XHJcbiAgICAgICAgICAgICAgICAkaW1wbGljaXQ6IGZpbHRlckNvbnN0cmFpbnQudmFsdWUsXHJcbiAgICAgICAgICAgICAgICBmaWx0ZXJDYWxsYmFjazogZmlsdGVyQ2FsbGJhY2ssXHJcbiAgICAgICAgICAgICAgICB0eXBlOiB0eXBlLFxyXG4gICAgICAgICAgICAgICAgZmllbGQ6IGZpZWxkLFxyXG4gICAgICAgICAgICAgICAgZmlsdGVyQ29uc3RyYWludDogZmlsdGVyQ29uc3RyYWludCxcclxuICAgICAgICAgICAgICAgIHBsYWNlaG9sZGVyOiBwbGFjZWhvbGRlcixcclxuICAgICAgICAgICAgICAgIG1pbkZyYWN0aW9uRGlnaXRzOiBtaW5GcmFjdGlvbkRpZ2l0cyxcclxuICAgICAgICAgICAgICAgIG1heEZyYWN0aW9uRGlnaXRzOiBtYXhGcmFjdGlvbkRpZ2l0cyxcclxuICAgICAgICAgICAgICAgIHByZWZpeDogcHJlZml4LFxyXG4gICAgICAgICAgICAgICAgc3VmZml4OiBzdWZmaXgsXHJcbiAgICAgICAgICAgICAgICBsb2NhbGU6IGxvY2FsZSxcclxuICAgICAgICAgICAgICAgIGxvY2FsZU1hdGNoZXI6IGxvY2FsZU1hdGNoZXIsXHJcbiAgICAgICAgICAgICAgICBjdXJyZW5jeTogY3VycmVuY3ksXHJcbiAgICAgICAgICAgICAgICBjdXJyZW5jeURpc3BsYXk6IGN1cnJlbmN5RGlzcGxheSxcclxuICAgICAgICAgICAgICAgIHVzZUdyb3VwaW5nOiB1c2VHcm91cGluZyxcclxuICAgICAgICAgICAgICAgIHNob3dCdXR0b25zOiBzaG93QnV0dG9uc1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgXCJcclxuICAgID48L25nLWNvbnRhaW5lcj5cclxuPC9uZy1jb250YWluZXI+XHJcbjxuZy10ZW1wbGF0ZSAjYnVpbHRJbkVsZW1lbnQ+XHJcbiAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJ0eXBlXCI+XHJcbiAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICAgICpuZ1N3aXRjaENhc2U9XCIndGV4dCdcIlxyXG4gICAgICAgICAgICB0eXBlPVwidGV4dFwiXHJcbiAgICAgICAgICAgIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCJcclxuICAgICAgICAgICAgY2F4SW5wdXRUZXh0XHJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJmaWx0ZXJDb25zdHJhaW50Py52YWx1ZVwiXHJcbiAgICAgICAgICAgIChpbnB1dCk9XCJvbk1vZGVsQ2hhbmdlKCRldmVudC50YXJnZXQudmFsdWUpXCJcclxuICAgICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwib25UZXh0SW5wdXRFbnRlcktleURvd24oJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFthdHRyLnBsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcclxuICAgICAgICAvPlxyXG4gICAgICAgIDxjYXgtaW5wdXROdW1iZXJcclxuICAgICAgICAgICAgKm5nU3dpdGNoQ2FzZT1cIidudW1lcmljJ1wiXHJcbiAgICAgICAgICAgIFtuZ01vZGVsXT1cImZpbHRlckNvbnN0cmFpbnQ/LnZhbHVlXCJcclxuICAgICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCJcclxuICAgICAgICAgICAgKG9uS2V5RG93bik9XCJvbk51bWVyaWNJbnB1dEtleURvd24oJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFtzaG93QnV0dG9uc109XCJzaG93QnV0dG9uc1wiXHJcbiAgICAgICAgICAgIFttaW5GcmFjdGlvbkRpZ2l0c109XCJtaW5GcmFjdGlvbkRpZ2l0c1wiXHJcbiAgICAgICAgICAgIFttYXhGcmFjdGlvbkRpZ2l0c109XCJtYXhGcmFjdGlvbkRpZ2l0c1wiXHJcbiAgICAgICAgICAgIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCJcclxuICAgICAgICAgICAgW3ByZWZpeF09XCJwcmVmaXhcIlxyXG4gICAgICAgICAgICBbc3VmZml4XT1cInN1ZmZpeFwiXHJcbiAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXHJcbiAgICAgICAgICAgIFttb2RlXT1cImN1cnJlbmN5ID8gJ2N1cnJlbmN5JyA6ICdkZWNpbWFsJ1wiXHJcbiAgICAgICAgICAgIFtsb2NhbGVdPVwibG9jYWxlXCJcclxuICAgICAgICAgICAgW2xvY2FsZU1hdGNoZXJdPVwibG9jYWxlTWF0Y2hlclwiXHJcbiAgICAgICAgICAgIFtjdXJyZW5jeV09XCJjdXJyZW5jeVwiXHJcbiAgICAgICAgICAgIFtjdXJyZW5jeURpc3BsYXldPVwiY3VycmVuY3lEaXNwbGF5XCJcclxuICAgICAgICAgICAgW3VzZUdyb3VwaW5nXT1cInVzZUdyb3VwaW5nXCJcclxuICAgICAgICA+PC9jYXgtaW5wdXROdW1iZXI+XHJcbiAgICAgICAgPGNheC10cmlTdGF0ZUNoZWNrYm94IFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCIgKm5nU3dpdGNoQ2FzZT1cIidib29sZWFuJ1wiIFtuZ01vZGVsXT1cImZpbHRlckNvbnN0cmFpbnQ/LnZhbHVlXCIgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCI+PC9jYXgtdHJpU3RhdGVDaGVja2JveD5cclxuICAgICAgICA8Y2F4LWNhbGVuZGFyIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCIgKm5nU3dpdGNoQ2FzZT1cIidkYXRlJ1wiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIFtuZ01vZGVsXT1cImZpbHRlckNvbnN0cmFpbnQ/LnZhbHVlXCIgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCIgYXBwZW5kVG89XCJib2R5XCI+PC9jYXgtY2FsZW5kYXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLWZpbHRlci1mb3JtLWVsZW1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvdGFibGUvY29tcG9uZW50cy9jb2x1bW4tZmlsdGVyLWZvcm0tZWxlbWVudC9jb2x1bW4tZmlsdGVyLWZvcm0tZWxlbWVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvY29tcG9uZW50cy90YWJsZS9jb21wb25lbnRzL2NvbHVtbi1maWx0ZXItZm9ybS1lbGVtZW50L2NvbHVtbi1maWx0ZXItZm9ybS1lbGVtZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBVSxLQUFLLEVBQWUsZUFBZSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBSzVILE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzVELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7Ozs7Ozs7OztBQVk1RSxNQUFNLE9BQU8sdUJBQXVCO0lBc0NyQjtJQUNDO0lBdENILEtBQUssQ0FBcUI7SUFFMUIsSUFBSSxDQUFxQjtJQUV6QixnQkFBZ0IsQ0FBNkI7SUFFN0MsY0FBYyxDQUE2QjtJQUUzQyxXQUFXLENBQXFCO0lBRStCLGlCQUFpQixDQUFxQjtJQUV0QyxpQkFBaUIsQ0FBcUI7SUFFckcsTUFBTSxDQUFxQjtJQUUzQixNQUFNLENBQXFCO0lBRTNCLE1BQU0sQ0FBcUI7SUFFM0IsYUFBYSxDQUFxQjtJQUVsQyxRQUFRLENBQXFCO0lBRTdCLGVBQWUsQ0FBcUI7SUFFTCxXQUFXLEdBQVksSUFBSSxDQUFDO0lBRTNELFNBQVMsQ0FBcUI7SUFFdkMsSUFBSSxXQUFXO1FBQ1gsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQztJQUN0QyxDQUFDO0lBRUQsY0FBYyxDQUFNO0lBRXBCLFlBQ1csRUFBUyxFQUNSLFNBQXVCO1FBRHhCLE9BQUUsR0FBRixFQUFFLENBQU87UUFDUixjQUFTLEdBQVQsU0FBUyxDQUFjO0lBQ2hDLENBQUM7SUFFSixRQUFRO1FBQ0osSUFBSSxDQUFDLGNBQWMsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFO1lBQzNCLElBQUksQ0FBQyxnQkFBaUIsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1lBQzNDLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDO0lBQ04sQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLGdCQUFpQixDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFFM0MsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLE1BQU0sSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssRUFBRSxFQUFFLENBQUM7WUFDbEUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUN0QixDQUFDO0lBQ0wsQ0FBQztJQUVELHVCQUF1QixDQUFDLEtBQW9CO1FBQ3hDLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDbEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxxQkFBcUIsQ0FBQyxLQUFvQjtRQUN0QyxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDeEIsSUFBSSxDQUFDLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDM0IsQ0FBQztJQUNMLENBQUM7dUdBbkVRLHVCQUF1QjsyRkFBdkIsdUJBQXVCLHlRQVdaLENBQUMsS0FBYyxFQUFFLEVBQUUsQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxpRUFFaEQsQ0FBQyxLQUFjLEVBQUUsRUFBRSxDQUFDLGVBQWUsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLCtMQWNoRCxnQkFBZ0IsOEZDakR4Qyw0c0ZBNERBLDJDRDNDYyxZQUFZLHFlQUFFLGVBQWUsd0xBQUUsV0FBVyw4VkFBRSxjQUFjLDIzQ0FBRSxpQkFBaUIseXdCQUFFLHNCQUFzQjs7MkZBS3RHLHVCQUF1QjtrQkFWbkMsU0FBUzsrQkFDSSw2QkFBNkIsaUJBRXhCLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxXQUFXLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLHNCQUFzQixDQUFDLFFBQzFHO3dCQUNGLEtBQUssRUFBRSxhQUFhO3FCQUN2QjtxR0FHUSxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUVHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFFRyxjQUFjO3NCQUF0QixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRWtFLGlCQUFpQjtzQkFBeEYsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxDQUFDLEtBQWMsRUFBRSxFQUFFLENBQUMsZUFBZSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsRUFBRTtnQkFFRSxpQkFBaUI7c0JBQXhGLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsQ0FBQyxLQUFjLEVBQUUsRUFBRSxDQUFDLGVBQWUsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEVBQUU7Z0JBRTdELE1BQU07c0JBQWQsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUVHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxlQUFlO3NCQUF2QixLQUFLO2dCQUVrQyxXQUFXO3NCQUFsRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUU3QixTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgT25Jbml0LCBJbnB1dCwgVGVtcGxhdGVSZWYsIG51bWJlckF0dHJpYnV0ZSwgYm9vbGVhbkF0dHJpYnV0ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmlsdGVyTWV0YWRhdGEgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9hcGknO1xuaW1wb3J0IHsgVGFibGUgfSBmcm9tICcuLi8uLi90YWJsZSc7XG5pbXBvcnQgeyBOdWxsYWJsZSB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL3RzLWhlbHBlcnMnO1xuaW1wb3J0IHsgQ29sdW1uRmlsdGVyIH0gZnJvbSAnLi4vY29sdW1uLWZpbHRlci9jb2x1bW4tZmlsdGVyJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IENhbGVuZGFyTW9kdWxlIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vY2FsZW5kYXInO1xuaW1wb3J0IHsgSW5wdXROdW1iZXJNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pbnB1dG51bWJlcic7XG5pbXBvcnQgeyBJbnB1dFRleHRNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pbnB1dHRleHQnO1xuaW1wb3J0IHsgVHJpU3RhdGVDaGVja2JveE1vZHVsZSB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL3RyaXN0YXRlY2hlY2tib3gnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2NheC1jb2x1bW5GaWx0ZXJGb3JtRWxlbWVudCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NvbHVtbi1maWx0ZXItZm9ybS1lbGVtZW50Lmh0bWwnLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJbnB1dFRleHRNb2R1bGUsIEZvcm1zTW9kdWxlLCBDYWxlbmRhck1vZHVsZSwgSW5wdXROdW1iZXJNb2R1bGUsIFRyaVN0YXRlQ2hlY2tib3hNb2R1bGVdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdjYXgtZWxlbWVudCdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIENvbHVtbkZpbHRlckZvcm1FbGVtZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKSBmaWVsZDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgdHlwZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgZmlsdGVyQ29uc3RyYWludDogRmlsdGVyTWV0YWRhdGEgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBmaWx0ZXJUZW1wbGF0ZTogTnVsbGFibGU8VGVtcGxhdGVSZWY8YW55Pj47XG5cbiAgICBASW5wdXQoKSBwbGFjZWhvbGRlcjogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiAodmFsdWU6IHVua25vd24pID0+IG51bWJlckF0dHJpYnV0ZSh2YWx1ZSwgbnVsbCkgfSkgbWluRnJhY3Rpb25EaWdpdHM6IG51bWJlciB8IHVuZGVmaW5lZDtcblxuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogKHZhbHVlOiB1bmtub3duKSA9PiBudW1iZXJBdHRyaWJ1dGUodmFsdWUsIG51bGwpIH0pIG1heEZyYWN0aW9uRGlnaXRzOiBudW1iZXIgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBwcmVmaXg6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAgIEBJbnB1dCgpIHN1ZmZpeDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgbG9jYWxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBsb2NhbGVNYXRjaGVyOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoKSBjdXJyZW5jeTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gICAgQElucHV0KCkgY3VycmVuY3lEaXNwbGF5OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgdXNlR3JvdXBpbmc6IGJvb2xlYW4gPSB0cnVlO1xuXG4gICAgQElucHV0KCkgYXJpYUxhYmVsOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgICBnZXQgc2hvd0J1dHRvbnMoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmNvbEZpbHRlci5zaG93QnV0dG9ucztcbiAgICB9XG5cbiAgICBmaWx0ZXJDYWxsYmFjazogYW55O1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHB1YmxpYyBkdDogVGFibGUsXG4gICAgICAgIHByaXZhdGUgY29sRmlsdGVyOiBDb2x1bW5GaWx0ZXJcbiAgICApIHt9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5maWx0ZXJDYWxsYmFjayA9ICh2YWx1ZTogYW55KSA9PiB7XG4gICAgICAgICAgICAoPGFueT50aGlzLmZpbHRlckNvbnN0cmFpbnQpLnZhbHVlID0gdmFsdWU7XG4gICAgICAgICAgICB0aGlzLmR0Ll9maWx0ZXIoKTtcbiAgICAgICAgfTtcbiAgICB9XG5cbiAgICBvbk1vZGVsQ2hhbmdlKHZhbHVlOiBhbnkpIHtcbiAgICAgICAgKDxhbnk+dGhpcy5maWx0ZXJDb25zdHJhaW50KS52YWx1ZSA9IHZhbHVlO1xuXG4gICAgICAgIGlmICh0aGlzLnR5cGUgPT09ICdkYXRlJyB8fCB0aGlzLnR5cGUgPT09ICdib29sZWFuJyB8fCB2YWx1ZSA9PT0gJycpIHtcbiAgICAgICAgICAgIHRoaXMuZHQuX2ZpbHRlcigpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb25UZXh0SW5wdXRFbnRlcktleURvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICAgICAgdGhpcy5kdC5fZmlsdGVyKCk7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgfVxuXG4gICAgb25OdW1lcmljSW5wdXRLZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICAgIHRoaXMuZHQuX2ZpbHRlcigpO1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJmaWx0ZXJUZW1wbGF0ZTsgZWxzZSBidWlsdEluRWxlbWVudFwiPlxyXG4gICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiXHJcbiAgICAgICAgICAgIGZpbHRlclRlbXBsYXRlO1xyXG4gICAgICAgICAgICBjb250ZXh0OiB7XHJcbiAgICAgICAgICAgICAgICAkaW1wbGljaXQ6IGZpbHRlckNvbnN0cmFpbnQudmFsdWUsXHJcbiAgICAgICAgICAgICAgICBmaWx0ZXJDYWxsYmFjazogZmlsdGVyQ2FsbGJhY2ssXHJcbiAgICAgICAgICAgICAgICB0eXBlOiB0eXBlLFxyXG4gICAgICAgICAgICAgICAgZmllbGQ6IGZpZWxkLFxyXG4gICAgICAgICAgICAgICAgZmlsdGVyQ29uc3RyYWludDogZmlsdGVyQ29uc3RyYWludCxcclxuICAgICAgICAgICAgICAgIHBsYWNlaG9sZGVyOiBwbGFjZWhvbGRlcixcclxuICAgICAgICAgICAgICAgIG1pbkZyYWN0aW9uRGlnaXRzOiBtaW5GcmFjdGlvbkRpZ2l0cyxcclxuICAgICAgICAgICAgICAgIG1heEZyYWN0aW9uRGlnaXRzOiBtYXhGcmFjdGlvbkRpZ2l0cyxcclxuICAgICAgICAgICAgICAgIHByZWZpeDogcHJlZml4LFxyXG4gICAgICAgICAgICAgICAgc3VmZml4OiBzdWZmaXgsXHJcbiAgICAgICAgICAgICAgICBsb2NhbGU6IGxvY2FsZSxcclxuICAgICAgICAgICAgICAgIGxvY2FsZU1hdGNoZXI6IGxvY2FsZU1hdGNoZXIsXHJcbiAgICAgICAgICAgICAgICBjdXJyZW5jeTogY3VycmVuY3ksXHJcbiAgICAgICAgICAgICAgICBjdXJyZW5jeURpc3BsYXk6IGN1cnJlbmN5RGlzcGxheSxcclxuICAgICAgICAgICAgICAgIHVzZUdyb3VwaW5nOiB1c2VHcm91cGluZyxcclxuICAgICAgICAgICAgICAgIHNob3dCdXR0b25zOiBzaG93QnV0dG9uc1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgXCJcclxuICAgID48L25nLWNvbnRhaW5lcj5cclxuPC9uZy1jb250YWluZXI+XHJcbjxuZy10ZW1wbGF0ZSAjYnVpbHRJbkVsZW1lbnQ+XHJcbiAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJ0eXBlXCI+XHJcbiAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICAgICpuZ1N3aXRjaENhc2U9XCIndGV4dCdcIlxyXG4gICAgICAgICAgICB0eXBlPVwidGV4dFwiXHJcbiAgICAgICAgICAgIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCJcclxuICAgICAgICAgICAgY2F4SW5wdXRUZXh0XHJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJmaWx0ZXJDb25zdHJhaW50Py52YWx1ZVwiXHJcbiAgICAgICAgICAgIChpbnB1dCk9XCJvbk1vZGVsQ2hhbmdlKCRldmVudC50YXJnZXQudmFsdWUpXCJcclxuICAgICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwib25UZXh0SW5wdXRFbnRlcktleURvd24oJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFthdHRyLnBsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcclxuICAgICAgICAvPlxyXG4gICAgICAgIDxjYXgtaW5wdXROdW1iZXJcclxuICAgICAgICAgICAgKm5nU3dpdGNoQ2FzZT1cIidudW1lcmljJ1wiXHJcbiAgICAgICAgICAgIFtuZ01vZGVsXT1cImZpbHRlckNvbnN0cmFpbnQ/LnZhbHVlXCJcclxuICAgICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCJcclxuICAgICAgICAgICAgKG9uS2V5RG93bik9XCJvbk51bWVyaWNJbnB1dEtleURvd24oJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFtzaG93QnV0dG9uc109XCJzaG93QnV0dG9uc1wiXHJcbiAgICAgICAgICAgIFttaW5GcmFjdGlvbkRpZ2l0c109XCJtaW5GcmFjdGlvbkRpZ2l0c1wiXHJcbiAgICAgICAgICAgIFttYXhGcmFjdGlvbkRpZ2l0c109XCJtYXhGcmFjdGlvbkRpZ2l0c1wiXHJcbiAgICAgICAgICAgIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCJcclxuICAgICAgICAgICAgW3ByZWZpeF09XCJwcmVmaXhcIlxyXG4gICAgICAgICAgICBbc3VmZml4XT1cInN1ZmZpeFwiXHJcbiAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXHJcbiAgICAgICAgICAgIFttb2RlXT1cImN1cnJlbmN5ID8gJ2N1cnJlbmN5JyA6ICdkZWNpbWFsJ1wiXHJcbiAgICAgICAgICAgIFtsb2NhbGVdPVwibG9jYWxlXCJcclxuICAgICAgICAgICAgW2xvY2FsZU1hdGNoZXJdPVwibG9jYWxlTWF0Y2hlclwiXHJcbiAgICAgICAgICAgIFtjdXJyZW5jeV09XCJjdXJyZW5jeVwiXHJcbiAgICAgICAgICAgIFtjdXJyZW5jeURpc3BsYXldPVwiY3VycmVuY3lEaXNwbGF5XCJcclxuICAgICAgICAgICAgW3VzZUdyb3VwaW5nXT1cInVzZUdyb3VwaW5nXCJcclxuICAgICAgICA+PC9jYXgtaW5wdXROdW1iZXI+XHJcbiAgICAgICAgPGNheC10cmlTdGF0ZUNoZWNrYm94IFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCIgKm5nU3dpdGNoQ2FzZT1cIidib29sZWFuJ1wiIFtuZ01vZGVsXT1cImZpbHRlckNvbnN0cmFpbnQ/LnZhbHVlXCIgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCI+PC9jYXgtdHJpU3RhdGVDaGVja2JveD5cclxuICAgICAgICA8Y2F4LWNhbGVuZGFyIFthcmlhTGFiZWxdPVwiYXJpYUxhYmVsXCIgKm5nU3dpdGNoQ2FzZT1cIidkYXRlJ1wiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIFtuZ01vZGVsXT1cImZpbHRlckNvbnN0cmFpbnQ/LnZhbHVlXCIgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCIgYXBwZW5kVG89XCJib2R5XCI+PC9jYXgtY2FsZW5kYXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuIl19

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

@@ -296,6 +296,7 @@ class Calendar {
      * Separator of time selector.
      * @group Props
      */
+    labelText;
     timeSeparator = ':';
     leftIcon = true;
     //@Input() rightIcon: boolean= false;
@@ -2983,7 +2984,7 @@ class Calendar {
         this.onInlineCancelled.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", 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], 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: "<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;max-width:100%}.cax-calendar .cax-inputtext{flex:1 1 auto;width:1%;text-overflow:ellipsis;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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", 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%;height:40px}.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;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: [
             trigger('overlayAnimation', [
                 state('visibleTouchUI', style({
                     transform: 'translate(-50%,-50%)',
@@ -3024,7 +3025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '[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: "<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;max-width:100%}.cax-calendar .cax-inputtext{flex:1 1 auto;width:1%;text-overflow:ellipsis;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, 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%;height:40px}.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;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"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3156,6 +3157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], touchUI: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], labelText: [{
+                type: Input
             }], timeSeparator: [{
                 type: Input
             }], leftIcon: [{