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 { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-datepicker {\n    position: relative;\n    display: inline-flex;\n    max-width: 100%;\n}\n\n.p-datepicker-input {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n}\n\n.p-datepicker-dropdown {\n    cursor: pointer;\n    display: inline-flex;\n    user-select: none;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    width: ${dt('datepicker.dropdown.width')};\n    border-start-end-radius: ${dt('datepicker.dropdown.border.radius')};\n    border-end-end-radius: ${dt('datepicker.dropdown.border.radius')};\n    background: ${dt('datepicker.dropdown.background')};\n    border: 1px solid ${dt('datepicker.dropdown.border.color')};\n    border-inline-start: 0 none;\n    color: ${dt('datepicker.dropdown.color')};\n    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};\n    outline-color: transparent;\n}\n\n.p-datepicker-dropdown:not(:disabled):hover {\n    background: ${dt('datepicker.dropdown.hover.background')};\n    border-color: ${dt('datepicker.dropdown.hover.border.color')};\n    color: ${dt('datepicker.dropdown.hover.color')};\n}\n\n.p-datepicker-dropdown:not(:disabled):active {\n    background: ${dt('datepicker.dropdown.active.background')};\n    border-color: ${dt('datepicker.dropdown.active.border.color')};\n    color: ${dt('datepicker.dropdown.active.color')};\n}\n\n.p-datepicker-dropdown:focus-visible {\n    box-shadow: ${dt('datepicker.dropdown.focus.ring.shadow')};\n    outline: ${dt('datepicker.dropdown.focus.ring.width')} ${dt('datepicker.dropdown.focus.ring.style')} ${dt('datepicker.dropdown.focus.ring.color')};\n    outline-offset: ${dt('datepicker.dropdown.focus.ring.offset')};\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) {\n    position: relative;\n}\n\n.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {\n    padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});\n}\n\n.p-datepicker-input-icon-container {\n    cursor: pointer;\n    position: absolute;\n    top: 50%;\n    inset-inline-end: ${dt('form.field.padding.x')};\n    margin-top: calc(-1 * (${dt('icon.size')} / 2));\n    color: ${dt('datepicker.input.icon.color')};\n    line-height: 1;\n}\n\n.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-clear-icon,\n.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-clear-icon {\n    inset-inline-end: calc(${dt('datepicker.dropdown.width')} + ${dt('form.field.padding.x')});\n}\n\n.p-datepicker-clear-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    cursor: pointer;\n    color: ${dt('form.field.icon.color')};\n    inset-inline-end: ${dt('form.field.padding.x')};\n}\n\n.p-datepicker-fluid {\n    display: flex;\n}\n\n.p-datepicker-fluid .p-datepicker-input {\n    width: 1%;\n}\n\n.p-datepicker .p-datepicker-panel {\n    min-width: 100%;\n}\n\n.p-datepicker-panel {\n    width: auto;\n    padding: ${dt('datepicker.panel.padding')};\n    background: ${dt('datepicker.panel.background')};\n    color: ${dt('datepicker.panel.color')};\n    border: 1px solid ${dt('datepicker.panel.border.color')};\n    border-radius: ${dt('datepicker.panel.border.radius')};\n    box-shadow: ${dt('datepicker.panel.shadow')};\n}\n\n.p-datepicker-panel-inline {\n    display: inline-block;\n    overflow-x: auto;\n    box-shadow: none;\n}\n\n.p-datepicker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: ${dt('datepicker.header.padding')};\n    background: ${dt('datepicker.header.background')};\n    color: ${dt('datepicker.header.color')};\n    border-bottom: 1px solid ${dt('datepicker.header.border.color')};\n}\n\n.p-datepicker-next-button:dir(rtl) {\n    transform: rotate(180deg);\n}\n\n.p-datepicker-prev-button:dir(rtl) {\n    transform: rotate(180deg);\n}\n\n.p-datepicker-title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: ${dt('datepicker.title.gap')};\n    font-weight: ${dt('datepicker.title.font.weight')};\n}\n\n.p-datepicker-select-year,\n.p-datepicker-select-month {\n    border: none;\n    background: transparent;\n    margin: 0;\n    cursor: pointer;\n    font-weight: inherit;\n    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')}, box-shadow ${dt(\n        'datepicker.transition.duration'\n    )};\n}\n\n.p-datepicker-select-month {\n    padding: ${dt('datepicker.select.month.padding')};\n    color: ${dt('datepicker.select.month.color')};\n    border-radius: ${dt('datepicker.select.month.border.radius')};\n}\n\n.p-datepicker-select-year {\n    padding: ${dt('datepicker.select.year.padding')};\n    color: ${dt('datepicker.select.year.color')};\n    border-radius: ${dt('datepicker.select.year.border.radius')};\n}\n\n.p-datepicker-select-month:enabled:hover {\n    background: ${dt('datepicker.select.month.hover.background')};\n    color: ${dt('datepicker.select.month.hover.color')};\n}\n\n.p-datepicker-select-year:enabled:hover {\n    background: ${dt('datepicker.select.year.hover.background')};\n    color: ${dt('datepicker.select.year.hover.color')};\n}\n\n.p-datepicker-calendar-container {\n    display: flex;\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar {\n    flex: 1 1 auto;\n    border-inline-start: 1px solid ${dt('datepicker.group.border.color')};\n    padding-inline: ${dt('datepicker.group.gap')};\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar:first-child {\n    padding-inline-start: 0;\n    border-inline-start: 0 none;\n}\n\n.p-datepicker-calendar-container .p-datepicker-calendar:last-child {\n    padding-inline-end: 0;\n}\n\n.p-datepicker-day-view {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 1rem;\n    margin: ${dt('datepicker.day.view.margin')};\n}\n\n.p-datepicker-weekday-cell {\n    padding: ${dt('datepicker.week.day.padding')};\n}\n\n.p-datepicker-weekday {\n    font-weight: ${dt('datepicker.week.day.font.weight')};\n    color: ${dt('datepicker.week.day.color')};\n}\n\n.p-datepicker-day-cell {\n    padding: ${dt('datepicker.date.padding')};\n}\n\n.p-datepicker-day {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    margin: 0 auto;\n    overflow: hidden;\n    position: relative;\n    width: ${dt('datepicker.date.width')};\n    height: ${dt('datepicker.date.height')};\n    border-radius: ${dt('datepicker.date.border.radius')};\n    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')},\n        box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};\n    border: 1px solid transparent;\n    outline-color: transparent;\n    color: ${dt('datepicker.date.color')};\n}\n\n.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {\n    background: ${dt('datepicker.date.hover.background')};\n    color: ${dt('datepicker.date.hover.color')};\n}\n\n.p-datepicker-day:focus-visible {\n    box-shadow: ${dt('datepicker.date.focus.ring.shadow')};\n    outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};\n    outline-offset: ${dt('datepicker.date.focus.ring.offset')};\n}\n\n.p-datepicker-day-selected {\n    background: ${dt('datepicker.date.selected.background')};\n    color: ${dt('datepicker.date.selected.color')};\n}\n\n.p-datepicker-day-selected-range {\n    background: ${dt('datepicker.date.range.selected.background')};\n    color: ${dt('datepicker.date.range.selected.color')};\n}\n\n.p-datepicker-today > .p-datepicker-day {\n    background: ${dt('datepicker.today.background')};\n    color: ${dt('datepicker.today.color')};\n}\n\n.p-datepicker-today > .p-datepicker-day-selected {\n    background: ${dt('datepicker.date.selected.background')};\n    color: ${dt('datepicker.date.selected.color')};\n}\n\n.p-datepicker-today > .p-datepicker-day-selected-range {\n    background: ${dt('datepicker.date.range.selected.background')};\n    color: ${dt('datepicker.date.range.selected.color')};\n}\n\n.p-datepicker-weeknumber {\n    text-align: center\n}\n\n.p-datepicker-month-view {\n    margin: ${dt('datepicker.month.view.margin')};\n}\n\n.p-datepicker-month {\n    width: 33.3%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n    padding: ${dt('datepicker.month.padding')};\n    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(\n        'datepicker.transition.duration'\n    )};\n    border-radius: ${dt('datepicker.month.border.radius')};\n    outline-color: transparent;\n    color: ${dt('datepicker.date.color')};\n}\n\n.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {\n    color:  ${dt('datepicker.date.hover.color')};\n    background: ${dt('datepicker.date.hover.background')};\n}\n\n.p-datepicker-month-selected {\n    color: ${dt('datepicker.date.selected.color')};\n    background: ${dt('datepicker.date.selected.background')};\n}\n\n.p-datepicker-month:not(.p-disabled):focus-visible {\n    box-shadow: ${dt('datepicker.date.focus.ring.shadow')};\n    outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};\n    outline-offset: ${dt('datepicker.date.focus.ring.offset')};\n}\n\n.p-datepicker-year-view {\n    margin: ${dt('datepicker.year.view.margin')};\n}\n\n.p-datepicker-year {\n    width: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n    padding: ${dt('datepicker.year.padding')};\n    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(\n        'datepicker.transition.duration'\n    )};\n    border-radius: ${dt('datepicker.year.border.radius')};\n    outline-color: transparent;\n    color: ${dt('datepicker.date.color')};\n}\n\n.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {\n    color: ${dt('datepicker.date.hover.color')};\n    background: ${dt('datepicker.date.hover.background')};\n}\n\n.p-datepicker-year-selected {\n    color: ${dt('datepicker.date.selected.color')};\n    background: ${dt('datepicker.date.selected.background')};\n}\n\n.p-datepicker-year:not(.p-disabled):focus-visible {\n    box-shadow: ${dt('datepicker.date.focus.ring.shadow')};\n    outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};\n    outline-offset: ${dt('datepicker.date.focus.ring.offset')};\n}\n\n.p-datepicker-buttonbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding:  ${dt('datepicker.buttonbar.padding')};\n    border-top: 1px solid ${dt('datepicker.buttonbar.border.color')};\n}\n\n.p-datepicker-buttonbar .p-button {\n    width: auto;\n}\n\n.p-datepicker-time-picker {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-top: 1px solid ${dt('datepicker.time.picker.border.color')};\n    padding: 0;\n    gap: ${dt('datepicker.time.picker.gap')};\n}\n\n.p-datepicker-calendar-container + .p-datepicker-time-picker {\n    padding: ${dt('datepicker.time.picker.padding')};\n}\n\n.p-datepicker-time-picker > div {\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    gap: ${dt('datepicker.time.picker.button.gap')};\n}\n\n.p-datepicker-time-picker span {\n    font-size: 1rem;\n}\n\n.p-datepicker-timeonly .p-datepicker-time-picker {\n    border-top: 0 none;\n}\n\n.p-datepicker-calendar:not(:first-child):not(:last-child) .p-datepicker-header {\n    justify-content: center;\n}\n\n.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {\n    width: ${dt('datepicker.dropdown.sm.width')};\n}\n\n.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,\n.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {\n    font-size: ${dt('form.field.sm.font.size')};\n    width: ${dt('form.field.sm.font.size')};\n    height: ${dt('form.field.sm.font.size')};\n}\n\n.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {\n    width: ${dt('datepicker.dropdown.lg.width')};\n}\n\n.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,\n.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {\n    font-size: ${dt('form.field.lg.font.size')};\n    width: ${dt('form.field.lg.font.size')};\n    height: ${dt('form.field.lg.font.size')};\n}\n\n/* For PrimeNG */\n\np-calendar.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext{\n    border-color: ${dt('inputtext.invalid.border.color')};\n}\n\np-datePicker.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext,\np-date-picker.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext,\np-datepicker.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext {\n    border-color: ${dt('inputtext.invalid.border.color')};\n}\n\n`;\n\nconst inlineStyles = {\n    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })\n};\n\nconst classes = {\n    root: ({ instance }) => ({\n        'p-datepicker p-component p-inputwrapper': true,\n        'p-datepicker-fluid': instance.hasFluid,\n        'p-inputwrapper-filled': instance.filled,\n        'p-variant-filled': instance.variant === 'filled' || instance.config.inputVariant() === 'filled' || instance.config.inputStyle() === 'filled',\n        'p-inputwrapper-focus': instance.focus,\n        'p-focus': instance.focus || instance.overlayVisible\n    }),\n    pcInput: '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': true,\n        'p-datepicker-panel-inline': instance.inline,\n        'p-disabled': instance.disabled,\n        'p-datepicker-timeonly': instance.timeOnly\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, props, month, index }) => [\n        'p-datepicker-month',\n        {\n            'p-datepicker-month-selected': instance.isMonthSelected(index),\n            'p-disabled': props.disabled || !month.selectable\n        }\n    ],\n    yearView: 'p-datepicker-year-view',\n    year: ({ instance, props, year }) => [\n        'p-datepicker-year',\n        {\n            'p-datepicker-year-selected': instance.isYearSelected(year.value),\n            'p-disabled': props.disabled || !year.selectable\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};\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    pcInput = '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\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    ContentChild,\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    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    absolutePosition,\n    addClass,\n    addStyle,\n    appendChild,\n    blockBodyScroll,\n    find,\n    findSingle,\n    getFocusableElements,\n    getIndex,\n    getOuterWidth,\n    hasClass,\n    isDate,\n    isNotEmpty,\n    isTouchDevice,\n    relativePosition,\n    setAttribute,\n    unblockBodyScroll,\n    uuid\n} from '@primeuix/utils';\nimport { OverlayService, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocus } from 'primeng/autofocus';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { Button } from 'primeng/button';\nimport { ConnectedOverlayScrollHandler } 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        <span #container [ngClass]=\"rootClass\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input\n                    #inputfield\n                    pInputText\n                    [pSize]=\"size\"\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                    [ngClass]=\"'p-datepicker-input'\"\n                    [placeholder]=\"placeholder || ''\"\n                    [disabled]=\"disabled\"\n                    [attr.tabindex]=\"tabindex\"\n                    [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    autocomplete=\"off\"\n                    [pAutoFocus]=\"autofocus\"\n                    [variant]=\"variant\"\n                    [fluid]=\"hasFluid\"\n                />\n                <ng-container *ngIf=\"showClear && !disabled && value != null\">\n                    <TimesIcon *ngIf=\"!clearIconTemplate && !_clearIconTemplate\" [class]=\"'p-datepicker-clear-icon'\" (click)=\"clear()\" />\n                    <span *ngIf=\"clearIconTemplate || _clearIconTemplate\" class=\"p-datepicker-clear-icon\" (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=\"p-datepicker-dropdown\"\n                    [disabled]=\"disabled\"\n                    tabindex=\"0\"\n                >\n                    <span *ngIf=\"icon\" [ngClass]=\"icon\"></span>\n                    <ng-container *ngIf=\"!icon\">\n                        <CalendarIcon *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=\"p-datepicker-input-icon-container\">\n                        <CalendarIcon\n                            (click)=\"onButtonClick($event)\"\n                            *ngIf=\"!inputIconTemplate && !_inputIconTemplate\"\n                            [ngClass]=\"{\n                                'p-datepicker-input-icon': showOnFocus\n                            }\"\n                        />\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                [class]=\"panelStyleClass\"\n                [ngStyle]=\"panelStyle\"\n                [ngClass]=\"panelClass\"\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=\"p-datepicker-calendar-container\">\n                        <div class=\"p-datepicker-calendar\" *ngFor=\"let month of months; let i = index\">\n                            <div class=\"p-datepicker-header\">\n                                <p-button\n                                    size=\"small\"\n                                    rounded\n                                    text\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    styleClass=\"p-datepicker-prev-button p-button-icon-only\"\n                                    (onClick)=\"onPrevButtonClick($event)\"\n                                    [ngStyle]=\"{ visibility: i === 0 ? 'visible' : 'hidden' }\"\n                                    type=\"button\"\n                                    [ariaLabel]=\"prevIconAriaLabel\"\n                                >\n                                    <ChevronLeftIcon *ngIf=\"!previousIconTemplate && !_previousIconTemplate\" />\n                                    <span *ngIf=\"previousIconTemplate || !_previousIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"previousIconTemplate || _previousIconTemplate\"></ng-template>\n                                    </span>\n                                </p-button>\n                                <div class=\"p-datepicker-title\">\n                                    <button\n                                        *ngIf=\"currentView === 'date'\"\n                                        type=\"button\"\n                                        (click)=\"switchToMonthView($event)\"\n                                        (keydown)=\"onContainerButtonKeydown($event)\"\n                                        class=\"p-datepicker-select-month\"\n                                        [disabled]=\"switchViewButtonDisabled()\"\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=\"p-datepicker-select-year\"\n                                        [disabled]=\"switchViewButtonDisabled()\"\n                                        [attr.aria-label]=\"getTranslation('chooseYear')\"\n                                        pRipple\n                                    >\n                                        {{ getYear(month) }}\n                                    </button>\n                                    <span class=\"p-datepicker-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                                    text\n                                    size=\"small\"\n                                    (keydown)=\"onContainerButtonKeydown($event)\"\n                                    styleClass=\"p-datepicker-next-button p-button-icon-only\"\n                                    (onClick)=\"onNextButtonClick($event)\"\n                                    [ngStyle]=\"{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }\"\n                                    [ariaLabel]=\"nextIconAriaLabel\"\n                                >\n                                    <ChevronRightIcon *ngIf=\"!nextIconTemplate && !_nextIconTemplate\" />\n\n                                    <span *ngIf=\"nextIconTemplate || !_nextIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"nextIconTemplate || _nextIconTemplate\"></ng-template>\n                                    </span>\n                                </p-button>\n                            </div>\n                            <table class=\"p-datepicker-day-view\" role=\"grid\" *ngIf=\"currentView === 'date'\">\n                                <thead>\n                                    <tr>\n                                        <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                            <span>{{ getTranslation('weekHeader') }}</span>\n                                        </th>\n                                        <th class=\"p-datepicker-weekday-cell\" scope=\"col\" *ngFor=\"let weekDay of weekDays; let begin = first; let end = last\">\n                                            <span class=\"p-datepicker-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=\"p-datepicker-weeknumber\">\n                                            <span class=\"p-datepicker-weeklabel-container p-disabled\">\n                                                {{ month.weekNumbers[j] }}\n                                            </span>\n                                        </td>\n                                        <td\n                                            *ngFor=\"let date of week\"\n                                            [attr.aria-label]=\"date.day\"\n                                            [ngClass]=\"{\n                                                'p-datepicker-day-cell': true,\n                                                'p-datepicker-other-month': date.otherMonth,\n                                                'p-datepicker-today': date.today\n                                            }\"\n                                        >\n                                            <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                <span\n                                                    [ngClass]=\"dayClass(date)\"\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 && !_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=\"p-datepicker-month-view\" *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                            [ngClass]=\"{\n                                'p-datepicker-month': true,\n                                'p-datepicker-month-selected': isMonthSelected(i),\n                                'p-disabled': isMonthDisabled(i)\n                            }\"\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-datepicker-year-view\" *ngIf=\"currentView === 'year'\">\n                        <span\n                            *ngFor=\"let y of yearPickerValues()\"\n                            (click)=\"onYearSelect($event, y)\"\n                            (keydown)=\"onYearCellKeydown($event, y)\"\n                            [ngClass]=\"{\n                                'p-datepicker-year': true,\n                                'p-datepicker-year-selected': isYearSelected(y),\n                                'p-disabled': isYearDisabled(y)\n                            }\"\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-datepicker-time-picker\" *ngIf=\"(showTime || timeOnly) && currentView === 'date'\">\n                    <div class=\"p-datepicker-hour-picker\">\n                        <p-button\n                            rounded\n                            text\n                            size=\"small\"\n                            styleClass=\"p-datepicker-increment-button p-button-icon-only\"\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                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </p-button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{ currentHour }}</span>\n                        <p-button\n                            rounded\n                            text\n                            size=\"small\"\n                            styleClass=\"p-datepicker-increment-button p-button-icon-only\"\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                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate && !_decrementIconTemplate\" />\n\n                            <ng-template *ngTemplateOutlet=\"decrementIconTemplate || _decrementIconTemplate\"></ng-template>\n                        </p-button>\n                    </div>\n                    <div class=\"p-datepicker-separator\">\n                        <span>{{ timeSeparator }}</span>\n                    </div>\n                    <div class=\"p-datepicker-minute-picker\">\n                        <p-button\n                            rounded\n                            text\n                            size=\"small\"\n                            styleClass=\"p-datepicker-increment-button p-button-icon-only\"\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                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </p-button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{ currentMinute }}</span>\n                        <p-button\n                            rounded\n                            text\n                            size=\"small\"\n                            styleClass=\"p-datepicker-increment-button p-button-icon-only\"\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                            <ChevronDownIcon *ngIf=\"!decrementIconTemplate && !_decrementIconTemplate\" />\n                            <ng-container *ngIf=\"decrementIconTemplate || _decrementIconTemplate\">\n                                <ng-template *ngTemplateOutlet=\"decrementIconTemplate || _decrementIconTemplate\"></ng-template>\n                            </ng-container>\n                        </p-button>\n                    </div>\n                    <div class=\"p-datepicker-separator\" *ngIf=\"showSeconds\">\n                        <span>{{ timeSeparator }}</span>\n                    </div>\n                    <div class=\"p-datepicker-second-picker\" *ngIf=\"showSeconds\">\n                        <p-button\n                            rounded\n                            text\n                            size=\"small\"\n                            styleClass=\"p-datepicker-increment-button p-button-icon-only\"\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                            <ChevronUpIcon *ngIf=\"!incrementIconTemplate && !_incrementIconTemplate\" />\n\n                            <ng-template *ngTemplateOutlet=\"incrementIconTemplate || _incrementIconTemplate\"></ng-template>\n                        </p-button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{ currentSecond }}</span>\n                        <p-button\n                            rounded\n                            text\n                            size=\"small\"\n                            styleClass=\"p-datepicker-increment-button p-button-icon-only\"\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                            <ChevronDownIcon *ngI