primeng/fesm2022/primeng-calendar.mjs.map

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

{"version":3,"file":"primeng-calendar.mjs","sources":["../../src/app/components/calendar/calendar.ts","../../src/app/components/calendar/primeng-calendar.ts"],"sourcesContent":["import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Inject,\n    Input,\n    NgModule,\n    NgZone,\n    numberAttribute,\n    OnDestroy,\n    OnInit,\n    Output,\n    QueryList,\n    Renderer2,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { ButtonModule } from 'primeng/button';\nimport { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';\nimport { RippleModule } from 'primeng/ripple';\nimport { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';\nimport { Subscription } from 'rxjs';\nimport { ChevronLeftIcon } from 'primeng/icons/chevronleft';\nimport { ChevronRightIcon } from 'primeng/icons/chevronright';\nimport { ChevronUpIcon } from 'primeng/icons/chevronup';\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { CalendarIcon } from 'primeng/icons/calendar';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { NavigationState, CalendarResponsiveOptions, CalendarTypeView, LocaleSettings, Month, CalendarMonthChangeEvent, CalendarYearChangeEvent } from './calendar.interface';\nimport { AutoFocusModule } from 'primeng/autofocus';\n\nexport const CALENDAR_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Calendar),\n    multi: true\n};\n/**\n * Calendar also known as DatePicker, is a form component to work with dates.\n * @group Components\n */\n@Component({\n    selector: 'p-calendar',\n    template: `\n        <span\n            #container\n            [ngClass]=\"{\n                'p-calendar': true,\n                'p-input-icon-right': showIcon && iconDisplay === 'input',\n                'p-calendar-w-btn': showIcon && iconDisplay === 'button',\n                'p-calendar-timeonly': timeOnly,\n                'p-calendar-disabled': disabled,\n                'p-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                    pAutoFocus\n                    [autofocus]=\"autofocus\"\n                />\n                <ng-container *ngIf=\"showClear && !disabled && value != null\">\n                    <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'p-calendar-clear-icon'\" (click)=\"clear()\" />\n                    <span *ngIf=\"clearIconTemplate\" class=\"p-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                    pButton\n                    pRipple\n                    *ngIf=\"showIcon && iconDisplay === 'button'\"\n                    (click)=\"onButtonClick($event, inputfield)\"\n                    class=\"p-datepicker-trigger p-button-icon-only\"\n                    [disabled]=\"disabled\"\n                    tabindex=\"0\"\n                >\n                    <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n                    <ng-container *ngIf=\"!icon\">\n                        <CalendarIcon *ngIf=\"!triggerIconTemplate\" />\n                        <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                    </ng-container>\n                </button>\n                <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n                    <CalendarIcon\n                        (click)=\"onButtonClick($event)\"\n                        *ngIf=\"!inputIconTemplate\"\n                        [ngClass]=\"{\n                            'p-datepicker-icon': showOnFocus\n                        }\"\n                    />\n                    <ng-container *ngTemplateOutlet=\"inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n                </ng-container>\n            </ng-template>\n            <div\n                #contentWrapper\n                [attr.id]=\"panelId\"\n                [class]=\"panelStyleClass\"\n                [ngStyle]=\"panelStyle\"\n                [ngClass]=\"{\n                    'p-datepicker p-component': true,\n                    'p-datepicker-inline': inline,\n                    'p-disabled': disabled,\n                    'p-datepicker-timeonly': timeOnly,\n                    'p-datepicker-multiple-month': this.numberOfMonths > 1,\n                    'p-datepicker-monthpicker': view === 'month',\n                    'p-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=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" [attr.aria-label]=\"prevIconAriaLabel\" pRipple>\n                                    <ChevronLeftIcon [styleClass]=\"'p-datepicker-prev-icon'\" *ngIf=\"!previousIconTemplate\" />\n                                    <span *ngIf=\"previousIconTemplate\" class=\"p-datepicker-prev-icon\">\n                                        <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n                                    </span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <button\n                                        type=\"button\"\n                                        (click)=\"switchToMonthView($event)\"\n                                        (keydown)=\"onContainerButtonKeydown($event)\"\n                                        *ngIf=\"currentView === 'date'\"\n                                        class=\"p-datepicker-month p-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=\"p-datepicker-year p-link\"\n                                        [disabled]=\"switchViewButtonDisabled()\"\n                                        [attr.aria-label]=\"getTranslation('chooseYear')\"\n                                    >\n                                        {{ getYear(month) }}\n                                    </button>\n                                    <span class=\"p-datepicker-decade\" *ngIf=\"currentView === 'year'\">\n                                        <ng-container *ngIf=\"!decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                        <ng-container *ngTemplateOutlet=\"decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                                    </span>\n                                </div>\n                                <button\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    class=\"p-datepicker-next p-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                                    pRipple\n                                >\n                                    <ChevronRightIcon [styleClass]=\"'p-datepicker-next-icon'\" *ngIf=\"!nextIconTemplate\" />\n                                    <span *ngIf=\"nextIconTemplate\" class=\"p-datepicker-next-icon\">\n                                        <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n                                    </span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"currentView === 'date'\">\n                                <table class=\"p-datepicker-calendar\" role=\"grid\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-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=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{ month.weekNumbers[j] }}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [ngClass]=\"{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span\n                                                        [ngClass]=\"{ 'p-highlight': isSelected(date) && date.selectable, 'p-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                                                        pRipple\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=\"p-hidden-accessible\" aria-live=\"polite\">\n                                                        {{ date.day }}\n                                                    </div>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-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=\"p-monthpicker-month\"\n                            [ngClass]=\"{ 'p-highlight': isMonthSelected(i), 'p-disabled': isMonthDisabled(i) }\"\n                            pRipple\n                        >\n                            {{ m }}\n                            <div *ngIf=\"isMonthSelected(i)\" class=\"p-hidden-accessible\" aria-live=\"polite\">\n                                {{ m }}\n                            </div>\n                        </span>\n                    </div>\n                    <div class=\"p-yearpicker\" *ngIf=\"currentView === 'year'\">\n                        <span\n                            *ngFor=\"let y of yearPickerValues()\"\n                            (click)=\"onYearSelect($event, y)\"\n                            (keydown)=\"onYearCellKeydown($event, y)\"\n                            class=\"p-yearpicker-year\"\n                            [ngClass]=\"{ 'p-highlight': isYearSelected(y), 'p-disabled': isYearDisabled(y) }\"\n                            pRipple\n                        >\n                            {{ y }}\n                            <div *ngIf=\"isYearSelected(y)\" class=\"p-hidden-accessible\" aria-live=\"polite\">\n                                {{ y }}\n                            </div>\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n                    <div class=\"p-hour-picker\">\n                        <button\n                            class=\"p-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                            pRipple\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=\"p-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                            pRipple\n                        >\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{ timeSeparator }}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button\n                            class=\"p-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                            pRipple\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=\"p-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                            pRipple\n                        >\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{ timeSeparator }}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button\n                            class=\"p-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                            pRipple\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=\"p-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                            pRipple\n                        >\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat == '12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('am')\" pRipple>\n                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate\"></ng-template>\n                        </button>\n                        <span>{{ pm ? 'PM' : 'AM' }}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" [attr.aria-label]=\"getTranslation('pm')\" pRipple>\n                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    `,\n    animations: [\n        trigger('overlayAnimation', [\n            state(\n                'visibleTouchUI',\n                style({\n                    transform: 'translate(-50%,-50%)',\n                    opacity: 1\n                })\n            ),\n            transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))]),\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))]),\n            transition('void => visibleTouchUI', [style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),\n            transition('visibleTouchUI => void', [\n                animate(\n                    '{{hideTransitionParams}}',\n                    style({\n                        opacity: 0,\n                        transform: 'translate3d(-50%, -40%, 0) scale(0.9)'\n                    })\n                )\n            ])\n        ])\n    ],\n    host: {\n        class: 'p-element p-inputwrapper',\n        '[class.p-inputwrapper-filled]': 'filled',\n        '[class.p-inputwrapper-focus]': 'focus',\n        '[class.p-calendar-clearable]': 'showClear && !disabled'\n    },\n    providers: [CALENDAR_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./calendar.css']\n})\nexport class Calendar implements OnInit, OnDestroy, ControlValueAccessor {\n    @Input() iconDisplay: 'input' | 'button' = 'button';\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the input field.\n     * @group Props\n     */\n    @Input() inputStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Name of the input element.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * Style class of the input field.\n     * @group Props\n     */\n    @Input() inputStyleClass: string | undefined;\n    /**\n     * Placeholder text for the input.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Defines a string that labels the input for accessibility.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n\n    /**\n     * Defines a string that labels the icon button for accessibility.\n     * @group Props\n     */\n    @Input() iconAriaLabel: string | undefined;\n    /**\n     * When specified, disables the component.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    /**\n     * Format of the date which can also be defined at locale settings.\n     * @group Props\n     */\n    @Input() dateFormat: string | undefined;\n    /**\n     * Separator for multiple selection mode.\n     * @group Props\n     */\n    @Input() multipleSeparator: string = ',';\n    /**\n     * Separator for joining start and end dates on range selection mode.\n     * @group Props\n     */\n    @Input() rangeSeparator: string = '-';\n    /**\n     * When enabled, displays the calendar as inline. Default is false for popup mode.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) inline: boolean = false;\n    /**\n     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showOtherMonths: boolean = true;\n    /**\n     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) selectOtherMonths: boolean | undefined;\n    /**\n     * When enabled, displays a button with icon next to input.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showIcon: boolean | undefined;\n    /**\n     * Icon of the calendar button.\n     * @group Props\n     */\n    @Input() icon: string | undefined;\n    /**\n     * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having#mydiv as variable name).\n     * @group Props\n     */\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n    /**\n     * When specified, prevents entering the date manually with keyboard.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonlyInput: boolean | undefined;\n    /**\n     * The cutoff year for determining the century for a date.\n     * @group Props\n     */\n    @Input() shortYearCutoff: any = '+10';\n    /**\n     * Whether the month should be rendered as a dropdown instead of text.\n     * @group Props\n     * @deprecated Navigator is always on.\n     */\n    @Input({ transform: booleanAttribute }) monthNavigator: boolean | undefined;\n    /**\n     * Whether the year should be rendered as a dropdown instead of text.\n     * @group Props\n     * @deprecated  Navigator is always on.\n     */\n    @Input({ transform: booleanAttribute }) yearNavigator: boolean | undefined;\n    /**\n     * Specifies 12 or 24 hour format.\n     * @group Props\n     */\n    @Input() hourFormat: string = '24';\n    /**\n     * Whether to display timepicker only.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) timeOnly: boolean | undefined;\n    /**\n     * Years to change per step in yearpicker.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) stepYearPicker: number = 10;\n    /**\n     * Hours to change per step.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) stepHour: number = 1;\n    /**\n     * Minutes to change per step.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) stepMinute: number = 1;\n    /**\n     * Seconds to change per step.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) stepSecond: number = 1;\n    /**\n     * Whether to show the seconds in time picker.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showSeconds: boolean = false;\n    /**\n     * When present, it specifies that an input field must be filled out before submitting the form.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) required: boolean | undefined;\n    /**\n     * When disabled, datepicker will not be visible with input focus.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showOnFocus: boolean = true;\n    /**\n     * When enabled, calendar will show week numbers.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showWeek: boolean = false;\n    /**\n     * When enabled, calendar will start week numbers from first day of the year.\n     * @group Props\n     */\n    @Input() startWeekFromFirstDayOfYear: boolean = false;\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showClear: boolean = false;\n    /**\n     * Type of the value to write back to ngModel, default is date and alternative is string.\n     * @group Props\n     */\n    @Input() dataType: string = 'date';\n    /**\n     * Defines the quantity of the selection, valid values are \"single\", \"multiple\" and \"range\".\n     * @group Props\n     */\n    @Input() selectionMode: 'single' | 'multiple' | 'range' | undefined = 'single';\n    /**\n     * Maximum number of selectable dates in multiple mode.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) maxDateCount: number | undefined;\n    /**\n     * Whether to display today and clear buttons at the footer\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showButtonBar: boolean | undefined;\n    /**\n     * Style class of the today button.\n     * @group Props\n     */\n    @Input() todayButtonStyleClass: string = 'p-button-text';\n    /**\n     * Style class of the clear button.\n     * @group Props\n     */\n    @Input() clearButtonStyleClass: string = 'p-button-text';\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n    /**\n     * Whether to automatically manage layering.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoZIndex: boolean = true;\n    /**\n     * Base zIndex value to use in layering.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) baseZIndex: number = 0;\n    /**\n     * Style class of the datetimepicker container element.\n     * @group Props\n     */\n    @Input() panelStyleClass: string | undefined;\n    /**\n     * Inline style of the datetimepicker container element.\n     * @group Props\n     */\n    @Input() panelStyle: any;\n    /**\n     * Keep invalid value when input blur.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) keepInvalid: boolean = false;\n    /**\n     * Whether to hide the overlay on date selection.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) hideOnDateTimeSelect: boolean = true;\n    /**\n     * When enabled, calendar overlay is displayed as optimized for touch devices.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) touchUI: boolean | undefined;\n    /**\n     * Separator of time selector.\n     * @group Props\n     */\n    @Input() timeSeparator: string = ':';\n    /**\n     * When enabled, can only focus on elements inside the calendar.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) focusTrap: boolean = true;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '.1s linear';\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * The minimum selectable date.\n     * @group Props\n     */\n    @Input() get minDate(): Date | undefined | null {\n        return this._minDate;\n    }\n    set minDate(date: Date | undefined | null) {\n        this._minDate = date;\n\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * The maximum selectable date.\n     * @group Props\n     */\n    @Input() get maxDate(): Date | undefined | null {\n        return this._maxDate;\n    }\n    set maxDate(date: Date | undefined | null) {\n        this._maxDate = date;\n\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * Array with dates that should be disabled (not selectable).\n     * @group Props\n     */\n    @Input() get disabledDates(): Date[] {\n        return this._disabledDates;\n    }\n    set disabledDates(disabledDates: Date[]) {\n        this._disabledDates = disabledDates;\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * Array with weekday numbers that should be disabled (not selectable).\n     * @group Props\n     */\n    @Input() get disabledDays(): number[] {\n        return this._disabledDays;\n    }\n    set disabledDays(disabledDays: number[]) {\n        this._disabledDays = disabledDays;\n\n        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    /**\n     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).\n     * @group Props\n     * @deprecated Years are based on decades by default.\n     */\n    @Input() get yearRange(): string {\n        return this._yearRange;\n    }\n    set yearRange(yearRange: string) {\n        this._yearRange = yearRange;\n\n        if (yearRange) {\n            const years = yearRange.split(':');\n            const yearStart = parseInt(years[0]);\n            const yearEnd = parseInt(years[1]);\n\n            this.populateYearOptions(yearStart, yearEnd);\n        }\n    }\n    /**\n     * Whether to display timepicker.\n     * @group Props\n     */\n    @Input() get showTime(): boolean {\n        return this._showTime;\n    }\n    set showTime(showTime: boolean) {\n        this._showTime = showTime;\n\n        if (this.currentHour === undefined) {\n            this.initTime(this.value || new Date());\n        }\n        this.updateInputfield();\n    }\n    /**\n     * An array of options for responsive design.\n     * @group Props\n     */\n    @Input() get responsiveOptions(): CalendarResponsiveOptions[] {\n        return this._responsiveOptions;\n    }\n    set responsiveOptions(responsiveOptions: CalendarResponsiveOptions[]) {\n        this._responsiveOptions = responsiveOptions;\n\n        this.destroyResponsiveStyleElement();\n        this.createResponsiveStyle();\n    }\n    /**\n     * Number of months to display.\n     * @group Props\n     */\n    @Input() get numberOfMonths(): number {\n        return this._numberOfMonths;\n    }\n    set numberOfMonths(numberOfMonths: number) {\n        this._numberOfMonths = numberOfMonths;\n\n        this.destroyResponsiveStyleElement();\n        this.createResponsiveStyle();\n    }\n    /**\n     * Defines the first of the week for various date calculations.\n     * @group Props\n     */\n    @Input() get firstDayOfWeek(): number {\n        return this._firstDayOfWeek;\n    }\n    set firstDayOfWeek(firstDayOfWeek: number) {\n        this._firstDayOfWeek = firstDayOfWeek;\n\n        this.createWeekDays();\n    }\n    /**\n     * Option to set calendar locale.\n     * @group Props\n     * @deprecated Locale property has no effect, use new i18n API instead.\n     */\n    @Input() set locale(newLocale: LocaleSettings) {\n        console.warn('Locale property has no effect, use new i18n API instead.');\n    }\n    /**\n     * Type of view to display, valid values are \"date\" for datepicker and \"month\" for month picker.\n     * @group Props\n     */\n    @Input() get view(): CalendarTypeView {\n        return this._view;\n    }\n    set view(view: CalendarTypeView) {\n        this._view = view;\n        this.currentView = this._view;\n    }\n    /**\n     * Set the date to highlight on first opening if the field is blank.\n     * @group Props\n     */\n    @Input() get defaultDate(): Date {\n        return this._defaultDate;\n    }\n    set defaultDate(defaultDate: Date) {\n        this._defaultDate = defaultDate;\n\n        if (this.initialized) {\n            const date = defaultDate || new Date();\n            this.currentMonth = date.getMonth();\n            this.currentYear = date.getFullYear();\n            this.initTime(date);\n            this.createMonths(this.currentMonth, this.currentYear);\n        }\n    }\n    get inputClass() {\n        return {\n            'p-inputtext p-component': true,\n            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'\n        };\n    }\n\n    /**\n     * Callback to invoke on focus of input field.\n     * @param {Event} event - browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke on blur of input field.\n     * @param {Event} event - browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when date panel closed.\n     * @param {Event} event - Mouse event\n     * @group Emits\n     */\n    @Output() onClose: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke on date select.\n     * @param {Date} date - date value.\n     * @group Emits\n     */\n    @Output() onSelect: EventEmitter<Date> = new EventEmitter<Date>();\n    /**\n     * Callback to invoke when input field cleared.\n     * @group Emits\n     */\n    @Output() onClear: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when input field is being typed.\n     * @param {Event} event - browser event\n     * @group Emits\n     */\n    @Output() onInput: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when today button is clicked.\n     * @param {Date} date - today as a date instance.\n     * @group Emits\n     */\n    @Output() onTodayClick: EventEmitter<Date> = new EventEmitter<Date>();\n    /**\n     * Callback to invoke when clear button is clicked.\n     * @param {Event} event - browser event.\n     * @group Emits\n     */\n    @Output() onClearClick: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when a month is changed using the navigators.\n     * @param {CalendarMonthChangeEvent} event - custom month change event.\n     * @group Emits\n     */\n    @Output() onMonthChange: EventEmitter<CalendarMonthChangeEvent> = new EventEmitter<CalendarMonthChangeEvent>();\n    /**\n     * Callback to invoke when a year is changed using the navigators.\n     * @param {CalendarYearChangeEvent} event - custom year change event.\n     * @group Emits\n     */\n    @Output() onYearChange: EventEmitter<CalendarYearChangeEvent> = new EventEmitter<CalendarYearChangeEvent>();\n    /**\n     * Callback to invoke when clicked outside of the date panel.\n     * @group Emits\n     */\n    @Output() onClickOutside: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when datepicker panel is shown.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<any> = new EventEmitter<any>();\n\n    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;\n\n    @ViewChild('container', { static: false }) containerViewChild: Nullable<ElementRef>;\n\n    @ViewChild('inputfield', { static: false }) inputfieldViewChild: Nullable<ElementRef>;\n\n    @ViewChild('contentWrapper', { static: false }) set content(content: ElementRef) {\n        this.contentViewChild = content;\n\n        if (this.contentViewChild) {\n            if (this.isMonthNavigate) {\n                Promise.resolve(null).then(() => this.updateFocus());\n                this.isMonthNavigate = false;\n            } else {\n                if (!this.focus && !this.inline) {\n                    this.initFocusableCell();\n                }\n            }\n        }\n    }\n\n    contentViewChild!: ElementRef;\n\n    value: any;\n\n    dates: Nullable<Date[]>;\n\n    months!: Month[];\n\n    weekDays: Nullable<string[]>;\n\n    currentMonth!: number;\n\n    currentYear!: number;\n\n    currentHour: Nullable<number>;\n\n    currentMinute: Nullable<number>;\n\n    currentSecond: Nullable<number>;\n\n    pm: Nullable<boolean>;\n\n    mask: Nullable<HTMLDivElement>;\n\n    maskClickListener: VoidListener;\n\n    overlay: Nullable<HTMLDivElement>;\n\n    responsiveStyleElement: HTMLStyleElement | undefined | null;\n\n    overlayVisible: Nullable<boolean>;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    calendarElement: Nullable<HTMLElement | ElementRef>;\n\n    timePickerTimer: any;\n\n    documentClickListener: VoidListener;\n\n    animationEndListener: VoidListener;\n\n    ticksTo1970: Nullable<number>;\n\n    yearOptions: Nullable<number[]>;\n\n    focus: Nullable<boolean>;\n\n    isKeydown: Nullable<boolean>;\n\n    filled: Nullable<boolean>;\n\n    inputFieldValue: Nullable<string> = null;\n\n    _minDate?: Date | null;\n\n    _maxDate?: Date | null;\n\n    _showTime!: boolean;\n\n    _yearRange!: string;\n\n    preventDocumentListener: Nullable<boolean>;\n\n    dateTemplate: Nullable<TemplateRef<any>>;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    footerTemplate: Nullable<TemplateRef<any>>;\n\n    disabledDateTemplate: Nullable<TemplateRef<any>>;\n\n    decadeTemplate: Nullable<TemplateRef<any>>;\n\n    previousIconTemplate: Nullable<TemplateRef<any>>;\n\n    nextIconTemplate: Nullable<TemplateRef<any>>;\n\n    triggerIconTemplate: Nullable<TemplateRef<any>>;\n\n    clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    decrementIconTemplate: Nullable<TemplateRef<any>>;\n\n    incrementIconTemplate: Nullable<TemplateRef<any>>;\n\n    inputIconTemplate: Nullable<TemplateRef<any>>;\n\n    _disabledDates!: Array<Date>;\n\n    _disabledDays!: Array<number>;\n\n    selectElement: Nullable;\n\n    todayElement: Nullable;\n\n    focusElement: Nullable;\n\n    scrollHandler: Nullable<ConnectedOverlayScrollHandler>;\n\n    documentResizeListener: VoidListener;\n\n    navigationState: Nullable<NavigationState> = null;\n\n    isMonthNavigate: Nullable<boolean>;\n\n    initialized: Nullable<boolean>;\n\n    translationSubscription: Nullable<Subscription>;\n\n    _locale!: LocaleSettings;\n\n    _responsiveOptions!: CalendarResponsiveOptions[];\n\n    currentView: Nu