primeng/fesm2022/primeng-datepicker.mjs.map

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

{"version":3,"file":"primeng-datepicker.mjs","sources":["../../src/datepicker/style/datepickerstyle.ts","../../src/datepicker/datepicker.ts","../../src/datepicker/primeng-datepicker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/datepicker';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = /*css*/ `\n    ${style}\n\n    /* For PrimeNG */\n    .p-datepicker.ng-invalid.ng-dirty .p-inputtext {\n        border-color: dt('inputtext.invalid.border.color');\n    }\n`;\n\nconst inlineStyles = {\n    root: () => ({ position: 'relative' })\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-datepicker p-component p-inputwrapper',\n        {\n            'p-invalid': instance.invalid(),\n            'p-datepicker-fluid': instance.hasFluid,\n            'p-inputwrapper-filled': instance.$filled(),\n            'p-variant-filled': instance.$variant() === 'filled',\n            'p-inputwrapper-focus': instance.focus || instance.overlayVisible,\n            'p-focus': instance.focus || instance.overlayVisible\n        }\n    ],\n    pcInputText: 'p-datepicker-input',\n    dropdown: 'p-datepicker-dropdown',\n    inputIconContainer: 'p-datepicker-input-icon-container',\n    inputIcon: 'p-datepicker-input-icon',\n    panel: ({ instance }) => [\n        'p-datepicker-panel p-component',\n        {\n            'p-datepicker-panel p-component': true,\n            'p-datepicker-panel-inline': instance.inline,\n            'p-disabled': instance.$disabled(),\n            'p-datepicker-timeonly': instance.timeOnly\n        }\n    ],\n    calendarContainer: 'p-datepicker-calendar-container',\n    calendar: 'p-datepicker-calendar',\n    header: 'p-datepicker-header',\n    pcPrevButton: 'p-datepicker-prev-button',\n    title: 'p-datepicker-title',\n    selectMonth: 'p-datepicker-select-month',\n    selectYear: 'p-datepicker-select-year',\n    decade: 'p-datepicker-decade',\n    pcNextButton: 'p-datepicker-next-button',\n    dayView: 'p-datepicker-day-view',\n    weekHeader: 'p-datepicker-weekheader p-disabled',\n    weekNumber: 'p-datepicker-weeknumber',\n    weekLabelContainer: 'p-datepicker-weeklabel-container p-disabled',\n    weekDayCell: 'p-datepicker-weekday-cell',\n    weekDay: 'p-datepicker-weekday',\n    dayCell: ({ date }) => [\n        'p-datepicker-day-cell',\n        {\n            'p-datepicker-other-month': date.otherMonth,\n            'p-datepicker-today': date.today\n        }\n    ],\n    day: ({ instance, date }) => {\n        let selectedDayClass = '';\n\n        if (instance.isRangeSelection() && instance.isSelected(date) && date.selectable) {\n            const startDate = instance.value[0];\n            const endDate = instance.value[1];\n\n            const isStart = startDate && date.year === startDate.getFullYear() && date.month === startDate.getMonth() && date.day === startDate.getDate();\n            const isEnd = endDate && date.year === endDate.getFullYear() && date.month === endDate.getMonth() && date.day === endDate.getDate();\n\n            selectedDayClass = isStart || isEnd ? 'p-datepicker-day-selected' : 'p-datepicker-day-selected-range';\n        }\n\n        return {\n            'p-datepicker-day': true,\n            'p-datepicker-day-selected': !instance.isRangeSelection() && instance.isSelected(date) && date.selectable,\n            'p-disabled': instance.$disabled() || !date.selectable,\n            [selectedDayClass]: true\n        };\n    },\n    monthView: 'p-datepicker-month-view',\n    month: ({ instance, index }) => [\n        'p-datepicker-month',\n        {\n            'p-datepicker-month-selected': instance.isMonthSelected(index),\n            'p-disabled': instance.isMonthDisabled(index)\n        }\n    ],\n    yearView: 'p-datepicker-year-view',\n    year: ({ instance, year }) => [\n        'p-datepicker-year',\n        {\n            'p-datepicker-year-selected': instance.isYearSelected(year),\n            'p-disabled': instance.isYearDisabled(year)\n        }\n    ],\n    timePicker: 'p-datepicker-time-picker',\n    hourPicker: 'p-datepicker-hour-picker',\n    pcIncrementButton: 'p-datepicker-increment-button',\n    pcDecrementButton: 'p-datepicker-decrement-button',\n    separator: 'p-datepicker-separator',\n    minutePicker: 'p-datepicker-minute-picker',\n    secondPicker: 'p-datepicker-second-picker',\n    ampmPicker: 'p-datepicker-ampm-picker',\n    buttonbar: 'p-datepicker-buttonbar',\n    pcTodayButton: 'p-datepicker-today-button',\n    pcClearButton: 'p-datepicker-clear-button',\n    clearIcon: 'p-datepicker-clear-icon'\n};\n\n@Injectable()\nexport class DatePickerStyle extends BaseStyle {\n    name = 'datepicker';\n\n    theme = theme;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * DatePicker is a form component to work with dates.\n *\n * [Live Demo](https://www.primeng.org/datepicker/)\n *\n * @module datepickerstyle\n *\n */\nexport enum DatePickerClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-datepicker',\n    /**\n     * Class name of the input element\n     */\n    pcInputText = 'p-datepicker-input',\n    /**\n     * Class name of the dropdown element\n     */\n    dropdown = 'p-datepicker-dropdown',\n    /**\n     * Class name of the input icon container element\n     */\n    inputIconContainer = 'p-datepicker-input-icon-container',\n    /**\n     * Class name of the input icon element\n     */\n    inputIcon = 'p-datepicker-input-icon',\n    /**\n     * Class name of the panel element\n     */\n    panel = 'p-datepicker-panel',\n    /**\n     * Class name of the calendar container element\n     */\n    calendarContainer = 'p-datepicker-calendar-container',\n    /**\n     * Class name of the calendar element\n     */\n    calendar = 'p-datepicker-calendar',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-datepicker-header',\n    /**\n     * Class name of the previous button element\n     */\n    pcPrevButton = 'p-datepicker-prev-button',\n    /**\n     * Class name of the title element\n     */\n    title = 'p-datepicker-title',\n    /**\n     * Class name of the select month element\n     */\n    selectMonth = 'p-datepicker-select-month',\n    /**\n     * Class name of the select year element\n     */\n    selectYear = 'p-datepicker-select-year',\n    /**\n     * Class name of the decade element\n     */\n    decade = 'p-datepicker-decade',\n    /**\n     * Class name of the next button element\n     */\n    pcNextButton = 'p-datepicker-next-button',\n    /**\n     * Class name of the day view element\n     */\n    dayView = 'p-datepicker-day-view',\n    /**\n     * Class name of the week header element\n     */\n    weekHeader = 'p-datepicker-weekheader',\n    /**\n     * Class name of the week number element\n     */\n    weekNumber = 'p-datepicker-weeknumber',\n    /**\n     * Class name of the week label container element\n     */\n    weekLabelContainer = 'p-datepicker-weeklabel-container',\n    /**\n     * Class name of the week day cell element\n     */\n    weekDayCell = 'p-datepicker-weekday-cell',\n    /**\n     * Class name of the week day element\n     */\n    weekDay = 'p-datepicker-weekday',\n    /**\n     * Class name of the day cell element\n     */\n    dayCell = 'p-datepicker-day-cell',\n    /**\n     * Class name of the day element\n     */\n    day = 'p-datepicker-day',\n    /**\n     * Class name of the month view element\n     */\n    monthView = 'p-datepicker-month-view',\n    /**\n     * Class name of the month element\n     */\n    month = 'p-datepicker-month',\n    /**\n     * Class name of the year view element\n     */\n    yearView = 'p-datepicker-year-view',\n    /**\n     * Class name of the year element\n     */\n    year = 'p-datepicker-year',\n    /**\n     * Class name of the time picker element\n     */\n    timePicker = 'p-datepicker-time-picker',\n    /**\n     * Class name of the hour picker element\n     */\n    hourPicker = 'p-datepicker-hour-picker',\n    /**\n     * Class name of the increment button element\n     */\n    pcIncrementButton = 'p-datepicker-increment-button',\n    /**\n     * Class name of the decrement button element\n     */\n    pcDecrementButton = 'p-datepicker-decrement-button',\n    /**\n     * Class name of the separator element\n     */\n    separator = 'p-datepicker-separator',\n    /**\n     * Class name of the minute picker element\n     */\n    minutePicker = 'p-datepicker-minute-picker',\n    /**\n     * Class name of the second picker element\n     */\n    secondPicker = 'p-datepicker-second-picker',\n    /**\n     * Class name of the ampm picker element\n     */\n    ampmPicker = 'p-datepicker-ampm-picker',\n    /**\n     * Class name of the buttonbar element\n     */\n    buttonbar = 'p-datepicker-buttonbar',\n    /**\n     * Class name of the today button element\n     */\n    pcTodayButton = 'p-datepicker-today-button',\n    /**\n     * Class name of the clear button element\n     */\n    pcClearButton = 'p-datepicker-clear-button',\n    /**\n     * Class name of the clear icon\n     */\n    clearIcon = 'p-datepicker-clear-icon'\n}\n\nexport interface DatePickerStyle extends BaseStyle {}\n","import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ContentChild,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    input,\n    Input,\n    NgModule,\n    NgZone,\n    numberAttribute,\n    OnDestroy,\n    OnInit,\n    Output,\n    QueryList,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { absolutePosition, addClass, addStyle, appendChild, find, findSingle, getFocusableElements, getIndex, getOuterWidth, hasClass, isDate, isNotEmpty, isTouchDevice, relativePosition, setAttribute, uuid } from '@primeuix/utils';\nimport { OverlayService, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocus } from 'primeng/autofocus';\nimport { BaseInput } from 'primeng/baseinput';\nimport { Button } from 'primeng/button';\nimport { blockBodyScroll, ConnectedOverlayScrollHandler, unblockBodyScroll } from 'primeng/dom';\nimport { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, TimesIcon } from 'primeng/icons';\nimport { InputText } from 'primeng/inputtext';\nimport { Ripple } from 'primeng/ripple';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { ZIndexUtils } from 'primeng/utils';\nimport { Subscription } from 'rxjs';\nimport { DatePickerMonthChangeEvent, DatePickerResponsiveOptions, DatePickerTypeView, DatePickerYearChangeEvent, LocaleSettings, Month, NavigationState } from './datepicker.interface';\nimport { DatePickerStyle } from './style/datepickerstyle';\n\nexport const DATEPICKER_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => DatePicker),\n    multi: true\n};\n/**\n * DatePicker is a form component to work with dates.\n * @group Components\n */\n@Component({\n    selector: 'p-datePicker, p-datepicker, p-date-picker',\n    standalone: true,\n    imports: [CommonModule, Button, Ripple, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocus, InputText, SharedModule],\n    template: `\n        <ng-template [ngIf]=\"!inline\">\n            <input\n                #inputfield\n                pInputText\n                [pSize]=\"size()\"\n                [attr.size]=\"inputSize()\"\n                type=\"text\"\n                role=\"combobox\"\n                [attr.id]=\"inputId\"\n                [attr.name]=\"name()\"\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                [attr.required]=\"required() ? '' : undefined\"\n                [attr.readonly]=\"readonlyInput ? '' : undefined\"\n                [attr.disabled]=\"$disabled() ? '' : undefined\"\n                (input)=\"onUserInput($event)\"\n                [ngStyle]=\"inputStyle\"\n                [class]=\"cn(cx('pcInputText'), inputStyleClass)\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.tabindex]=\"tabindex\"\n                [attr.inputmode]=\"touchUI ? 'off' : null\"\n                autocomplete=\"off\"\n                [pAutoFocus]=\"autofocus\"\n                [variant]=\"$variant()\"\n                [fluid]=\"hasFluid\"\n                [invalid]=\"invalid()\"\n            />\n            <ng-container *ngIf=\"showClear && !$disabled() && value != null\">\n                <svg data-p-icon=\"times\" *ngIf=\"!clearIconTemplate && !_clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear()\" />\n                <span *ngIf=\"clearIconTemplate || _clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear()\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate || _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                *ngIf=\"showIcon && iconDisplay === 'button'\"\n                (click)=\"onButtonClick($event, inputfield)\"\n                [class]=\"cx('dropdown')\"\n                [disabled]=\"$disabled()\"\n                tabindex=\"0\"\n            >\n                <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n                <ng-container *ngIf=\"!icon\">\n                    <svg data-p-icon=\"calendar\" *ngIf=\"!triggerIconTemplate && !_triggerIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate || _triggerIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n            <ng-container *ngIf=\"iconDisplay === 'input' && showIcon\">\n                <span [class]=\"cx('inputIconContainer')\">\n                    <svg data-p-icon=\"calendar\" (click)=\"onButtonClick($event)\" *ngIf=\"!inputIconTemplate && !_inputIconTemplate\" [class]=\"cx('inputIcon')\" />\n\n                    <ng-container *ngTemplateOutlet=\"inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }\"></ng-container>\n                </span>\n            </ng-container>\n        </ng-template>\n        <div\n            #contentWrapper\n            [attr.id]=\"panelId\"\n            [ngStyle]=\"panelStyle\"\n            [class]=\"cn(cx('panel'), panelStyleClass)\"\n            [@overlayAnimation]=\"{\n                value: 'visible',\n                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 || _headerTemplate\"></ng-container>\n            <ng-container *ngIf=\"!timeOnly\">\n                <div [class]=\"cx('calendarContainer')\">\n                    <div [class]=\"cx('calendar')\" *ngFor=\"let month of months; let i = index\">\n                        <div [class]=\"cx('header')\">\n                            <p-button\n                                rounded\n                                variant=\"text\"\n                                severity=\"secondary\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                [styleClass]=\"cx('pcPrevButton')\"\n                                (onClick)=\"onPrevButtonClick($event)\"\n                                [ngStyle]=\"{ visibility: i === 0 ? 'visible' : 'hidden' }\"\n                                type=\"button\"\n                                [ariaLabel]=\"prevIconAriaLabel\"\n                            >\n                                <ng-template #icon>\n                                    <svg data-p-icon=\"chevron-left\" *ngIf=\"!previousIconTemplate && !_previousIconTemplate\" />\n                                    <span *ngIf=\"previousIconTemplate || _previousIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"previousIconTemplate || _previousIconTemplate\"></ng-template>\n                                    </span>\n                                </ng-template>\n                            </p-button>\n                            <div [class]=\"cx('title')\">\n                                <button\n                                    *ngIf=\"currentView === 'date'\"\n                                    type=\"button\"\n                                    (click)=\"switchToMonthView($event)\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    [class]=\"cx('selectMonth')\"\n                                    [attr.disabled]=\"switchViewButtonDisabled() ? '' : undefined\"\n                                    [attr.aria-label]=\"this.getTranslation('chooseMonth')\"\n                                    pRipple\n                                >\n                                    {{ getMonthName(month.month) }}\n                                </button>\n                                <button\n                                    *ngIf=\"currentView !== 'year'\"\n                                    type=\"button\"\n                                    (click)=\"switchToYearView($event)\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    [class]=\"cx('selectYear')\"\n                                    [attr.disabled]=\"switchViewButtonDisabled() ? '' : undefined\"\n                                    [attr.aria-label]=\"getTranslation('chooseYear')\"\n                                    pRipple\n                                >\n                                    {{ getYear(month) }}\n                                </button>\n                                <span [class]=\"cx('decade')\" *ngIf=\"currentView === 'year'\">\n                                    <ng-container *ngIf=\"!decadeTemplate && !_decadeTemplate\">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>\n                                    <ng-container *ngTemplateOutlet=\"decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }\"></ng-container>\n                                </span>\n                            </div>\n                            <p-button\n                                rounded\n                                variant=\"text\"\n                                severity=\"secondary\"\n                                (keydown)=\"onContainerButtonKeydown($event)\"\n                                [styleClass]=\"cx('pcNextButton')\"\n                                (onClick)=\"onNextButtonClick($event)\"\n                                [ngStyle]=\"{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }\"\n                                [ariaLabel]=\"nextIconAriaLabel\"\n                            >\n                                <ng-template #icon>\n                                    <svg data-p-icon=\"chevron-right\" *ngIf=\"!nextIconTemplate && !_nextIconTemplate\" />\n                                    <ng-container *ngIf=\"nextIconTemplate || _nextIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"nextIconTemplate || _nextIconTemplate\"></ng-template>\n                                    </ng-container>\n                                </ng-template>\n                            </p-button>\n                        </div>\n                        <table [class]=\"cx('dayView')\" role=\"grid\" *ngIf=\"currentView === 'date'\">\n                            <thead>\n                                <tr>\n                                    <th *ngIf=\"showWeek\" [class]=\"cx('weekHeader')\">\n                                        <span>{{ getTranslation('weekHeader') }}</span>\n                                    </th>\n                                    <th [class]=\"cx('weekDayCell')\" scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                        <span [class]=\"cx('weekDay')\">{{ 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]=\"cx('weekNumber')\">\n                                        <span [class]=\"cx('weekLabelContainer')\">\n                                            {{ month.weekNumbers[j] }}\n                                        </span>\n                                    </td>\n                                    <td *ngFor=\"let date of week\" [attr.aria-label]=\"date.day\" [class]=\"cx('dayCell', { date })\">\n                                        <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                            <span [ngClass]=\"dayClass(date)\" (click)=\"onDateSelect($event, date)\" draggable=\"false\" [attr.data-date]=\"formatDateKey(formatDateMetaToDate(date))\" (keydown)=\"onDateCellKeydown($event, date, i)\" pRipple>\n                                                <ng-container *ngIf=\"!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))\">{{ date.day }}</ng-container>\n                                                <ng-container *ngIf=\"date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)\">\n                                                    <ng-container *ngTemplateOutlet=\"dateTemplate || _dateTemplate; context: { $implicit: date }\"></ng-container>\n                                                </ng-container>\n                                                <ng-container *ngIf=\"!date.selectable\">\n                                                    <ng-container *ngTemplateOutlet=\"disabledDateTemplate || _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 [class]=\"cx('monthView')\" *ngIf=\"currentView === 'month'\">\n                    <span *ngFor=\"let m of monthPickerValues(); let i = index\" (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event, i)\" [class]=\"cx('month', { month: m, index: i })\" pRipple>\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]=\"cx('yearView')\" *ngIf=\"currentView === 'year'\">\n                    <span *ngFor=\"let y of yearPickerValues()\" (click)=\"onYearSelect($event, y)\" (keydown)=\"onYearCellKeydown($event, y)\" [class]=\"cx('year', { year: y })\" pRipple>\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]=\"cx('timePicker')\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n                <div [class]=\"cx('hourPicker')\">\n                    <p-button\n                        rounded\n                        variant=\"text\"\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcIncrementButton')\"\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                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-up\" *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                    <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                    <p-button\n                        rounded\n                        variant=\"text\"\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcDecrementButton')\"\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                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-down\" *ngIf=\"!decrementIconTemplate && !_decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate || _decrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                </div>\n                <div class=\"p-datepicker-separator\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div [class]=\"cx('minutePicker')\">\n                    <p-button\n                        rounded\n                        variant=\"text\"\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcIncrementButton')\"\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                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-up\" *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                    <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                    <p-button\n                        rounded\n                        variant=\"text\"\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcDecrementButton')\"\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                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-down\" *ngIf=\"!decrementIconTemplate && !_decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate || _decrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                </div>\n                <div [class]=\"cx('separator')\" *ngIf=\"showSeconds\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div [class]=\"cx('secondPicker')\" *ngIf=\"showSeconds\">\n                    <p-button\n                        rounded\n                        variant=\"text\"\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcIncrementButton')\"\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                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-up\" *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                    <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                    <p-button\n                        rounded\n                        variant=\"text\"\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcDecrementButton')\"\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                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-down\" *ngIf=\"!decrementIconTemplate && !_decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate || _decrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                </div>\n                <div [class]=\"cx('separator')\" *ngIf=\"hourFormat == '12'\">\n                    <span>{{ timeSeparator }}</span>\n                </div>\n                <div [class]=\"cx('ampmPicker')\" *ngIf=\"hourFormat == '12'\">\n                    <p-button\n                        text\n                        rounded\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcIncrementButton')\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (onClick)=\"toggleAMPM($event)\"\n                        (keydown.enter)=\"toggleAMPM($event)\"\n                        [attr.aria-label]=\"getTranslation('am')\"\n                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-up\" *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                    <span>{{ pm ? 'PM' : 'AM' }}</span>\n                    <p-button\n                        text\n                        rounded\n                        severity=\"secondary\"\n                        [styleClass]=\"cx('pcDecrementButton')\"\n                        (keydown)=\"onContainerButtonKeydown($event)\"\n                        (click)=\"toggleAMPM($event)\"\n                        (keydown.enter)=\"toggleAMPM($event)\"\n                        [attr.aria-label]=\"getTranslation('pm')\"\n                    >\n                        <ng-template #icon>\n                            <svg data-p-icon=\"chevron-down\" *ngIf=\"!decrementIconTemplate && !_decrementIconTemplate\" />\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate || _decrementIconTemplate\"></ng-template>\n                        </ng-template>\n                    </p-button>\n                </div>\n            </div>\n            <div [class]=\"cx('buttonbar')\" *ngIf=\"showButtonBar\">\n                <p-button\n                    size=\"small\"\n                    [styleClass]=\"cx('pcTodayButton')\"\n                    [label]=\"getTranslation('today')\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (onClick)=\"onTodayButtonClick($event)\"\n                    [ngClass]=\"todayButtonStyleClass\"\n                    severity=\"secondary\"\n                    variant=\"text\"\n                    size=\"small\"\n                />\n                <p-button\n                    size=\"small\"\n                    [styleClass]=\"cx('pcClearButton')\"\n                    [label]=\"getTranslation('clear')\"\n                    (keydown)=\"onContainerButtonKeydown($event)\"\n                    (onClick)=\"onClearButtonClick($event)\"\n                    [ngClass]=\"clearButtonStyleClass\"\n                    severity=\"secondary\"\n                    variant=\"text\"\n                    size=\"small\"\n                />\n            </div>\n            <ng-content select=\"p-footer\"></ng-content>\n            <ng-container *ngTemplateOutlet=\"footerTemplate || _footerTemplate\"></ng-container>\n        </div>\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    providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[style]': \"sx('root')\"\n    }\n})\nexport class DatePicker extends BaseInput implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {\n    @Input() iconDisplay: 'input' | 'button' = 'button';\n    /**\n     * Style class of the component.\n     * @deprecated since v20.0.0, use `class` instead.\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     * 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     * Format of the date which can also be defined at locale settings.\n     * @group Props\n     */\n    @Input()\n    get dateFormat(): string | undefined {\n        return this._dateFormat;\n    }\n    set dateFormat(value: string | undefined) {\n        this._dateFormat = value;\n        if (this.initialized) {\n            this.updateInputfield();\n        }\n    }\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 datepicker 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 datepicker button.\n     * @group Props\n     */\n    @Input() icon: string | undefined;\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     * Specifies 12 or 24 hour format.\n     * @group Props\n     */\n    @Input()\n    get hourFormat(): string {\n        return this._hourFormat;\n    }\n    set hourFormat(value: string) {\n        this._hourFormat = value;\n        if (this.initialized) {\n            this.updateInputfield();\n        }\n    }\n    /**\n     * Whether to display timepicker only.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) timeOnly: boolean | undefined;\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 disabled, datepicker will not be visible with input focus.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showOnFocus: boolean = true;\n    /**\n     * When enabled, datepicker will show week numbers.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showWeek: boolean = false;\n    /**\n     * When enabled, datepicker 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 | undefined;\n    /**\n     * Style class of the clear button.\n     * @group Props\n     */\n    @Input() clearButtonStyleClass: string | undefined;\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, datepicker 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 datepicker.\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     * 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     * 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(): DatePickerResponsiveOptions[] {\n        return this._responsiveOptions;\n    }\n    set responsiveOptions(responsiveOptions: DatePickerResponsiveOptions[]) {\n        this._responsiveOptions = responsiveOptions;\n\n        this.destroyResponsiveStyleElement();\n        this.createResponsiveStyle();\