cax-design-system 2.8.0 → 2.8.1

package/fesm2022/cax-design-system-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-button.mjs","sources":["../../src/app/components/button/button.ts","../../src/app/components/button/button.html","../../src/app/components/button/button.directive.ts","../../src/app/components/button/button.module.ts","../../src/app/components/button/cax-design-system-button.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input, Output, QueryList, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { CaxTemplate } from 'cax-design-system/api';\nimport { booleanAttribute, numberAttribute } from '@angular/core';\nimport { NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport { Ripple } from 'cax-design-system/ripple';\nimport { AutoFocus } from 'cax-design-system/autofocus';\nimport { SpinnerIcon } from 'cax-design-system/icons/spinner';\n\ntype ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';\n\n@Component({\n    selector: 'cax-button',\n    templateUrl: './button.html',\n    standalone: true,\n    imports: [NgIf, NgTemplateOutlet, NgStyle, NgClass, Ripple, AutoFocus, SpinnerIcon],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'cax-element',\n        '[class.cax-disabled]': 'disabled' || 'loading'\n    }\n})\nexport class Button implements AfterContentInit {\n    @Input() type: string = 'button';\n    @Input() iconPos: ButtonIconPosition = 'left';\n    @Input() icon: string | undefined;\n    @Input() badge: string | undefined;\n    @Input() rightIcon: string | undefined;\n    @Input() leftIcon: string | undefined;\n    @Input() label: string | undefined;\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    @Input({ transform: booleanAttribute }) loading: boolean = false;\n    @Input() loadingIcon: string | undefined;\n    @Input({ transform: booleanAttribute }) raised: boolean = false;\n    @Input({ transform: booleanAttribute }) rounded: boolean = false;\n    @Input({ transform: booleanAttribute }) text: boolean = false;\n    @Input({ transform: booleanAttribute }) plain: boolean = false;\n    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n    @Input({ transform: booleanAttribute }) outlined: boolean = false;\n    @Input({ transform: booleanAttribute }) link: boolean = false;\n    @Input({ transform: numberAttribute }) tabindex: number | undefined;\n    @Input() size: 'small' | 'medium' | 'large' | undefined = 'medium';\n    @Input() style: { [klass: string]: any } | null | undefined;\n    @Input() styleClass: string | undefined;\n    @Input() badgeClass: string | undefined;\n    @Input() ariaLabel: string | undefined;\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n\n    @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n    @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n    @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n\n    contentTemplate: TemplateRef<any> | undefined;\n    loadingIconTemplate: TemplateRef<any> | undefined;\n    iconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    constructor(public el: ElementRef) {}\n\n    spinnerIconClass(): string {\n        return Object.entries(this.iconClass())\n            .filter(([, value]) => !!value)\n            .reduce((acc, [key]) => acc + ` ${key}`, 'cax-button-loading-icon');\n    }\n\n    iconClass() {\n        const iconClasses = {\n            'cax-button-icon': true,\n            'cax-button-icon-left': this.iconPos === 'left' && this.label,\n            'cax-button-icon-right': this.iconPos === 'right' && this.label,\n            'cax-button-icon-top': this.iconPos === 'top' && this.label,\n            'cax-button-icon-bottom': this.iconPos === 'bottom' && this.label\n        };\n\n        if (this.loading) {\n            iconClasses[`cax-button-loading-icon cax-spin ${this.loadingIcon ?? ''}`] = true;\n        } else if (this.icon) {\n            iconClasses[this.icon] = true;\n        }\n\n        return iconClasses;\n    }\n\n    get buttonClass() {\n        return {\n            'cax-button cax-component': true,\n            'cax-button-icon-only': (this.icon || this.iconTemplate || this.loadingIcon || this.loadingIconTemplate) && !this.label,\n            'cax-button-center-icon': !this.label,\n            'cax-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,\n            'cax-button-loading': this.loading,\n            'cax-button-link': this.link,\n            [`cax-button-${this.severity}`]: this.severity,\n            'cax-button-raised': this.raised,\n            'cax-button-rounded': this.rounded,\n            'cax-button-text': this.text,\n            'cax-button-outlined': this.outlined,\n            'cax-button-sm': this.size === 'small',\n            'cax-button-md': this.size === 'medium',\n            'cax-button-lg': this.size === 'large',\n            'cax-button-plain': this.plain,\n            [`${this.styleClass}`]: this.styleClass\n        };\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n                case 'icon':\n                    this.iconTemplate = item.template;\n                    break;\n                case 'loadingicon':\n                    this.loadingIconTemplate = item.template;\n                    break;\n                default:\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    badgeStyleClass() {\n        return {\n            'cax-badge cax-component': true,\n            'cax-badge-no-gutter': this.badge && String(this.badge).length === 1\n        };\n    }\n\n    public focus() {\n        this.el.nativeElement.firstChild.focus();\n    }\n}\n","<button\n    [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ngStyle]=\"style\"\n    [disabled]=\"disabled || loading\"\n    [ngClass]=\"buttonClass\"\n    (click)=\"onClick.emit($event)\"\n    (focus)=\"onFocus.emit($event)\"\n    (blur)=\"onBlur.emit($event)\"\n    caxRipple\n    [attr.data-pc-name]=\"'button'\"\n    [attr.data-pc-section]=\"'root'\"\n    [attr.tabindex]=\"tabindex\"\n    caxAutoFocus\n    [autofocus]=\"autofocus\"\n>\n    <ng-container *ngIf=\"loading\" class=\"cax-button-content-wrapper\">\n        <ng-container class=\"cax-button-loading-container\">\n            <SpinnerIcon [styleClass]=\"spinnerIconClass()\" class=\"cax-main-loader cax-button-label\" [spin]=\"true\" [attr.aria-hidden]=\"true\" [attr.data-pc-section]=\"'loadingicon'\" />\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!loading\">\n        <!-- Center Icon when there's no label -->\n        <ng-container *ngIf=\"!label\">\n            <span *ngIf=\"icon\" class=\"cax-button-icon-center\" [ngClass]=\"icon\"></span>\n        </ng-container>\n\n        <!-- Left and Right Icons with Label -->\n        <ng-container class=\"cax-button-content-wrapper\" *ngIf=\"label\">\n            <!-- Left Icon -->\n            <ng-container *ngIf=\"leftIcon\">\n                <span class=\"cax-button-icon-left\" [ngClass]=\"leftIcon\"></span>\n            </ng-container>\n            <!-- Label -->\n            <span class=\"cax-button-label\">{{ label }}</span>\n            <!-- Right Icon -->\n            <ng-container *ngIf=\"rightIcon\">\n                <span class=\"cax-button-icon-right\" [ngClass]=\"rightIcon\"></span>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n    <!-- Badge -->\n    <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"badge\" [attr.data-pc-section]=\"'badge'\">{{ badge }}</span>\n</button>\n","import { Directive, ElementRef, Input, AfterViewInit, OnDestroy, Inject } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { ObjectUtils } from 'cax-design-system/utils';\nimport { booleanAttribute } from '@angular/core';\n\ntype ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';\n\nconst INTERNAL_BUTTON_CLASSES = {\n    button: 'cax-button',\n    component: 'cax-component',\n    iconOnly: 'cax-button-icon-only',\n    disabled: 'cax-disabled',\n    loading: 'cax-button-loading',\n    labelOnly: 'cax-button-loading-label-only'\n} as const;\n\n@Directive({\n    selector: '[caxButton]',\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class ButtonDirective implements AfterViewInit, OnDestroy {\n    @Input() iconPos: ButtonIconPosition = 'left';\n    @Input() loadingIcon: string | undefined;\n    @Input() get label(): string | undefined {\n        return this._label as string;\n    }\n    set label(val: string) {\n        this._label = val;\n        if (this.initialized) {\n            this.updateLabel();\n            this.updateIcon();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() get icon(): string {\n        return this._icon as string;\n    }\n    set icon(val: string) {\n        this._icon = val;\n        if (this.initialized) {\n            this.updateIcon();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() get loading(): boolean {\n        return this._loading;\n    }\n    set loading(val: boolean) {\n        this._loading = val;\n        if (this.initialized) {\n            this.updateIcon();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n    @Input({ transform: booleanAttribute }) raised: boolean = false;\n    @Input({ transform: booleanAttribute }) rounded: boolean = false;\n    @Input({ transform: booleanAttribute }) text: boolean = false;\n    @Input({ transform: booleanAttribute }) outlined: boolean = false;\n    @Input() size: 'small' | 'medium' | 'large' | undefined | null = 'medium';\n    @Input({ transform: booleanAttribute }) plain: boolean = false;\n    @Input({ transform: booleanAttribute }) link: boolean = false;\n\n    public _label: string | undefined;\n    public _icon: string | undefined;\n    public _loading: boolean = false;\n    public initialized: boolean | undefined;\n\n    private get htmlElement(): HTMLElement {\n        return this.el.nativeElement as HTMLElement;\n    }\n\n    private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);\n\n    constructor(\n        public el: ElementRef,\n        @Inject(DOCUMENT) private document: Document\n    ) {}\n    spinnerIcon = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-icon-spin\">\n    <g clip-path=\"url(#clip0_417_21408)\">\n        <path\n            d=\"M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z\"\n            fill=\"currentColor\"\n        />\n    </g>\n    <defs>\n        <clipPath id=\"clip0_417_21408\">\n            <rect width=\"14\" height=\"14\" fill=\"white\" />\n        </clipPath>\n    </defs>\n</svg>`;\n\n    ngAfterViewInit() {\n        DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));\n\n        this.createIcon();\n        this.createLabel();\n\n        this.initialized = true;\n    }\n\n    getStyleClass(): string[] {\n        const styleClass: string[] = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component];\n\n        if (this.icon && !this.label && ObjectUtils.isEmpty(this.htmlElement.textContent)) {\n            styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);\n        }\n\n        if (this.loading) {\n            styleClass.push(INTERNAL_BUTTON_CLASSES.disabled, INTERNAL_BUTTON_CLASSES.loading);\n\n            if (!this.icon && this.label) {\n                styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly);\n            }\n\n            if (this.icon && !this.label && !ObjectUtils.isEmpty(this.htmlElement.textContent)) {\n                styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);\n            }\n        }\n\n        if (this.text) {\n            styleClass.push('cax-button-text');\n        }\n\n        if (this.severity) {\n            styleClass.push(`cax-button-${this.severity}`);\n        }\n\n        if (this.link) {\n            styleClass.push(`cax-button-link`);\n        }\n\n        if (this.plain) {\n            styleClass.push('cax-button-plain');\n        }\n\n        if (this.raised) {\n            styleClass.push('cax-button-raised');\n        }\n\n        if (this.size) {\n            styleClass.push(`cax-button-${this.size}`);\n        }\n\n        if (this.outlined) {\n            styleClass.push('cax-button-outlined');\n        }\n\n        if (this.rounded) {\n            styleClass.push('cax-button-rounded');\n        }\n\n        if (this.size === 'small') {\n            styleClass.push('cax-button-sm');\n        }\n\n        if (this.size === 'medium') {\n            styleClass.push('cax-button-md');\n        }\n\n        if (this.size === 'large') {\n            styleClass.push('cax-button-lg');\n        }\n\n        return styleClass;\n    }\n\n    setStyleClass() {\n        const styleClass = this.getStyleClass();\n        this.htmlElement.classList.remove(...this._internalClasses);\n        this.htmlElement.classList.add(...styleClass);\n    }\n\n    createLabel() {\n        const created = DomHandler.findSingle(this.htmlElement, '.cax-button-label');\n        if (!created && this.label) {\n            let labelElement = this.document.createElement('span');\n            if (this.icon && !this.label) {\n                labelElement.setAttribute('aria-hidden', 'true');\n            }\n\n            labelElement.className = 'cax-button-label';\n            labelElement.appendChild(this.document.createTextNode(this.label));\n\n            this.htmlElement.appendChild(labelElement);\n        }\n    }\n\n    createIcon() {\n        const created = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');\n        if (!created && (this.icon || this.loading)) {\n            let iconElement = this.document.createElement('span');\n            iconElement.className = 'cax-button-icon';\n            iconElement.setAttribute('aria-hidden', 'true');\n            let iconPosClass = this.label ? 'cax-button-icon-' + this.iconPos : null;\n\n            if (iconPosClass) {\n                DomHandler.addClass(iconElement, iconPosClass);\n            }\n\n            let iconClass = this.getIconClass();\n\n            if (!this.loadingIcon && this.loading) {\n                iconElement.innerHTML = this.spinnerIcon;\n            }\n\n            if (iconClass) {\n                DomHandler.addMultipleClasses(iconElement, iconClass);\n            }\n\n            this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);\n        }\n    }\n\n    updateLabel() {\n        let labelElement = DomHandler.findSingle(this.htmlElement, '.cax-button-label');\n\n        if (!this.label) {\n            labelElement && this.htmlElement.removeChild(labelElement);\n            return;\n        }\n\n        labelElement ? (labelElement.textContent = this.label) : this.createLabel();\n    }\n\n    updateIcon() {\n        let iconElement = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');\n        let labelElement = DomHandler.findSingle(this.htmlElement, '.cax-button-label');\n\n        if (this.loading && !this.loadingIcon && iconElement) {\n            iconElement.innerHTML = this.spinnerIcon;\n        } else if (iconElement?.innerHTML) {\n            iconElement.innerHTML = '';\n        }\n\n        if (iconElement) {\n            if (this.iconPos) {\n                iconElement.className = 'cax-button-icon ' + (labelElement ? 'cax-button-icon-' + this.iconPos : '') + ' ' + this.getIconClass();\n            } else {\n                iconElement.className = 'cax-button-icon ' + this.getIconClass();\n            }\n        } else {\n            this.createIcon();\n        }\n    }\n\n    getIconClass() {\n        return this.loading ? 'cax-button-loading-icon' + (this.loadingIcon ? this.loadingIcon : 'cax-icon') : this.icon || 'cax-hidden';\n    }\n\n    ngOnDestroy() {\n        this.initialized = false;\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { ButtonDirective } from './button.directive';\nimport { Button } from './button';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [ButtonDirective, Button],\n    exports: [ButtonDirective, Button, SharedModule]\n})\nexport class ButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-button.mjs","sources":["../../src/app/components/button/button.ts","../../src/app/components/button/button.html","../../src/app/components/button/button.directive.ts","../../src/app/components/button/button.module.ts","../../src/app/components/button/cax-design-system-button.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input, Output, QueryList, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { CaxTemplate } from 'cax-design-system/api';\nimport { booleanAttribute, numberAttribute } from '@angular/core';\nimport { NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport { Ripple } from 'cax-design-system/ripple';\nimport { AutoFocus } from 'cax-design-system/autofocus';\nimport { SpinnerIcon } from 'cax-design-system/icons/spinner';\n\ntype ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';\n\n@Component({\n    selector: 'cax-button',\n    templateUrl: './button.html',\n    standalone: true,\n    imports: [NgIf, NgTemplateOutlet, NgStyle, NgClass, Ripple, AutoFocus, SpinnerIcon],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'cax-element',\n        '[class.cax-disabled]': 'disabled' || 'loading'\n    }\n})\nexport class Button implements AfterContentInit {\n    @Input() type: string = 'button';\n    @Input() iconPos: ButtonIconPosition = 'left';\n    @Input() icon: string | undefined;\n    @Input() badge: string | undefined;\n    @Input() rightIcon: string | undefined;\n    @Input() leftIcon: string | undefined;\n    @Input() label: string | undefined;\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    @Input({ transform: booleanAttribute }) loading: boolean = false;\n    @Input() loadingIcon: string | undefined;\n    @Input({ transform: booleanAttribute }) raised: boolean = false;\n    @Input({ transform: booleanAttribute }) rounded: boolean = false;\n    @Input({ transform: booleanAttribute }) text: boolean = false;\n    @Input({ transform: booleanAttribute }) plain: boolean = false;\n    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n    @Input({ transform: booleanAttribute }) outlined: boolean = false;\n    @Input({ transform: booleanAttribute }) link: boolean = false;\n    @Input({ transform: numberAttribute }) tabindex: number | undefined;\n    @Input() size: 'small' | 'medium' | 'large' | undefined = 'medium';\n    @Input() style: { [klass: string]: any } | null | undefined;\n    @Input() styleClass: string | undefined;\n    @Input() badgeClass: string | undefined;\n    @Input() ariaLabel: string | undefined;\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n\n    @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n    @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n    @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n\n    contentTemplate: TemplateRef<any> | undefined;\n    loadingIconTemplate: TemplateRef<any> | undefined;\n    iconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    constructor(public el: ElementRef) {}\n\n    spinnerIconClass(): string {\n        return Object.entries(this.iconClass())\n            .filter(([, value]) => !!value)\n            .reduce((acc, [key]) => acc + ` ${key}`, 'cax-button-loading-icon');\n    }\n\n    iconClass() {\n        const iconClasses = {\n            'cax-button-icon': true,\n            'cax-button-icon-left': this.iconPos === 'left' && this.label,\n            'cax-button-icon-right': this.iconPos === 'right' && this.label,\n            'cax-button-icon-top': this.iconPos === 'top' && this.label,\n            'cax-button-icon-bottom': this.iconPos === 'bottom' && this.label\n        };\n\n        if (this.loading) {\n            iconClasses[`cax-button-loading-icon cax-spin ${this.loadingIcon ?? ''}`] = true;\n        } else if (this.icon) {\n            iconClasses[this.icon] = true;\n        }\n\n        return iconClasses;\n    }\n\n    get buttonClass() {\n        return {\n            'cax-button cax-component': true,\n            'cax-button-icon-only': (this.icon || this.iconTemplate || this.loadingIcon || this.loadingIconTemplate) && !this.label,\n            'cax-button-center-icon': !this.label,\n            'cax-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,\n            'cax-button-loading': this.loading,\n            'cax-button-link': this.link,\n            [`cax-button-${this.severity}`]: this.severity,\n            'cax-button-raised': this.raised,\n            'cax-button-rounded': this.rounded,\n            'cax-button-text': this.text,\n            'cax-button-outlined': this.outlined,\n            'cax-button-sm': this.size === 'small',\n            'cax-button-md': this.size === 'medium',\n            'cax-button-lg': this.size === 'large',\n            'cax-button-plain': this.plain,\n            [`${this.styleClass}`]: this.styleClass\n        };\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n                case 'icon':\n                    this.iconTemplate = item.template;\n                    break;\n                case 'loadingicon':\n                    this.loadingIconTemplate = item.template;\n                    break;\n                default:\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    badgeStyleClass() {\n        return {\n            'cax-badge cax-component': true,\n            'cax-badge-no-gutter': this.badge && String(this.badge).length === 1\n        };\n    }\n\n    public focus() {\n        this.el.nativeElement.firstChild.focus();\n    }\n}\n","<button\r\n    [attr.type]=\"type\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"style\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"buttonClass\"\r\n    (click)=\"onClick.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n    (blur)=\"onBlur.emit($event)\"\r\n    caxRipple\r\n    [attr.data-pc-name]=\"'button'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n    [attr.tabindex]=\"tabindex\"\r\n    caxAutoFocus\r\n    [autofocus]=\"autofocus\"\r\n>\r\n    <ng-container *ngIf=\"loading\" class=\"cax-button-content-wrapper\">\r\n        <ng-container class=\"cax-button-loading-container\">\r\n            <SpinnerIcon [styleClass]=\"spinnerIconClass()\" class=\"cax-main-loader cax-button-label\" [spin]=\"true\" [attr.aria-hidden]=\"true\" [attr.data-pc-section]=\"'loadingicon'\" />\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!loading\">\r\n        <!-- Center Icon when there's no label -->\r\n        <ng-container *ngIf=\"!label\">\r\n            <span *ngIf=\"icon\" class=\"cax-button-icon-center\" [ngClass]=\"icon\"></span>\r\n        </ng-container>\r\n\r\n        <!-- Left and Right Icons with Label -->\r\n        <ng-container class=\"cax-button-content-wrapper\" *ngIf=\"label\">\r\n            <!-- Left Icon -->\r\n            <ng-container *ngIf=\"leftIcon\">\r\n                <span class=\"cax-button-icon-left\" [ngClass]=\"leftIcon\"></span>\r\n            </ng-container>\r\n            <!-- Label -->\r\n            <span class=\"cax-button-label\">{{ label }}</span>\r\n            <!-- Right Icon -->\r\n            <ng-container *ngIf=\"rightIcon\">\r\n                <span class=\"cax-button-icon-right\" [ngClass]=\"rightIcon\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <!-- Badge -->\r\n    <span [ngClass]=\"badgeStyleClass()\" [class]=\"badgeClass\" *ngIf=\"badge\" [attr.data-pc-section]=\"'badge'\">{{ badge }}</span>\r\n</button>\r\n","import { Directive, ElementRef, Input, AfterViewInit, OnDestroy, Inject } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { ObjectUtils } from 'cax-design-system/utils';\nimport { booleanAttribute } from '@angular/core';\n\ntype ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';\n\nconst INTERNAL_BUTTON_CLASSES = {\n    button: 'cax-button',\n    component: 'cax-component',\n    iconOnly: 'cax-button-icon-only',\n    disabled: 'cax-disabled',\n    loading: 'cax-button-loading',\n    labelOnly: 'cax-button-loading-label-only'\n} as const;\n\n@Directive({\n    selector: '[caxButton]',\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class ButtonDirective implements AfterViewInit, OnDestroy {\n    @Input() iconPos: ButtonIconPosition = 'left';\n    @Input() loadingIcon: string | undefined;\n    @Input() get label(): string | undefined {\n        return this._label as string;\n    }\n    set label(val: string) {\n        this._label = val;\n        if (this.initialized) {\n            this.updateLabel();\n            this.updateIcon();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() get icon(): string {\n        return this._icon as string;\n    }\n    set icon(val: string) {\n        this._icon = val;\n        if (this.initialized) {\n            this.updateIcon();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() get loading(): boolean {\n        return this._loading;\n    }\n    set loading(val: boolean) {\n        this._loading = val;\n        if (this.initialized) {\n            this.updateIcon();\n            this.setStyleClass();\n        }\n    }\n\n    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n    @Input({ transform: booleanAttribute }) raised: boolean = false;\n    @Input({ transform: booleanAttribute }) rounded: boolean = false;\n    @Input({ transform: booleanAttribute }) text: boolean = false;\n    @Input({ transform: booleanAttribute }) outlined: boolean = false;\n    @Input() size: 'small' | 'medium' | 'large' | undefined | null = 'medium';\n    @Input({ transform: booleanAttribute }) plain: boolean = false;\n    @Input({ transform: booleanAttribute }) link: boolean = false;\n\n    public _label: string | undefined;\n    public _icon: string | undefined;\n    public _loading: boolean = false;\n    public initialized: boolean | undefined;\n\n    private get htmlElement(): HTMLElement {\n        return this.el.nativeElement as HTMLElement;\n    }\n\n    private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);\n\n    constructor(\n        public el: ElementRef,\n        @Inject(DOCUMENT) private document: Document\n    ) {}\n    spinnerIcon = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-icon-spin\">\n    <g clip-path=\"url(#clip0_417_21408)\">\n        <path\n            d=\"M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z\"\n            fill=\"currentColor\"\n        />\n    </g>\n    <defs>\n        <clipPath id=\"clip0_417_21408\">\n            <rect width=\"14\" height=\"14\" fill=\"white\" />\n        </clipPath>\n    </defs>\n</svg>`;\n\n    ngAfterViewInit() {\n        DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));\n\n        this.createIcon();\n        this.createLabel();\n\n        this.initialized = true;\n    }\n\n    getStyleClass(): string[] {\n        const styleClass: string[] = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component];\n\n        if (this.icon && !this.label && ObjectUtils.isEmpty(this.htmlElement.textContent)) {\n            styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);\n        }\n\n        if (this.loading) {\n            styleClass.push(INTERNAL_BUTTON_CLASSES.disabled, INTERNAL_BUTTON_CLASSES.loading);\n\n            if (!this.icon && this.label) {\n                styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly);\n            }\n\n            if (this.icon && !this.label && !ObjectUtils.isEmpty(this.htmlElement.textContent)) {\n                styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);\n            }\n        }\n\n        if (this.text) {\n            styleClass.push('cax-button-text');\n        }\n\n        if (this.severity) {\n            styleClass.push(`cax-button-${this.severity}`);\n        }\n\n        if (this.link) {\n            styleClass.push(`cax-button-link`);\n        }\n\n        if (this.plain) {\n            styleClass.push('cax-button-plain');\n        }\n\n        if (this.raised) {\n            styleClass.push('cax-button-raised');\n        }\n\n        if (this.size) {\n            styleClass.push(`cax-button-${this.size}`);\n        }\n\n        if (this.outlined) {\n            styleClass.push('cax-button-outlined');\n        }\n\n        if (this.rounded) {\n            styleClass.push('cax-button-rounded');\n        }\n\n        if (this.size === 'small') {\n            styleClass.push('cax-button-sm');\n        }\n\n        if (this.size === 'medium') {\n            styleClass.push('cax-button-md');\n        }\n\n        if (this.size === 'large') {\n            styleClass.push('cax-button-lg');\n        }\n\n        return styleClass;\n    }\n\n    setStyleClass() {\n        const styleClass = this.getStyleClass();\n        this.htmlElement.classList.remove(...this._internalClasses);\n        this.htmlElement.classList.add(...styleClass);\n    }\n\n    createLabel() {\n        const created = DomHandler.findSingle(this.htmlElement, '.cax-button-label');\n        if (!created && this.label) {\n            let labelElement = this.document.createElement('span');\n            if (this.icon && !this.label) {\n                labelElement.setAttribute('aria-hidden', 'true');\n            }\n\n            labelElement.className = 'cax-button-label';\n            labelElement.appendChild(this.document.createTextNode(this.label));\n\n            this.htmlElement.appendChild(labelElement);\n        }\n    }\n\n    createIcon() {\n        const created = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');\n        if (!created && (this.icon || this.loading)) {\n            let iconElement = this.document.createElement('span');\n            iconElement.className = 'cax-button-icon';\n            iconElement.setAttribute('aria-hidden', 'true');\n            let iconPosClass = this.label ? 'cax-button-icon-' + this.iconPos : null;\n\n            if (iconPosClass) {\n                DomHandler.addClass(iconElement, iconPosClass);\n            }\n\n            let iconClass = this.getIconClass();\n\n            if (!this.loadingIcon && this.loading) {\n                iconElement.innerHTML = this.spinnerIcon;\n            }\n\n            if (iconClass) {\n                DomHandler.addMultipleClasses(iconElement, iconClass);\n            }\n\n            this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);\n        }\n    }\n\n    updateLabel() {\n        let labelElement = DomHandler.findSingle(this.htmlElement, '.cax-button-label');\n\n        if (!this.label) {\n            labelElement && this.htmlElement.removeChild(labelElement);\n            return;\n        }\n\n        labelElement ? (labelElement.textContent = this.label) : this.createLabel();\n    }\n\n    updateIcon() {\n        let iconElement = DomHandler.findSingle(this.htmlElement, '.cax-button-icon');\n        let labelElement = DomHandler.findSingle(this.htmlElement, '.cax-button-label');\n\n        if (this.loading && !this.loadingIcon && iconElement) {\n            iconElement.innerHTML = this.spinnerIcon;\n        } else if (iconElement?.innerHTML) {\n            iconElement.innerHTML = '';\n        }\n\n        if (iconElement) {\n            if (this.iconPos) {\n                iconElement.className = 'cax-button-icon ' + (labelElement ? 'cax-button-icon-' + this.iconPos : '') + ' ' + this.getIconClass();\n            } else {\n                iconElement.className = 'cax-button-icon ' + this.getIconClass();\n            }\n        } else {\n            this.createIcon();\n        }\n    }\n\n    getIconClass() {\n        return this.loading ? 'cax-button-loading-icon' + (this.loadingIcon ? this.loadingIcon : 'cax-icon') : this.icon || 'cax-hidden';\n    }\n\n    ngOnDestroy() {\n        this.initialized = false;\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { ButtonDirective } from './button.directive';\nimport { Button } from './button';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [ButtonDirective, Button],\n    exports: [ButtonDirective, Button, SharedModule]\n})\nexport class ButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -2984,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], 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}\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n</div>\n<span\n    #container\n    [ngClass]=\"{\n                'cax-calendar': true,\n                'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\n                'cax-input-icon-right': showIcon && iconDisplay === 'input',\n                'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\n                'cax-calendar-timeonly': timeOnly,\n                'cax-calendar-disabled': disabled,\n                'cax-focus': focus || overlayVisible\n            }\"\n    [ngStyle]=\"style\"\n    [class]=\"styleClass\"\n>\n    <ng-template [ngIf]=\"!inline\">\n        <input\n            #inputfield\n            type=\"text\"\n            role=\"combobox\"\n            [attr.id]=\"inputId\"\n            [attr.name]=\"name\"\n            [attr.required]=\"required\"\n            [attr.aria-required]=\"required\"\n            aria-autocomplete=\"none\"\n            aria-haspopup=\"dialog\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [value]=\"inputFieldValue\"\n            (focus)=\"onInputFocus($event)\"\n            (keydown)=\"onInputKeydown($event)\"\n            (click)=\"onInputClick()\"\n            (blur)=\"onInputBlur($event)\"\n            [readonly]=\"readonlyInput\"\n            (input)=\"onUserInput($event)\"\n            [ngStyle]=\"inputStyle\"\n            [class]=\"inputStyleClass\"\n            [placeholder]=\"placeholder || ''\"\n            [disabled]=\"disabled\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.inputmode]=\"touchUI ? 'off' : null\"\n            [ngClass]=\"inputClass\"\n            autocomplete=\"off\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n        <ng-container *ngIf=\"showClear && !disabled && value != null\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear()\" />\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear()\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n        <button\n            type=\"button\"\n            [attr.aria-label]=\"iconButtonAriaLabel\"\n            aria-haspopup=\"dialog\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n            caxButton\n            caxRipple\n            *ngIf=\"showIcon && iconDisplay === 'button'\"\n            (click)=\"onButtonClick($event, inputfield)\"\n            class=\"cax-datepicker-trigger cax-button-icon-only\"\n            [disabled]=\"disabled\"\n            tabindex=\"0\"\n        >\n            <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n            <ng-container *ngIf=\"!icon\">\n                <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\" ></i>\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n            <i class=\"cax cax-calendar-icon\"\n                (click)=\"onButtonClick($event)\"\n                *ngIf=\"!inputIconTemplate\"\n                [ngClass]=\"{\n                            'cax-datepicker-icon': showOnFocus\n                        }\"\n            ></i>\n            <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n        </ng-container>\n    </ng-template>\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n           <i class=\"cax cax-alt-arrow-down cax-downarrow\"></i>\n        </ng-container>\n    \n    <div\n        #contentWrapper\n        [attr.id]=\"panelId\"\n        [class]=\"panelStyleClass\"\n        [ngStyle]=\"panelStyle\"\n        [ngClass]=\"{\n                    'cax-datepicker cax-component': true,\n                    'cax-datepicker-inline': inline,\n                    'cax-disabled': disabled,\n                    'cax-datepicker-timeonly': timeOnly,\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\n                    'cax-datepicker-monthpicker': view === 'month',\n                    'cax-datepicker-touch-ui': touchUI\n                }\"\n        [@overlayAnimation]=\"\n                    touchUI\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                \"\n        [attr.aria-label]=\"getTranslation('chooseDate')\"\n        [attr.role]=\"inline ? null : 'dialog'\"\n        [attr.aria-modal]=\"inline ? null : 'true'\"\n        [@.disabled]=\"inline === true\"\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n        (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\n        (click)=\"onOverlayClick($event)\"\n        *ngIf=\"inline || overlayVisible\"\n    >\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        <ng-container *ngIf=\"!timeOnly\">\n            <div class=\"cax-datepicker-group-container\">\n                <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\n                    <div class=\"cax-datepicker-header\">\n                        <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\n                            <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\n                            <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\n                                <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n                            </span>\n                        </button>\n                        <div class=\"cax-datepicker-title\">\n                            <button\n                                type=\"button\"\n                                (click)=\"switchToMonthView($event)\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                *ngIf=\"currentView === 'date'\"\n                                class=\"cax-datepicker-month cax-link\"\n                                [disabled]=\"switchViewButtonDisabled()\"\n                                [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                            >\n                                {{ getMonthName(month.month) }}\n                            </button>\n                            <button\n                                type=\"button\"\n                                (click)=\"switchToYearView($event)\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                *ngIf=\"currentView !== 'year'\"\n                                class=\"cax-datepicker-year cax-link\"\n                                [disabled]=\"switchViewButtonDisabled()\"\n                                [attr.aria-label]=\"getTranslation('chooseYear')\"\n                            >\n                                {{ getYear(month) }}\n                            </button>\n                            <span class=\"cax-datepicker-decade\" *ngIf=\"currentView === 'year'\">\n                                Year\n                                <!-- <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container> -->\n                            </span>\n                        </div>\n                        <button\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            class=\"cax-datepicker-next cax-link\"\n                            (click)=\"onNextButtonClick($event)\"\n                            [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\n                            type=\"button\"\n                            [attr.aria-label]=\"nextIconAriaLabel\"\n                            caxRipple\n                        >\n                            <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\n                            <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\n                                <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n                            </span>\n                        </button>\n                    </div>\n                    <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\n                        <table class=\"cax-datepicker-calendar\" role=\"grid\">\n                            <thead>\n                                <tr>\n                                    <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\n                                        <span>{{ getTranslation('weekHeader') }}</span>\n                                    </th>\n                                    <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                        <span>{{ weekDay }}</span>\n                                    </th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr *ngFor=\"let week of month.dates; let j = index\">\n                                    <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\n                                        <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\n                                    </td>\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                            <span\n                                                [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable }\"\n                                                (click)=\"onDateSelect($event, date)\"\n                                                draggable=\"false\"\n                                                [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                                                (keydown)=\"onDateCellKeydown($event, date, i)\"\n                                                caxRipple\n                                            >\n                                                <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\n                                                <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\n                                                </ng-container>\n                                                <ng-container *ngIf=\"!date.selectable\">\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                                                </ng-container>\n                                            </span>\n                                            <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\n                                        </ng-container>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </div>\n            <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\n                <span\n                    *ngFor=\"let m of monthPickerValues(); let i = index\"\n                    (click)=\"onMonthSelect($event, i)\"\n                    (keydown)=\"onMonthCellKeydown($event, i)\"\n                    class=\"cax-monthpicker-month\"\n                    [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\n                    caxRipple\n                >\n                    {{ m }}\n                    <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\n                </span>\n            </div>\n            <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\n                <span\n                    *ngFor=\"let y of yearPickerValues()\"\n                    (click)=\"onYearSelect($event, y)\"\n                    (keydown)=\"onYearCellKeydown($event, y)\"\n                    class=\"cax-yearpicker-year\"\n                    [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\n                    caxRipple\n                >\n                    {{ y }}\n                    <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\n                </span>\n            </div>\n        </ng-container>\n        <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n            <div class=\"cax-hour-picker\">\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"incrementHour($event)\"\n                    (keydown.space)=\"incrementHour($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('nextHour')\"\n                    caxRipple\n                >\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"decrementHour($event)\"\n                    (keydown.space)=\"decrementHour($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('prevHour')\"\n                    caxRipple\n                >\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n            <div class=\"cax-separator\">\n                <span>{{ timeSeparator }}</span>\n            </div>\n            <div class=\"cax-minute-picker\">\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"incrementMinute($event)\"\n                    (keydown.space)=\"incrementMinute($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('nextMinute')\"\n                    caxRipple\n                >\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"decrementMinute($event)\"\n                    (keydown.space)=\"decrementMinute($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('prevMinute')\"\n                    caxRipple\n                >\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n            <div class=\"cax-separator\" *ngIf=\"showSeconds\">\n                <span>{{ timeSeparator }}</span>\n            </div>\n            <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"incrementSecond($event)\"\n                    (keydown.space)=\"incrementSecond($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('nextSecond')\"\n                    caxRipple\n                >\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"decrementSecond($event)\"\n                    (keydown.space)=\"decrementSecond($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('prevSecond')\"\n                    caxRipple\n                >\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n            <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span>{{ pm ? 'PM' : 'AM' }}</span>\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n        </div>\n        <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n            <cax-button\n                *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\n                type=\"button\"\n                [link]=\"true\"\n                [label]=\"getTranslation('clear')\"\n                (keydown)=\"onContainerButtonKeydown($event)\"\n                (onClick)=\"onClearButtonClick($event)\"\n                caxRipple\n            ></cax-button>\n            <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\n        </div>\n         <!-- For the inline  -->\n        <div class=\"cax-datepicker-inline-actions\" *ngIf=\"inline\">\n                        <cax-button\n                        [label]=\"'Cancel'\"\n                        [severity]=\"'secondary'\"\n                        [size]=\"'small'\"\n                        (click)=\"onInlineCancel()\">\n                        </cax-button>\n            <div class=\"left-side\">\n            <div class=\"cax-datepicker-inline-input\">\n                <i class=\"cax cax-calendar-minimalistic\"></i>\n                <input\n                    type=\"text\"\n                    [attr.id]=\"inputId\"\n                    [value]=\"formattedInlineDate\"\n                    readonly\n                    class=\"cax-datepicker-inline-display\"\n                />\n            </div>\n            <div class=\"cax-datepicker-inline-buttons\">\n                <cax-button\n                        [label]=\"'Save'\"\n                        [severity]=\"'Primary'\"\n                        [size]=\"'small'\"\n                        (click)=\"onInlineSave()\">\n                </cax-button>\n            </div>\n        </div>\n    </div>\n        <ng-content select=\"cax-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</span>\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: [
+    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%)',
@@ -3025,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: "<div [ngClass]=\"{'cax-calendar-main-label': labelText}\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n</div>\n<span\n    #container\n    [ngClass]=\"{\n                'cax-calendar': true,\n                'cax-input-icon-left': showIcon && iconDisplay === 'input' && leftIcon,\n                'cax-input-icon-right': showIcon && iconDisplay === 'input',\n                'cax-calendar-w-btn': showIcon && iconDisplay === 'button',\n                'cax-calendar-timeonly': timeOnly,\n                'cax-calendar-disabled': disabled,\n                'cax-focus': focus || overlayVisible\n            }\"\n    [ngStyle]=\"style\"\n    [class]=\"styleClass\"\n>\n    <ng-template [ngIf]=\"!inline\">\n        <input\n            #inputfield\n            type=\"text\"\n            role=\"combobox\"\n            [attr.id]=\"inputId\"\n            [attr.name]=\"name\"\n            [attr.required]=\"required\"\n            [attr.aria-required]=\"required\"\n            aria-autocomplete=\"none\"\n            aria-haspopup=\"dialog\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [value]=\"inputFieldValue\"\n            (focus)=\"onInputFocus($event)\"\n            (keydown)=\"onInputKeydown($event)\"\n            (click)=\"onInputClick()\"\n            (blur)=\"onInputBlur($event)\"\n            [readonly]=\"readonlyInput\"\n            (input)=\"onUserInput($event)\"\n            [ngStyle]=\"inputStyle\"\n            [class]=\"inputStyleClass\"\n            [placeholder]=\"placeholder || ''\"\n            [disabled]=\"disabled\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.inputmode]=\"touchUI ? 'off' : null\"\n            [ngClass]=\"inputClass\"\n            autocomplete=\"off\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n        />\n        <ng-container *ngIf=\"showClear && !disabled && value != null\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-calendar-clear-icon'\" (click)=\"clear()\" />\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-calendar-clear-icon\" (click)=\"clear()\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n        <button\n            type=\"button\"\n            [attr.aria-label]=\"iconButtonAriaLabel\"\n            aria-haspopup=\"dialog\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? panelId : null\"\n            caxButton\n            caxRipple\n            *ngIf=\"showIcon && iconDisplay === 'button'\"\n            (click)=\"onButtonClick($event, inputfield)\"\n            class=\"cax-datepicker-trigger cax-button-icon-only\"\n            [disabled]=\"disabled\"\n            tabindex=\"0\"\n        >\n            <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n            <ng-container *ngIf=\"!icon\">\n                <i class=\"cax cax-calendar-icon\" *ngIf=\"!triggerIconTemplate\" ></i>\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n            <i class=\"cax cax-calendar-icon\"\n                (click)=\"onButtonClick($event)\"\n                *ngIf=\"!inputIconTemplate\"\n                [ngClass]=\"{\n                            'cax-datepicker-icon': showOnFocus\n                        }\"\n            ></i>\n            <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n        </ng-container>\n    </ng-template>\n        <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n           <i class=\"cax cax-alt-arrow-down cax-downarrow\"></i>\n        </ng-container>\n    \n    <div\n        #contentWrapper\n        [attr.id]=\"panelId\"\n        [class]=\"panelStyleClass\"\n        [ngStyle]=\"panelStyle\"\n        [ngClass]=\"{\n                    'cax-datepicker cax-component': true,\n                    'cax-datepicker-inline': inline,\n                    'cax-disabled': disabled,\n                    'cax-datepicker-timeonly': timeOnly,\n                    'cax-datepicker-multiple-month': this.numberOfMonths > 1,\n                    'cax-datepicker-monthpicker': view === 'month',\n                    'cax-datepicker-touch-ui': touchUI\n                }\"\n        [@overlayAnimation]=\"\n                    touchUI\n                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\n                \"\n        [attr.aria-label]=\"getTranslation('chooseDate')\"\n        [attr.role]=\"inline ? null : 'dialog'\"\n        [attr.aria-modal]=\"inline ? null : 'true'\"\n        [@.disabled]=\"inline === true\"\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n        (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\"\n        (click)=\"onOverlayClick($event)\"\n        *ngIf=\"inline || overlayVisible\"\n    >\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        <ng-container *ngIf=\"!timeOnly\">\n            <div class=\"cax-datepicker-group-container\">\n                <div class=\"cax-datepicker-group\" *ngFor=\"let month of months; let i = index\">\n                    <div class=\"cax-datepicker-header\">\n                        <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"cax-datepicker-prev cax-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" caxRipple>\n                            <ChevronLeftIcon [styleClass]=\"'cax-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\n                            <span *ngIf=\"previousIconTemplate\" class=\"cax-datepicker-prev-icon\">\n                                <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n                            </span>\n                        </button>\n                        <div class=\"cax-datepicker-title\">\n                            <button\n                                type=\"button\"\n                                (click)=\"switchToMonthView($event)\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                *ngIf=\"currentView === 'date'\"\n                                class=\"cax-datepicker-month cax-link\"\n                                [disabled]=\"switchViewButtonDisabled()\"\n                                [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                            >\n                                {{ getMonthName(month.month) }}\n                            </button>\n                            <button\n                                type=\"button\"\n                                (click)=\"switchToYearView($event)\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                *ngIf=\"currentView !== 'year'\"\n                                class=\"cax-datepicker-year cax-link\"\n                                [disabled]=\"switchViewButtonDisabled()\"\n                                [attr.aria-label]=\"getTranslation('chooseYear')\"\n                            >\n                                {{ getYear(month) }}\n                            </button>\n                            <span class=\"cax-datepicker-decade\" *ngIf=\"currentView === 'year'\">\n                                Year\n                                <!-- <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container> -->\n                            </span>\n                        </div>\n                        <button\n                            (keydown)=\"onContainerButtonKeydown($event)\"\n                            class=\"cax-datepicker-next cax-link\"\n                            (click)=\"onNextButtonClick($event)\"\n                            [style.display]=\"numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'\"\n                            type=\"button\"\n                            [attr.aria-label]=\"nextIconAriaLabel\"\n                            caxRipple\n                        >\n                            <ChevronRightIcon [styleClass]=\"'cax-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\n                            <span *ngIf=\"nextIconTemplate\" class=\"cax-datepicker-next-icon\">\n                                <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n                            </span>\n                        </button>\n                    </div>\n                    <div class=\"cax-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\n                        <table class=\"cax-datepicker-calendar\" role=\"grid\">\n                            <thead>\n                                <tr>\n                                    <th *ngIf=\"showWeek\" class=\"cax-datepicker-weekheader cax-disabled\">\n                                        <span>{{ getTranslation('weekHeader') }}</span>\n                                    </th>\n                                    <th scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                        <span>{{ weekDay }}</span>\n                                    </th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr *ngFor=\"let week of month.dates; let j = index\">\n                                    <td *ngIf=\"showWeek\" class=\"cax-datepicker-weeknumber\">\n                                        <span class=\"cax-disabled\"> {{ month.weekNumbers[j] }} </span>\n                                    </td>\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'cax-datepicker-other-month': date.otherMonth, 'cax-datepicker-today': date.today }\">\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                            <span\n                                                [ngClass]=\"{ 'cax-highlight cax-datepicker-current-day': isSelected(date) && date.selectable, 'cax-disabled': !date.selectable }\"\n                                                (click)=\"onDateSelect($event, date)\"\n                                                draggable=\"false\"\n                                                [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\"\n                                                (keydown)=\"onDateCellKeydown($event, date, i)\"\n                                                caxRipple\n                                            >\n                                                <ng-container *ngIf=\"!dateTemplate && (date.selectable || !disabledDateTemplate)\">{{ date.day }}</ng-container>\n                                                <ng-container *ngIf=\"date.selectable || !disabledDateTemplate\">\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate; context: { $implicit: date }\"></ng-container>\n                                                </ng-container>\n                                                <ng-container *ngIf=\"!date.selectable\">\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate; context: { $implicit: date }\"></ng-container>\n                                                </ng-container>\n                                            </span>\n                                            <div *ngIf=\"isSelected(date)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ date.day }}</div>\n                                        </ng-container>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </div>\n            <div class=\"cax-monthpicker\" *ngIf=\"currentView === 'month'\">\n                <span\n                    *ngFor=\"let m of monthPickerValues(); let i = index\"\n                    (click)=\"onMonthSelect($event, i)\"\n                    (keydown)=\"onMonthCellKeydown($event, i)\"\n                    class=\"cax-monthpicker-month\"\n                    [ngClass]=\"{ 'cax-highlight': isMonthSelected(i), 'cax-disabled': isMonthDisabled(i) }\"\n                    caxRipple\n                >\n                    {{ m }}\n                    <div *ngIf=\"isMonthSelected(i)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ m }}</div>\n                </span>\n            </div>\n            <div class=\"cax-yearpicker\" *ngIf=\"currentView === 'year'\">\n                <span\n                    *ngFor=\"let y of yearPickerValues()\"\n                    (click)=\"onYearSelect($event, y)\"\n                    (keydown)=\"onYearCellKeydown($event, y)\"\n                    class=\"cax-yearpicker-year\"\n                    [ngClass]=\"{ 'cax-highlight': isYearSelected(y), 'cax-disabled': isYearDisabled(y) }\"\n                    caxRipple\n                >\n                    {{ y }}\n                    <div *ngIf=\"isYearSelected(y)\" class=\"cax-hidden-accessible\" aria-live=\"polite\">{{ y }}</div>\n                </span>\n            </div>\n        </ng-container>\n        <div class=\"cax-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n            <div class=\"cax-hour-picker\">\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"incrementHour($event)\"\n                    (keydown.space)=\"incrementHour($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('nextHour')\"\n                    caxRipple\n                >\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"decrementHour($event)\"\n                    (keydown.space)=\"decrementHour($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('prevHour')\"\n                    caxRipple\n                >\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n            <div class=\"cax-separator\">\n                <span>{{ timeSeparator }}</span>\n            </div>\n            <div class=\"cax-minute-picker\">\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"incrementMinute($event)\"\n                    (keydown.space)=\"incrementMinute($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('nextMinute')\"\n                    caxRipple\n                >\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"decrementMinute($event)\"\n                    (keydown.space)=\"decrementMinute($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('prevMinute')\"\n                    caxRipple\n                >\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n            <div class=\"cax-separator\" *ngIf=\"showSeconds\">\n                <span>{{ timeSeparator }}</span>\n            </div>\n            <div class=\"cax-second-picker\" *ngIf=\"showSeconds\">\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"incrementSecond($event)\"\n                    (keydown.space)=\"incrementSecond($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('nextSecond')\"\n                    caxRipple\n                >\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                <button\n                    class=\"cax-link\"\n                    type=\"button\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (keydown.enter)=\"decrementSecond($event)\"\n                    (keydown.space)=\"decrementSecond($event)\"\n                    (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\"\n                    (mouseup)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.enter)=\"onTimePickerElementMouseUp($event)\"\n                    (keyup.space)=\"onTimePickerElementMouseUp($event)\"\n                    (mouseleave)=\"onTimePickerElementMouseLeave()\"\n                    [attr.aria-label]=\"getTranslation('prevSecond')\"\n                    caxRipple\n                >\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n            <div class=\"cax-ampm-picker\" *ngIf=\"hourFormat == '12'\">\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" caxRipple>\n                    <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                </button>\n                <span>{{ pm ? 'PM' : 'AM' }}</span>\n                <button class=\"cax-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" caxRipple>\n                    <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                </button>\n            </div>\n        </div>\n        <div class=\"cax-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n            <cax-button\n                *ngIf=\"currentView !== 'year' && currentView !== 'month'\"\n                type=\"button\"\n                [link]=\"true\"\n                [label]=\"getTranslation('clear')\"\n                (keydown)=\"onContainerButtonKeydown($event)\"\n                (onClick)=\"onClearButtonClick($event)\"\n                caxRipple\n            ></cax-button>\n            <cax-button *ngIf=\"currentView === 'year' || currentView === 'month'\" type=\"button\" [link]=\"true\" [label]=\"'Back'\" (keydown)=\"onContainerButtonKeydown($event)\" (onClick)=\"onBackButtonClick($event)\" caxRipple></cax-button>\n        </div>\n         <!-- For the inline  -->\n        <div class=\"cax-datepicker-inline-actions\" *ngIf=\"inline\">\n                        <cax-button\n                        [label]=\"'Cancel'\"\n                        [severity]=\"'secondary'\"\n                        [size]=\"'small'\"\n                        (click)=\"onInlineCancel()\">\n                        </cax-button>\n            <div class=\"left-side\">\n            <div class=\"cax-datepicker-inline-input\">\n                <i class=\"cax cax-calendar-minimalistic\"></i>\n                <input\n                    type=\"text\"\n                    [attr.id]=\"inputId\"\n                    [value]=\"formattedInlineDate\"\n                    readonly\n                    class=\"cax-datepicker-inline-display\"\n                />\n            </div>\n            <div class=\"cax-datepicker-inline-buttons\">\n                <cax-button\n                        [label]=\"'Save'\"\n                        [severity]=\"'Primary'\"\n                        [size]=\"'small'\"\n                        (click)=\"onInlineSave()\">\n                </cax-button>\n            </div>\n        </div>\n    </div>\n        <ng-content select=\"cax-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</span>\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"] }]
+                    }, 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]