primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-datepicker.mjs

@@ -1,462 +1,60 @@
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, input, EventEmitter, inject, computed, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, addStyle, appendChild, absolutePosition, relativePosition, addClass, blockBodyScroll, unblockBodyScroll, setAttribute, isTouchDevice } from '@primeuix/utils';
+import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, addStyle, appendChild, absolutePosition, relativePosition, addClass, setAttribute, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseInput } from 'primeng/baseinput';
 import { Button } from 'primeng/button';
-import { ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { blockBodyScroll, unblockBodyScroll, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon } from 'primeng/icons';
 import { InputText } from 'primeng/inputtext';
 import { Ripple } from 'primeng/ripple';
 import { ZIndexUtils } from 'primeng/utils';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/datepicker';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-datepicker {
-    position: relative;
-    display: inline-flex;
-    max-width: 100%;
-}
-
-.p-datepicker-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-}
-
-.p-datepicker-dropdown {
-    cursor: pointer;
-    display: inline-flex;
-    user-select: none;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    width: ${dt('datepicker.dropdown.width')};
-    border-start-end-radius: ${dt('datepicker.dropdown.border.radius')};
-    border-end-end-radius: ${dt('datepicker.dropdown.border.radius')};
-    background: ${dt('datepicker.dropdown.background')};
-    border: 1px solid ${dt('datepicker.dropdown.border.color')};
-    border-inline-start: 0 none;
-    color: ${dt('datepicker.dropdown.color')};
-    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
-    outline-color: transparent;
-}
-
-.p-datepicker-dropdown:not(:disabled):hover {
-    background: ${dt('datepicker.dropdown.hover.background')};
-    border-color: ${dt('datepicker.dropdown.hover.border.color')};
-    color: ${dt('datepicker.dropdown.hover.color')};
-}
-
-.p-datepicker-dropdown:not(:disabled):active {
-    background: ${dt('datepicker.dropdown.active.background')};
-    border-color: ${dt('datepicker.dropdown.active.border.color')};
-    color: ${dt('datepicker.dropdown.active.color')};
-}
-
-.p-datepicker-dropdown:focus-visible {
-    box-shadow: ${dt('datepicker.dropdown.focus.ring.shadow')};
-    outline: ${dt('datepicker.dropdown.focus.ring.width')} ${dt('datepicker.dropdown.focus.ring.style')} ${dt('datepicker.dropdown.focus.ring.color')};
-    outline-offset: ${dt('datepicker.dropdown.focus.ring.offset')};
-}
-
-.p-datepicker:has(.p-datepicker-input-icon-container) {
-    position: relative;
-}
-
-.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
-    padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
-}
-
-.p-datepicker-input-icon-container {
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    inset-inline-end: ${dt('form.field.padding.x')};
-    margin-top: calc(-1 * (${dt('icon.size')} / 2));
-    color: ${dt('datepicker.input.icon.color')};
-    line-height: 1;
-}
-
-.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-clear-icon,
-.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-clear-icon {
-    inset-inline-end: calc(${dt('datepicker.dropdown.width')} + ${dt('form.field.padding.x')});
-}
-
-.p-datepicker-clear-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    cursor: pointer;
-    color: ${dt('form.field.icon.color')};
-    inset-inline-end: ${dt('form.field.padding.x')};
-}
-
-.p-datepicker-fluid {
-    display: flex;
-}
-
-.p-datepicker-fluid .p-datepicker-input {
-    width: 1%;
-}
-
-.p-datepicker .p-datepicker-panel {
-    min-width: 100%;
-}
-
-.p-datepicker-panel {
-    width: auto;
-    padding: ${dt('datepicker.panel.padding')};
-    background: ${dt('datepicker.panel.background')};
-    color: ${dt('datepicker.panel.color')};
-    border: 1px solid ${dt('datepicker.panel.border.color')};
-    border-radius: ${dt('datepicker.panel.border.radius')};
-    box-shadow: ${dt('datepicker.panel.shadow')};
-}
-
-.p-datepicker-panel-inline {
-    display: inline-block;
-    overflow-x: auto;
-    box-shadow: none;
-}
-
-.p-datepicker-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: ${dt('datepicker.header.padding')};
-    background: ${dt('datepicker.header.background')};
-    color: ${dt('datepicker.header.color')};
-    border-bottom: 1px solid ${dt('datepicker.header.border.color')};
-}
-
-.p-datepicker-next-button:dir(rtl) {
-    transform: rotate(180deg);
-}
-
-.p-datepicker-prev-button:dir(rtl) {
-    transform: rotate(180deg);
-}
-
-.p-datepicker-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: ${dt('datepicker.title.gap')};
-    font-weight: ${dt('datepicker.title.font.weight')};
-}
-
-.p-datepicker-select-year,
-.p-datepicker-select-month {
-    border: none;
-    background: transparent;
-    margin: 0;
-    cursor: pointer;
-    font-weight: inherit;
-    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('datepicker.transition.duration')};
-}
-
-.p-datepicker-select-month {
-    padding: ${dt('datepicker.select.month.padding')};
-    color: ${dt('datepicker.select.month.color')};
-    border-radius: ${dt('datepicker.select.month.border.radius')};
-}
-
-.p-datepicker-select-year {
-    padding: ${dt('datepicker.select.year.padding')};
-    color: ${dt('datepicker.select.year.color')};
-    border-radius: ${dt('datepicker.select.year.border.radius')};
-}
-
-.p-datepicker-select-month:enabled:hover {
-    background: ${dt('datepicker.select.month.hover.background')};
-    color: ${dt('datepicker.select.month.hover.color')};
-}
-
-.p-datepicker-select-year:enabled:hover {
-    background: ${dt('datepicker.select.year.hover.background')};
-    color: ${dt('datepicker.select.year.hover.color')};
-}
-
-.p-datepicker-calendar-container {
-    display: flex;
-}
-
-.p-datepicker-calendar-container .p-datepicker-calendar {
-    flex: 1 1 auto;
-    border-inline-start: 1px solid ${dt('datepicker.group.border.color')};
-    padding-inline: ${dt('datepicker.group.gap')};
-}
-
-.p-datepicker-calendar-container .p-datepicker-calendar:first-child {
-    padding-inline-start: 0;
-    border-inline-start: 0 none;
-}
-
-.p-datepicker-calendar-container .p-datepicker-calendar:last-child {
-    padding-inline-end: 0;
-}
-
-.p-datepicker-day-view {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 1rem;
-    margin: ${dt('datepicker.day.view.margin')};
-}
-
-.p-datepicker-weekday-cell {
-    padding: ${dt('datepicker.week.day.padding')};
-}
-
-.p-datepicker-weekday {
-    font-weight: ${dt('datepicker.week.day.font.weight')};
-    color: ${dt('datepicker.week.day.color')};
-}
-
-.p-datepicker-day-cell {
-    padding: ${dt('datepicker.date.padding')};
-}
-
-.p-datepicker-day {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    margin: 0 auto;
-    overflow: hidden;
-    position: relative;
-    width: ${dt('datepicker.date.width')};
-    height: ${dt('datepicker.date.height')};
-    border-radius: ${dt('datepicker.date.border.radius')};
-    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('datepicker.transition.duration')};
-    border: 1px solid transparent;
-    outline-color: transparent;
-    color: ${dt('datepicker.date.color')};
-}
-
-.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
-    background: ${dt('datepicker.date.hover.background')};
-    color: ${dt('datepicker.date.hover.color')};
-}
-
-.p-datepicker-day:focus-visible {
-    box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
-    outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
-    outline-offset: ${dt('datepicker.date.focus.ring.offset')};
-}
-
-.p-datepicker-day-selected {
-    background: ${dt('datepicker.date.selected.background')};
-    color: ${dt('datepicker.date.selected.color')};
-}
-
-.p-datepicker-day-selected-range {
-    background: ${dt('datepicker.date.range.selected.background')};
-    color: ${dt('datepicker.date.range.selected.color')};
-}
-
-.p-datepicker-today > .p-datepicker-day {
-    background: ${dt('datepicker.today.background')};
-    color: ${dt('datepicker.today.color')};
-}
-
-.p-datepicker-today > .p-datepicker-day-selected {
-    background: ${dt('datepicker.date.selected.background')};
-    color: ${dt('datepicker.date.selected.color')};
-}
-
-.p-datepicker-today > .p-datepicker-day-selected-range {
-    background: ${dt('datepicker.date.range.selected.background')};
-    color: ${dt('datepicker.date.range.selected.color')};
-}
-
-.p-datepicker-weeknumber {
-    text-align: center
-}
-
-.p-datepicker-month-view {
-    margin: ${dt('datepicker.month.view.margin')};
-}
-
-.p-datepicker-month {
-    width: 33.3%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-    padding: ${dt('datepicker.month.padding')};
-    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('datepicker.transition.duration')};
-    border-radius: ${dt('datepicker.month.border.radius')};
-    outline-color: transparent;
-    color: ${dt('datepicker.date.color')};
-}
-
-.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
-    color:  ${dt('datepicker.date.hover.color')};
-    background: ${dt('datepicker.date.hover.background')};
-}
-
-.p-datepicker-month-selected {
-    color: ${dt('datepicker.date.selected.color')};
-    background: ${dt('datepicker.date.selected.background')};
-}
-
-.p-datepicker-month:not(.p-disabled):focus-visible {
-    box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
-    outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
-    outline-offset: ${dt('datepicker.date.focus.ring.offset')};
-}
-
-.p-datepicker-year-view {
-    margin: ${dt('datepicker.year.view.margin')};
-}
-
-.p-datepicker-year {
-    width: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-    padding: ${dt('datepicker.year.padding')};
-    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('datepicker.transition.duration')};
-    border-radius: ${dt('datepicker.year.border.radius')};
-    outline-color: transparent;
-    color: ${dt('datepicker.date.color')};
-}
-
-.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
-    color: ${dt('datepicker.date.hover.color')};
-    background: ${dt('datepicker.date.hover.background')};
-}
-
-.p-datepicker-year-selected {
-    color: ${dt('datepicker.date.selected.color')};
-    background: ${dt('datepicker.date.selected.background')};
-}
-
-.p-datepicker-year:not(.p-disabled):focus-visible {
-    box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
-    outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
-    outline-offset: ${dt('datepicker.date.focus.ring.offset')};
-}
-
-.p-datepicker-buttonbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding:  ${dt('datepicker.buttonbar.padding')};
-    border-top: 1px solid ${dt('datepicker.buttonbar.border.color')};
-}
-
-.p-datepicker-buttonbar .p-button {
-    width: auto;
-}
-
-.p-datepicker-time-picker {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-top: 1px solid ${dt('datepicker.time.picker.border.color')};
-    padding: 0;
-    gap: ${dt('datepicker.time.picker.gap')};
-}
-
-.p-datepicker-calendar-container + .p-datepicker-time-picker {
-    padding: ${dt('datepicker.time.picker.padding')};
-}
-
-.p-datepicker-time-picker > div {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: ${dt('datepicker.time.picker.button.gap')};
-}
-
-.p-datepicker-time-picker span {
-    font-size: 1rem;
-}
-
-.p-datepicker-timeonly .p-datepicker-time-picker {
-    border-top: 0 none;
-}
-
-.p-datepicker-calendar:not(:first-child):not(:last-child) .p-datepicker-header {
-    justify-content: center;
-}
-
-.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {
-    width: ${dt('datepicker.dropdown.sm.width')};
-}
-
-.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,
-.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {
-    font-size: ${dt('form.field.sm.font.size')};
-    width: ${dt('form.field.sm.font.size')};
-    height: ${dt('form.field.sm.font.size')};
-}
-
-.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {
-    width: ${dt('datepicker.dropdown.lg.width')};
-}
-
-.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,
-.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {
-    font-size: ${dt('form.field.lg.font.size')};
-    width: ${dt('form.field.lg.font.size')};
-    height: ${dt('form.field.lg.font.size')};
-}
-
-/* For PrimeNG */
-
-p-calendar.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext{
-    border-color: ${dt('inputtext.invalid.border.color')};
-}
-
-p-datePicker.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext,
-p-date-picker.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext,
-p-datepicker.ng-invalid.ng-dirty .p-datepicker.p-inputwrapper .p-inputtext {
-    border-color: ${dt('inputtext.invalid.border.color')};
-}
+const theme = css `
+    ${style}
 
+    /* For PrimeNG */
+    .p-datepicker.ng-invalid.ng-dirty .p-inputtext {
+        border-color: ${dt('inputtext.invalid.border.color')};
+    }
 `;
 const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+    root: () => ({ position: 'relative' })
 };
 const classes = {
-    root: ({ instance }) => ({
-        'p-datepicker p-component p-inputwrapper': true,
-        'p-datepicker-fluid': instance.hasFluid,
-        'p-inputwrapper-filled': instance.filled,
-        'p-variant-filled': instance.variant === 'filled' || instance.config.inputVariant() === 'filled' || instance.config.inputStyle() === 'filled',
-        'p-inputwrapper-focus': instance.focus,
-        'p-focus': instance.focus || instance.overlayVisible
-    }),
-    pcInput: 'p-datepicker-input',
+    root: ({ instance }) => [
+        'p-datepicker p-component p-inputwrapper',
+        {
+            'p-invalid': instance.invalid(),
+            'p-datepicker-fluid': instance.hasFluid,
+            'p-inputwrapper-filled': instance.$filled(),
+            'p-variant-filled': instance.$variant() === 'filled',
+            'p-inputwrapper-focus': instance.focus || instance.overlayVisible,
+            'p-focus': instance.focus || instance.overlayVisible
+        }
+    ],
+    pcInputText: 'p-datepicker-input',
     dropdown: 'p-datepicker-dropdown',
     inputIconContainer: 'p-datepicker-input-icon-container',
     inputIcon: 'p-datepicker-input-icon',
-    panel: ({ instance }) => ({
-        'p-datepicker-panel p-component': true,
-        'p-datepicker-panel-inline': instance.inline,
-        'p-disabled': instance.disabled,
-        'p-datepicker-timeonly': instance.timeOnly
-    }),
+    panel: ({ instance }) => [
+        'p-datepicker-panel p-component',
+        {
+            'p-datepicker-panel p-component': true,
+            'p-datepicker-panel-inline': instance.inline,
+            'p-disabled': instance.disabled(),
+            'p-datepicker-timeonly': instance.timeOnly
+        }
+    ],
     calendarContainer: 'p-datepicker-calendar-container',
     calendar: 'p-datepicker-calendar',
     header: 'p-datepicker-header',
@@ -491,24 +89,24 @@ const classes = {
         return {
             'p-datepicker-day': true,
             'p-datepicker-day-selected': !instance.isRangeSelection() && instance.isSelected(date) && date.selectable,
-            'p-disabled': instance.disabled || !date.selectable,
+            'p-disabled': instance.disabled() || !date.selectable,
             [selectedDayClass]: true
         };
     },
     monthView: 'p-datepicker-month-view',
-    month: ({ instance, props, month, index }) => [
+    month: ({ instance, index }) => [
         'p-datepicker-month',
         {
             'p-datepicker-month-selected': instance.isMonthSelected(index),
-            'p-disabled': props.disabled || !month.selectable
+            'p-disabled': instance.isMonthDisabled(index)
         }
     ],
     yearView: 'p-datepicker-year-view',
-    year: ({ instance, props, year }) => [
+    year: ({ instance, year }) => [
         'p-datepicker-year',
         {
-            'p-datepicker-year-selected': instance.isYearSelected(year.value),
-            'p-disabled': props.disabled || !year.selectable
+            'p-datepicker-year-selected': instance.isYearSelected(year),
+            'p-disabled': instance.isYearDisabled(year)
         }
     ],
     timePicker: 'p-datepicker-time-picker',
@@ -521,17 +119,18 @@ const classes = {
     ampmPicker: 'p-datepicker-ampm-picker',
     buttonbar: 'p-datepicker-buttonbar',
     pcTodayButton: 'p-datepicker-today-button',
-    pcClearButton: 'p-datepicker-clear-button'
+    pcClearButton: 'p-datepicker-clear-button',
+    clearIcon: 'p-datepicker-clear-icon'
 };
 class DatePickerStyle extends BaseStyle {
     name = 'datepicker';
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePickerStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePickerStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -552,7 +151,7 @@ var DatePickerClasses;
     /**
      * Class name of the input element
      */
-    DatePickerClasses["pcInput"] = "p-datepicker-input";
+    DatePickerClasses["pcInputText"] = "p-datepicker-input";
     /**
      * Class name of the dropdown element
      */
@@ -697,6 +296,10 @@ var DatePickerClasses;
      * Class name of the clear button element
      */
     DatePickerClasses["pcClearButton"] = "p-datepicker-clear-button";
+    /**
+     * Class name of the clear icon
+     */
+    DatePickerClasses["clearIcon"] = "p-datepicker-clear-icon";
 })(DatePickerClasses || (DatePickerClasses = {}));
 
 const DATEPICKER_VALUE_ACCESSOR = {
@@ -708,17 +311,13 @@ const DATEPICKER_VALUE_ACCESSOR = {
  * DatePicker is a form component to work with dates.
  * @group Components
  */
-class DatePicker extends BaseComponent {
+class DatePicker extends BaseInput {
     zone;
     overlayService;
     iconDisplay = 'button';
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -732,11 +331,6 @@ class DatePicker extends BaseComponent {
      * @group Props
      */
     inputId;
-    /**
-     * Name of the input element.
-     * @group Props
-     */
-    name;
     /**
      * Style class of the input field.
      * @group Props
@@ -762,11 +356,6 @@ class DatePicker extends BaseComponent {
      * @group Props
      */
     iconAriaLabel;
-    /**
-     * When specified, disables the component.
-     * @group Props
-     */
-    disabled;
     /**
      * Format of the date which can also be defined at locale settings.
      * @group Props
@@ -810,21 +399,11 @@ class DatePicker extends BaseComponent {
      * @group Props
      */
     showIcon;
-    /**
-     * Whether the component should span the full width of its parent.
-     * @group Props
-     */
-    fluid;
     /**
      * Icon of the datepicker button.
      * @group Props
      */
     icon;
-    /**
-     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having#mydiv as variable name).
-     * @group Props
-     */
-    appendTo;
     /**
      * When specified, prevents entering the date manually with keyboard.
      * @group Props
@@ -835,18 +414,6 @@ class DatePicker extends BaseComponent {
      * @group Props
      */
     shortYearCutoff = '+10';
-    /**
-     * Whether the month should be rendered as a dropdown instead of text.
-     * @group Props
-     * @deprecated Navigator is always on.
-     */
-    monthNavigator;
-    /**
-     * Whether the year should be rendered as a dropdown instead of text.
-     * @group Props
-     * @deprecated  Navigator is always on.
-     */
-    yearNavigator;
     /**
      * Specifies 12 or 24 hour format.
      * @group Props
@@ -885,11 +452,6 @@ class DatePicker extends BaseComponent {
      * @group Props
      */
     showSeconds = false;
-    /**
-     * When present, it specifies that an input field must be filled out before submitting the form.
-     * @group Props
-     */
-    required;
     /**
      * When disabled, datepicker will not be visible with input focus.
      * @group Props
@@ -1005,16 +567,6 @@ class DatePicker extends BaseComponent {
      * @group Props
      */
     tabindex;
-    /**
-     * Specifies the input variant of the component.
-     * @group Props
-     */
-    variant;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
     /**
      * The minimum selectable date.
      * @group Props
@@ -1067,23 +619,6 @@ class DatePicker extends BaseComponent {
             this.createMonths(this.currentMonth, this.currentYear);
         }
     }
-    /**
-     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
-     * @group Props
-     * @deprecated Years are based on decades by default.
-     */
-    get yearRange() {
-        return this._yearRange;
-    }
-    set yearRange(yearRange) {
-        this._yearRange = yearRange;
-        if (yearRange) {
-            const years = yearRange.split(':');
-            const yearStart = parseInt(years[0]);
-            const yearEnd = parseInt(years[1]);
-            this.populateYearOptions(yearStart, yearEnd);
-        }
-    }
     /**
      * Whether to display timepicker.
      * @group Props
@@ -1133,14 +668,6 @@ class DatePicker extends BaseComponent {
         this._firstDayOfWeek = firstDayOfWeek;
         this.createWeekDays();
     }
-    /**
-     * Option to set datepicker locale.
-     * @group Props
-     * @deprecated Locale property has no effect, use new i18n API instead.
-     */
-    set locale(newLocale) {
-        console.log('Locale property has no effect, use new i18n API instead.');
-    }
     /**
      * Type of view to display, valid values are "date" for datepicker and "month" for month picker.
      * @group Props
@@ -1169,6 +696,12 @@ class DatePicker extends BaseComponent {
             this.createMonths(this.currentMonth, this.currentYear);
         }
     }
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined);
     /**
      * Callback to invoke on focus of input field.
      * @param {Event} event - browser event.
@@ -1238,7 +771,6 @@ class DatePicker extends BaseComponent {
      * @group Emits
      */
     onShow = new EventEmitter();
-    containerViewChild;
     inputfieldViewChild;
     set content(content) {
         this.contentViewChild = content;
@@ -1265,12 +797,14 @@ class DatePicker extends BaseComponent {
     currentHour;
     currentMinute;
     currentSecond;
+    p;
     pm;
     mask;
     maskClickListener;
     overlay;
     responsiveStyleElement;
     overlayVisible;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     onModelChange = () => { };
     onModelTouched = () => { };
     calendarElement;
@@ -1281,8 +815,6 @@ class DatePicker extends BaseComponent {
     yearOptions;
     focus;
     isKeydown;
-    filled;
-    inputFieldValue = null;
     _minDate;
     _maxDate;
     _dateFormat;
@@ -1400,17 +932,6 @@ class DatePicker extends BaseComponent {
     get nextIconAriaLabel() {
         return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth');
     }
-    get rootClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
-    get panelClass() {
-        return this._componentStyle.classes.panel({ instance: this });
-    }
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
     constructor(zone, overlayService) {
         super();
         this.zone = zone;
@@ -1443,11 +964,11 @@ class DatePicker extends BaseComponent {
         super.ngAfterViewInit();
         if (this.inline) {
             this.contentViewChild && this.contentViewChild.nativeElement.setAttribute(this.attributeSelector, '');
-            if (!this.disabled && !this.inline) {
+            if (!this.disabled() && !this.inline) {
                 this.initFocusableCell();
                 if (this.numberOfMonths === 1) {
                     if (this.contentViewChild && this.contentViewChild.nativeElement) {
-                        this.contentViewChild.nativeElement.style.width = getOuterWidth(this.containerViewChild?.nativeElement) + 'px';
+                        this.contentViewChild.nativeElement.style.width = getOuterWidth(this.el?.nativeElement) + 'px';
                     }
                 }
             }
@@ -1644,7 +1165,7 @@ class DatePicker extends BaseComponent {
         }
     }
     navBackward(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             return;
         }
@@ -1674,7 +1195,7 @@ class DatePicker extends BaseComponent {
         }
     }
     navForward(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             return;
         }
@@ -1706,7 +1227,7 @@ class DatePicker extends BaseComponent {
     decrementYear() {
         this.currentYear--;
         let _yearOptions = this.yearOptions;
-        if (this.yearNavigator && this.currentYear < _yearOptions[0]) {
+        if (this.currentYear < _yearOptions[0]) {
             let difference = _yearOptions[_yearOptions.length - 1] - _yearOptions[0];
             this.populateYearOptions(_yearOptions[0] - difference, _yearOptions[_yearOptions.length - 1] - difference);
         }
@@ -1720,7 +1241,7 @@ class DatePicker extends BaseComponent {
     incrementYear() {
         this.currentYear++;
         let _yearOptions = this.yearOptions;
-        if (this.yearNavigator && this.currentYear > _yearOptions[_yearOptions.length - 1]) {
+        if (this.currentYear > _yearOptions[_yearOptions.length - 1]) {
             let difference = _yearOptions[_yearOptions.length - 1] - _yearOptions[0];
             this.populateYearOptions(_yearOptions[0] + difference, _yearOptions[_yearOptions.length - 1] + difference);
         }
@@ -1734,7 +1255,7 @@ class DatePicker extends BaseComponent {
         event.preventDefault();
     }
     onDateSelect(event, dateMeta) {
-        if (this.disabled || !dateMeta.selectable) {
+        if (this.disabled() || !dateMeta.selectable) {
             event.preventDefault();
             return;
         }
@@ -1818,12 +1339,13 @@ class DatePicker extends BaseComponent {
                 }
             }
         }
+        this.writeModelValue(formattedValue);
         this.inputFieldValue = formattedValue;
-        this.updateFilledState();
         if (this.inputfieldViewChild && this.inputfieldViewChild.nativeElement) {
             this.inputfieldViewChild.nativeElement.value = this.inputFieldValue;
         }
     }
+    inputFieldValue = null;
     formatDateTime(date) {
         let formattedValue = this.keepInvalid ? date : null;
         const isDateValid = this.isValidDateForTimeConstraints(date);
@@ -1924,6 +1446,7 @@ class DatePicker extends BaseComponent {
     updateModel(value) {
         this.value = value;
         if (this.dataType == 'date') {
+            this.writeModelValue(this.value);
             this.onModelChange(this.value);
         }
         else if (this.dataType == 'string') {
@@ -1935,6 +1458,7 @@ class DatePicker extends BaseComponent {
                 if (Array.isArray(this.value)) {
                     stringArrValue = this.value.map((date) => this.formatDateTime(date));
                 }
+                this.writeModelValue(stringArrValue);
                 this.onModelChange(stringArrValue);
             }
         }
@@ -2164,7 +1688,7 @@ class DatePicker extends BaseComponent {
         this.onModelTouched();
     }
     onButtonClick(event, inputfield = this.inputfieldViewChild?.nativeElement) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         if (!this.overlayVisible) {
@@ -2177,6 +1701,8 @@ class DatePicker extends BaseComponent {
     }
     clear() {
         this.value = null;
+        this.inputFieldValue = null;
+        this.writeModelValue(this.value);
         this.onModelChange(this.value);
         this.updateInputfield();
         this.onClear.emit();
@@ -2194,7 +1720,7 @@ class DatePicker extends BaseComponent {
         return this.currentView === 'month' ? this.currentYear : month.year;
     }
     switchViewButtonDisabled() {
-        return this.numberOfMonths > 1 || this.disabled;
+        return this.numberOfMonths > 1 || this.disabled();
     }
     onPrevButtonClick(event) {
         this.navigationState = { backward: true, button: true };
@@ -2212,7 +1738,7 @@ class DatePicker extends BaseComponent {
                     this.trapFocus(event);
                 }
                 if (this.inline) {
-                    const headerElements = findSingle(this.containerViewChild?.nativeElement, '.p-datepicker-header');
+                    const headerElements = findSingle(this.el?.nativeElement, '.p-datepicker-header');
                     const element = event.target;
                     if (this.timeOnly) {
                         return;
@@ -2695,7 +2221,7 @@ class DatePicker extends BaseComponent {
             cell.tabIndex = '0';
             if (!this.preventFocus && (!this.navigationState || !this.navigationState.button)) {
                 setTimeout(() => {
-                    if (!this.disabled) {
+                    if (!this.disabled()) {
                         cell.focus();
                     }
                 }, 1);
@@ -2870,19 +2396,19 @@ class DatePicker extends BaseComponent {
         }
     }
     onTimePickerElementMouseDown(event, type, direction) {
-        if (!this.disabled) {
+        if (!this.disabled()) {
             this.repeat(event, null, type, direction);
             event.preventDefault();
         }
     }
     onTimePickerElementMouseUp(event) {
-        if (!this.disabled) {
+        if (!this.disabled()) {
             this.clearTimePickerTimer();
             this.updateTime();
         }
     }
     onTimePickerElementMouseLeave() {
-        if (!this.disabled && this.timePickerTimer) {
+        if (!this.disabled() && this.timePickerTimer) {
             this.clearTimePickerTimer();
             this.updateTime();
         }
@@ -3024,7 +2550,6 @@ class DatePicker extends BaseComponent {
             let value = this.keepInvalid ? val : null;
             this.updateModel(value);
         }
-        this.filled = (val != null && val.length);
         this.onInput.emit(event);
     }
     isValidSelection(value) {
@@ -3145,8 +2670,8 @@ class DatePicker extends BaseComponent {
             case 'visibleTouchUI':
                 if (!this.inline) {
                     this.overlay = event.element;
-                    this.overlay?.setAttribute(this.attributeSelector, '');
-                    const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+                    this.attrSelector && this.overlay.setAttribute(this.attrSelector, '');
+                    const styles = !this.inline ? { position: 'absolute', top: '0' } : undefined;
                     addStyle(this.overlay, styles);
                     this.appendOverlay();
                     this.updateFocus();
@@ -3184,15 +2709,15 @@ class DatePicker extends BaseComponent {
         }
     }
     appendOverlay() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
+        if (this.$appendTo() && this.$appendTo() !== 'self') {
+            if (this.$appendTo() === 'body')
                 this.document.body.appendChild(this.overlay);
             else
-                appendChild(this.appendTo, this.overlay);
+                appendChild(this.$appendTo(), this.overlay);
         }
     }
     restoreOverlayAppend() {
-        if (this.overlay && this.appendTo) {
+        if (this.overlay && this.$appendTo() !== 'self') {
             this.el.nativeElement.appendChild(this.overlay);
         }
     }
@@ -3201,20 +2726,20 @@ class DatePicker extends BaseComponent {
             this.enableModality(this.overlay);
         }
         else if (this.overlay) {
-            if (this.appendTo) {
-                if (this.view === 'date') {
-                    if (!this.overlay.style.width) {
-                        this.overlay.style.width = getOuterWidth(this.overlay) + 'px';
-                    }
-                    if (!this.overlay.style.minWidth) {
-                        this.overlay.style.minWidth = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
-                    }
+            if (this.view === 'date') {
+                if (!this.overlay.style.width) {
+                    this.overlay.style.width = getOuterWidth(this.overlay) + 'px';
                 }
-                else {
-                    if (!this.overlay.style.width) {
-                        this.overlay.style.width = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
-                    }
+                if (!this.overlay.style.minWidth) {
+                    this.overlay.style.minWidth = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
+                }
+            }
+            else {
+                if (!this.overlay.style.width) {
+                    this.overlay.style.width = getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
                 }
+            }
+            if (this.$appendTo() && this.$appendTo() !== 'self') {
                 absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement);
             }
             else {
@@ -3299,10 +2824,6 @@ class DatePicker extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     getDateFormat() {
         return this.dateFormat || this.getTranslation('dateFormat');
     }
@@ -3588,9 +3109,6 @@ class DatePicker extends BaseComponent {
         date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
         return date;
     }
-    updateFilledState() {
-        this.filled = (this.inputFieldValue && this.inputFieldValue != '');
-    }
     isValidDateForTimeConstraints(selectedDate) {
         if (this.keepInvalid) {
             return true; // If we are keeping invalid dates, we don't need to check for time constraints
@@ -3693,7 +3211,7 @@ class DatePicker extends BaseComponent {
     }
     bindScrollListener() {
         if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild?.nativeElement, () => {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.el?.nativeElement, () => {
                 if (this.overlayVisible) {
                     this.hideOverlay();
                 }
@@ -3744,445 +3262,408 @@ class DatePicker extends BaseComponent {
         this.onOverlayHide();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePicker, deps: [{ token: i0.NgZone }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: DatePicker, isStandalone: true, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: ["inline", "inline", booleanAttribute], showOtherMonths: ["showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: ["selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: ["readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: ["monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: ["yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: ["timeOnly", "timeOnly", booleanAttribute], stepHour: ["stepHour", "stepHour", numberAttribute], stepMinute: ["stepMinute", "stepMinute", numberAttribute], stepSecond: ["stepSecond", "stepSecond", numberAttribute], showSeconds: ["showSeconds", "showSeconds", booleanAttribute], required: ["required", "required", booleanAttribute], showOnFocus: ["showOnFocus", "showOnFocus", booleanAttribute], showWeek: ["showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: ["showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: ["maxDateCount", "maxDateCount", numberAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: ["keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: ["hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: ["touchUI", "touchUI", booleanAttribute], timeSeparator: "timeSeparator", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", size: "size", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle], queries: [{ propertyName: "dateTemplate", first: true, predicate: ["date"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "disabledDateTemplate", first: true, predicate: ["disabledDate"] }, { propertyName: "decadeTemplate", first: true, predicate: ["decade"] }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "decrementIconTemplate", first: true, predicate: ["decrementicon"] }, { propertyName: "incrementIconTemplate", first: true, predicate: ["incrementicon"] }, { propertyName: "inputIconTemplate", first: true, predicate: ["inputicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <span #container [ngClass]="rootClass" [ngStyle]="style" [class]="styleClass">
-            <ng-template [ngIf]="!inline">
-                <input
-                    #inputfield
-                    pInputText
-                    [pSize]="size"
-                    type="text"
-                    role="combobox"
-                    [attr.id]="inputId"
-                    [attr.name]="name"
-                    [attr.required]="required"
-                    [attr.aria-required]="required"
-                    aria-autocomplete="none"
-                    aria-haspopup="dialog"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-controls]="overlayVisible ? panelId : null"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    [attr.aria-label]="ariaLabel"
-                    [value]="inputFieldValue"
-                    (focus)="onInputFocus($event)"
-                    (keydown)="onInputKeydown($event)"
-                    (click)="onInputClick()"
-                    (blur)="onInputBlur($event)"
-                    [readonly]="readonlyInput"
-                    (input)="onUserInput($event)"
-                    [ngStyle]="inputStyle"
-                    [class]="inputStyleClass"
-                    [ngClass]="'p-datepicker-input'"
-                    [placeholder]="placeholder || ''"
-                    [disabled]="disabled"
-                    [attr.tabindex]="tabindex"
-                    [attr.inputmode]="touchUI ? 'off' : null"
-                    autocomplete="off"
-                    [pAutoFocus]="autofocus"
-                    [variant]="variant"
-                    [fluid]="hasFluid"
-                />
-                <ng-container *ngIf="showClear && !disabled && value != null">
-                    <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="'p-datepicker-clear-icon'" (click)="clear()" />
-                    <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-datepicker-clear-icon" (click)="clear()">
-                        <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
-                    </span>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePicker, deps: [{ token: i0.NgZone }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: DatePicker, isStandalone: true, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: { iconDisplay: { classPropertyName: "iconDisplay", publicName: "iconDisplay", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, iconAriaLabel: { classPropertyName: "iconAriaLabel", publicName: "iconAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, multipleSeparator: { classPropertyName: "multipleSeparator", publicName: "multipleSeparator", isSignal: false, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showOtherMonths: { classPropertyName: "showOtherMonths", publicName: "showOtherMonths", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOtherMonths: { classPropertyName: "selectOtherMonths", publicName: "selectOtherMonths", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, shortYearCutoff: { classPropertyName: "shortYearCutoff", publicName: "shortYearCutoff", isSignal: false, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: false, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: false, isRequired: false, transformFunction: numberAttribute }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: false, isRequired: false, transformFunction: numberAttribute }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showWeek: { classPropertyName: "showWeek", publicName: "showWeek", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, startWeekFromFirstDayOfYear: { classPropertyName: "startWeekFromFirstDayOfYear", publicName: "startWeekFromFirstDayOfYear", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, maxDateCount: { classPropertyName: "maxDateCount", publicName: "maxDateCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, todayButtonStyleClass: { classPropertyName: "todayButtonStyleClass", publicName: "todayButtonStyleClass", isSignal: false, isRequired: false, transformFunction: null }, clearButtonStyleClass: { classPropertyName: "clearButtonStyleClass", publicName: "clearButtonStyleClass", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, keepInvalid: { classPropertyName: "keepInvalid", publicName: "keepInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideOnDateTimeSelect: { classPropertyName: "hideOnDateTimeSelect", publicName: "hideOnDateTimeSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, touchUI: { classPropertyName: "touchUI", publicName: "touchUI", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, timeSeparator: { classPropertyName: "timeSeparator", publicName: "timeSeparator", isSignal: false, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: false, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: false, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: false, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle], queries: [{ propertyName: "dateTemplate", first: true, predicate: ["date"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "disabledDateTemplate", first: true, predicate: ["disabledDate"] }, { propertyName: "decadeTemplate", first: true, predicate: ["decade"] }, { propertyName: "previousIconTemplate", first: true, predicate: ["previousicon"] }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "decrementIconTemplate", first: true, predicate: ["decrementicon"] }, { propertyName: "incrementIconTemplate", first: true, predicate: ["incrementicon"] }, { propertyName: "inputIconTemplate", first: true, predicate: ["inputicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template [ngIf]="!inline">
+            <input
+                #inputfield
+                pInputText
+                [pSize]="size()"
+                [attr.size]="inputSize()"
+                type="text"
+                role="combobox"
+                [attr.id]="inputId"
+                [attr.name]="name()"
+                [attr.aria-required]="required()"
+                aria-autocomplete="none"
+                aria-haspopup="dialog"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? panelId : null"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-label]="ariaLabel"
+                [value]="inputFieldValue"
+                (focus)="onInputFocus($event)"
+                (keydown)="onInputKeydown($event)"
+                (click)="onInputClick()"
+                (blur)="onInputBlur($event)"
+                [attr.required]="required() ? '' : undefined"
+                [attr.readonly]="readonlyInput ? '' : undefined"
+                [attr.disabled]="disabled() ? '' : undefined"
+                (input)="onUserInput($event)"
+                [ngStyle]="inputStyle"
+                [class]="cn(cx('pcInputText'), inputStyleClass)"
+                [attr.placeholder]="placeholder"
+                [attr.tabindex]="tabindex"
+                [attr.inputmode]="touchUI ? 'off' : null"
+                autocomplete="off"
+                [pAutoFocus]="autofocus"
+                [variant]="$variant()"
+                [fluid]="hasFluid"
+                [invalid]="invalid()"
+            />
+            <ng-container *ngIf="showClear && !disabled() && value != null">
+                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" />
+                <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()">
+                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+                </span>
+            </ng-container>
+            <button
+                type="button"
+                [attr.aria-label]="iconButtonAriaLabel"
+                aria-haspopup="dialog"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? panelId : null"
+                *ngIf="showIcon && iconDisplay === 'button'"
+                (click)="onButtonClick($event, inputfield)"
+                [class]="cx('dropdown')"
+                [disabled]="disabled()"
+                tabindex="0"
+            >
+                <span *ngIf="icon" [ngClass]="icon"></span>
+                <ng-container *ngIf="!icon">
+                    <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
+                    <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </ng-container>
-                <button
-                    type="button"
-                    [attr.aria-label]="iconButtonAriaLabel"
-                    aria-haspopup="dialog"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-controls]="overlayVisible ? panelId : null"
-                    *ngIf="showIcon && iconDisplay === 'button'"
-                    (click)="onButtonClick($event, inputfield)"
-                    class="p-datepicker-dropdown"
-                    [disabled]="disabled"
-                    tabindex="0"
-                >
-                    <span *ngIf="icon" [ngClass]="icon"></span>
-                    <ng-container *ngIf="!icon">
-                        <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
-                        <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
-                    </ng-container>
-                </button>
-                <ng-container *ngIf="iconDisplay === 'input' && showIcon">
-                    <span class="p-datepicker-input-icon-container">
-                        <CalendarIcon
-                            (click)="onButtonClick($event)"
-                            *ngIf="!inputIconTemplate && !_inputIconTemplate"
-                            [ngClass]="{
-                                'p-datepicker-input-icon': showOnFocus
-                            }"
-                        />
+            </button>
+            <ng-container *ngIf="iconDisplay === 'input' && showIcon">
+                <span [class]="cx('inputIconContainer')">
+                    <CalendarIcon (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [styleClass]="cx('inputIcon')" />
 
-                        <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
-                    </span>
-                </ng-container>
-            </ng-template>
-            <div
-                #contentWrapper
-                [attr.id]="panelId"
-                [class]="panelStyleClass"
-                [ngStyle]="panelStyle"
-                [ngClass]="panelClass"
-                [@overlayAnimation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                [attr.aria-label]="getTranslation('chooseDate')"
-                [attr.role]="inline ? null : 'dialog'"
-                [attr.aria-modal]="inline ? null : 'true'"
-                [@.disabled]="inline === true"
-                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                (@overlayAnimation.done)="onOverlayAnimationDone($event)"
-                (click)="onOverlayClick($event)"
-                *ngIf="inline || overlayVisible"
-            >
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                <ng-container *ngIf="!timeOnly">
-                    <div class="p-datepicker-calendar-container">
-                        <div class="p-datepicker-calendar" *ngFor="let month of months; let i = index">
-                            <div class="p-datepicker-header">
-                                <p-button
-                                    size="small"
-                                    rounded
-                                    text
-                                    (keydown)="onContainerButtonKeydown($event)"
-                                    styleClass="p-datepicker-prev-button p-button-icon-only"
-                                    (onClick)="onPrevButtonClick($event)"
-                                    [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
+                    <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
+                </span>
+            </ng-container>
+        </ng-template>
+        <div
+            #contentWrapper
+            [attr.id]="panelId"
+            [ngStyle]="panelStyle"
+            [class]="cn(cx('panel'), panelStyleClass)"
+            [@overlayAnimation]="{
+                value: 'visible',
+                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
+            }"
+            [attr.aria-label]="getTranslation('chooseDate')"
+            [attr.role]="inline ? null : 'dialog'"
+            [attr.aria-modal]="inline ? null : 'true'"
+            [@.disabled]="inline === true"
+            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+            (@overlayAnimation.done)="onOverlayAnimationDone($event)"
+            (click)="onOverlayClick($event)"
+            *ngIf="inline || overlayVisible"
+        >
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+            <ng-container *ngIf="!timeOnly">
+                <div [class]="cx('calendarContainer')">
+                    <div [class]="cx('calendar')" *ngFor="let month of months; let i = index">
+                        <div [class]="cx('header')">
+                            <p-button
+                                rounded
+                                variant="text"
+                                severity="secondary"
+                                (keydown)="onContainerButtonKeydown($event)"
+                                [styleClass]="cx('pcPrevButton')"
+                                (onClick)="onPrevButtonClick($event)"
+                                [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
+                                type="button"
+                                [ariaLabel]="prevIconAriaLabel"
+                            >
+                                <ng-template #icon>
+                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                </ng-template>
+                                <span *ngIf="previousIconTemplate || _previousIconTemplate">
+                                    <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                                </span>
+                            </p-button>
+                            <div [class]="cx('title')">
+                                <button
+                                    *ngIf="currentView === 'date'"
                                     type="button"
-                                    [ariaLabel]="prevIconAriaLabel"
+                                    (click)="switchToMonthView($event)"
+                                    (keydown)="onContainerButtonKeydown($event)"
+                                    [class]="cx('selectMonth')"
+                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                    [attr.aria-label]="this.getTranslation('chooseMonth')"
+                                    pRipple
                                 >
-                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
-                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
-                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                                    </span>
-                                </p-button>
-                                <div class="p-datepicker-title">
-                                    <button
-                                        *ngIf="currentView === 'date'"
-                                        type="button"
-                                        (click)="switchToMonthView($event)"
-                                        (keydown)="onContainerButtonKeydown($event)"
-                                        class="p-datepicker-select-month"
-                                        [disabled]="switchViewButtonDisabled()"
-                                        [attr.aria-label]="this.getTranslation('chooseMonth')"
-                                        pRipple
-                                    >
-                                        {{ getMonthName(month.month) }}
-                                    </button>
-                                    <button
-                                        *ngIf="currentView !== 'year'"
-                                        type="button"
-                                        (click)="switchToYearView($event)"
-                                        (keydown)="onContainerButtonKeydown($event)"
-                                        class="p-datepicker-select-year"
-                                        [disabled]="switchViewButtonDisabled()"
-                                        [attr.aria-label]="getTranslation('chooseYear')"
-                                        pRipple
-                                    >
-                                        {{ getYear(month) }}
-                                    </button>
-                                    <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
-                                        <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
-                                        <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
-                                    </span>
-                                </div>
-                                <p-button
-                                    rounded
-                                    text
-                                    size="small"
+                                    {{ getMonthName(month.month) }}
+                                </button>
+                                <button
+                                    *ngIf="currentView !== 'year'"
+                                    type="button"
+                                    (click)="switchToYearView($event)"
                                     (keydown)="onContainerButtonKeydown($event)"
-                                    styleClass="p-datepicker-next-button p-button-icon-only"
-                                    (onClick)="onNextButtonClick($event)"
-                                    [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
-                                    [ariaLabel]="nextIconAriaLabel"
+                                    [class]="cx('selectYear')"
+                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                    [attr.aria-label]="getTranslation('chooseYear')"
+                                    pRipple
                                 >
+                                    {{ getYear(month) }}
+                                </button>
+                                <span [class]="cx('decade')" *ngIf="currentView === 'year'">
+                                    <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                    <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
+                                </span>
+                            </div>
+                            <p-button
+                                rounded
+                                variant="text"
+                                severity="secondary"
+                                (keydown)="onContainerButtonKeydown($event)"
+                                [styleClass]="cx('pcNextButton')"
+                                (onClick)="onNextButtonClick($event)"
+                                [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
+                                [ariaLabel]="nextIconAriaLabel"
+                            >
+                                <ng-template #icon>
                                     <ChevronRightIcon *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                </ng-template>
 
-                                    <span *ngIf="nextIconTemplate || _nextIconTemplate">
-                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                                    </span>
-                                </p-button>
-                            </div>
-                            <table class="p-datepicker-day-view" role="grid" *ngIf="currentView === 'date'">
-                                <thead>
-                                    <tr>
-                                        <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
-                                            <span>{{ getTranslation('weekHeader') }}</span>
-                                        </th>
-                                        <th class="p-datepicker-weekday-cell" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last">
-                                            <span class="p-datepicker-weekday">{{ weekDay }}</span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr *ngFor="let week of month.dates; let j = index">
-                                        <td *ngIf="showWeek" class="p-datepicker-weeknumber">
-                                            <span class="p-datepicker-weeklabel-container p-disabled">
-                                                {{ month.weekNumbers[j] }}
-                                            </span>
-                                        </td>
-                                        <td
-                                            *ngFor="let date of week"
-                                            [attr.aria-label]="date.day"
-                                            [ngClass]="{
-                                                'p-datepicker-day-cell': true,
-                                                'p-datepicker-other-month': date.otherMonth,
-                                                'p-datepicker-today': date.today
-                                            }"
-                                        >
-                                            <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
-                                                <span
-                                                    [ngClass]="dayClass(date)"
-                                                    (click)="onDateSelect($event, date)"
-                                                    draggable="false"
-                                                    [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
-                                                    (keydown)="onDateCellKeydown($event, date, i)"
-                                                    pRipple
-                                                >
-                                                    <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
-                                                    <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
-                                                        <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
-                                                    </ng-container>
-                                                    <ng-container *ngIf="!date.selectable">
-                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
-                                                    </ng-container>
-                                                </span>
-                                                <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
-                                                    {{ date.day }}
-                                                </div>
-                                            </ng-container>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                                <span *ngIf="nextIconTemplate || _nextIconTemplate">
+                                    <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                                </span>
+                            </p-button>
                         </div>
+                        <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'">
+                            <thead>
+                                <tr>
+                                    <th *ngIf="showWeek" [class]="cx('weekHeader')">
+                                        <span>{{ getTranslation('weekHeader') }}</span>
+                                    </th>
+                                    <th [class]="cx('weekDayCell')" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last">
+                                        <span [class]="cx('weekDay')">{{ weekDay }}</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let week of month.dates; let j = index">
+                                    <td *ngIf="showWeek" [class]="cx('weekNumber')">
+                                        <span [class]="cx('weekLabelContainer')">
+                                            {{ month.weekNumbers[j] }}
+                                        </span>
+                                    </td>
+                                    <td *ngFor="let date of week" [attr.aria-label]="date.day" [class]="cx('dayCell', { date })">
+                                        <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
+                                            <span [ngClass]="dayClass(date)" (click)="onDateSelect($event, date)" draggable="false" [attr.data-date]="formatDateKey(formatDateMetaToDate(date))" (keydown)="onDateCellKeydown($event, date, i)" pRipple>
+                                                <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
+                                                <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
+                                                    <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
+                                                </ng-container>
+                                                <ng-container *ngIf="!date.selectable">
+                                                    <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
+                                                </ng-container>
+                                            </span>
+                                            <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                {{ date.day }}
+                                            </div>
+                                        </ng-container>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
-                    <div class="p-datepicker-month-view" *ngIf="currentView === 'month'">
-                        <span
-                            *ngFor="let m of monthPickerValues(); let i = index"
-                            (click)="onMonthSelect($event, i)"
-                            (keydown)="onMonthCellKeydown($event, i)"
-                            [ngClass]="{
-                                'p-datepicker-month': true,
-                                'p-datepicker-month-selected': isMonthSelected(i),
-                                'p-disabled': isMonthDisabled(i)
-                            }"
-                            pRipple
-                        >
+                </div>
+                <div [class]="cx('monthView')" *ngIf="currentView === 'month'">
+                    <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>
+                        {{ m }}
+                        <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
                             {{ m }}
-                            <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
-                                {{ m }}
-                            </div>
-                        </span>
-                    </div>
-                    <div class="p-datepicker-year-view" *ngIf="currentView === 'year'">
-                        <span
-                            *ngFor="let y of yearPickerValues()"
-                            (click)="onYearSelect($event, y)"
-                            (keydown)="onYearCellKeydown($event, y)"
-                            [ngClass]="{
-                                'p-datepicker-year': true,
-                                'p-datepicker-year-selected': isYearSelected(y),
-                                'p-disabled': isYearDisabled(y)
-                            }"
-                            pRipple
-                        >
+                        </div>
+                    </span>
+                </div>
+                <div [class]="cx('yearView')" *ngIf="currentView === 'year'">
+                    <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple>
+                        {{ y }}
+                        <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
                             {{ y }}
-                            <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
-                                {{ y }}
-                            </div>
-                        </span>
-                    </div>
-                </ng-container>
-                <div class="p-datepicker-time-picker" *ngIf="(showTime || timeOnly) && currentView === 'date'">
-                    <div class="p-datepicker-hour-picker">
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="incrementHour($event)"
-                            (keydown.space)="incrementHour($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('nextHour')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        </div>
+                    </span>
+                </div>
+            </ng-container>
+            <div [class]="cx('timePicker')" *ngIf="(showTime || timeOnly) && currentView === 'date'">
+                <div [class]="cx('hourPicker')">
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="incrementHour($event)"
+                        (keydown.space)="incrementHour($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('nextHour')"
+                    >
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="decrementHour($event)"
-                            (keydown.space)="decrementHour($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('prevHour')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="decrementHour($event)"
+                        (keydown.space)="decrementHour($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('prevHour')"
+                    >
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </p-button>
-                    </div>
-                    <div class="p-datepicker-separator">
-                        <span>{{ timeSeparator }}</span>
-                    </div>
-                    <div class="p-datepicker-minute-picker">
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="incrementMinute($event)"
-                            (keydown.space)="incrementMinute($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('nextMinute')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    </p-button>
+                </div>
+                <div class="p-datepicker-separator">
+                    <span>{{ timeSeparator }}</span>
+                </div>
+                <div [class]="cx('minutePicker')">
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="incrementMinute($event)"
+                        (keydown.space)="incrementMinute($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('nextMinute')"
+                    >
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="decrementMinute($event)"
-                            (keydown.space)="decrementMinute($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('prevMinute')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                            <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
-                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                            </ng-container>
-                        </p-button>
-                    </div>
-                    <div class="p-datepicker-separator" *ngIf="showSeconds">
-                        <span>{{ timeSeparator }}</span>
-                    </div>
-                    <div class="p-datepicker-second-picker" *ngIf="showSeconds">
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="incrementSecond($event)"
-                            (keydown.space)="incrementSecond($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('nextSecond')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="decrementMinute($event)"
+                        (keydown.space)="decrementMinute($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('prevMinute')"
+                    >
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-container>
+                    </p-button>
+                </div>
+                <div [class]="cx('separator')" *ngIf="showSeconds">
+                    <span>{{ timeSeparator }}</span>
+                </div>
+                <div [class]="cx('secondPicker')" *ngIf="showSeconds">
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="incrementSecond($event)"
+                        (keydown.space)="incrementSecond($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('nextSecond')"
+                    >
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="decrementSecond($event)"
-                            (keydown.space)="decrementSecond($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('prevSecond')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="decrementSecond($event)"
+                        (keydown.space)="decrementSecond($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('prevSecond')"
+                    >
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </p-button>
-                    </div>
-                    <div class="p-datepicker-separator" *ngIf="hourFormat == '12'">
-                        <span>{{ timeSeparator }}</span>
-                    </div>
-                    <div class="p-datepicker-ampm-picker" *ngIf="hourFormat == '12'">
-                        <p-button
-                            size="small"
-                            text
-                            rounded
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (onClick)="toggleAMPM($event)"
-                            (keydown.enter)="toggleAMPM($event)"
-                            [attr.aria-label]="getTranslation('am')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span>{{ pm ? 'PM' : 'AM' }}</span>
-                        <p-button
-                            size="small"
-                            text
-                            rounded
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (click)="toggleAMPM($event)"
-                            (keydown.enter)="toggleAMPM($event)"
-                            [attr.aria-label]="getTranslation('pm')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </p-button>
-                    </div>
+                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    </p-button>
+                </div>
+                <div [class]="cx('separator')" *ngIf="hourFormat == '12'">
+                    <span>{{ timeSeparator }}</span>
                 </div>
-                <div class="p-datepicker-buttonbar" *ngIf="showButtonBar">
-                    <p-button size="small" styleClass="p-datepicker-today-button" [label]="getTranslation('today')" (keydown)="onContainerButtonKeydown($event)" (onClick)="onTodayButtonClick($event)" [ngClass]="todayButtonStyleClass" />
-                    <p-button size="small" styleClass="p-datepicker-clear-button" [label]="getTranslation('clear')" (keydown)="onContainerButtonKeydown($event)" (onClick)="onClearButtonClick($event)" [ngClass]="clearButtonStyleClass" />
+                <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'">
+                    <p-button size="small" text rounded [styleClass]="cx('pcIncrementButton')" (keydown)="onContainerButtonKeydown($event)" (onClick)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('am')">
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span>{{ pm ? 'PM' : 'AM' }}</span>
+                    <p-button size="small" text rounded [styleClass]="cx('pcDecrementButton')" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('pm')">
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    </p-button>
                 </div>
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
-        </span>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CalendarIcon, selector: "CalendarIcon" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SharedModule }], animations: [
+            <div [class]="cx('buttonbar')" *ngIf="showButtonBar">
+                <p-button
+                    size="small"
+                    [styleClass]="cx('pcTodayButton')"
+                    [label]="getTranslation('today')"
+                    (keydown)="onContainerButtonKeydown($event)"
+                    (onClick)="onTodayButtonClick($event)"
+                    [ngClass]="todayButtonStyleClass"
+                    severity="secondary"
+                    variant="text"
+                    size="small"
+                />
+                <p-button
+                    size="small"
+                    [styleClass]="cx('pcClearButton')"
+                    [label]="getTranslation('clear')"
+                    (keydown)="onContainerButtonKeydown($event)"
+                    (onClick)="onClearButtonClick($event)"
+                    [ngClass]="clearButtonStyleClass"
+                    severity="secondary"
+                    variant="text"
+                    size="small"
+                />
+            </div>
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CalendarIcon, selector: "CalendarIcon" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('overlayAnimation', [
-                state('visibleTouchUI', style({
+                state('visibleTouchUI', style$1({
                     transform: 'translate(-50%,-50%)',
                     opacity: 1
                 })),
-                transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))]),
-                transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))]),
-                transition('void => visibleTouchUI', [style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
+                transition('void => visible', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style$1({ opacity: 1, transform: '*' }))]),
+                transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ opacity: 0 }))]),
+                transition('void => visibleTouchUI', [style$1({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
                 transition('visibleTouchUI => void', [
-                    animate('{{hideTransitionParams}}', style({
+                    animate('{{hideTransitionParams}}', style$1({
                         opacity: 0,
                         transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
                     }))
@@ -4190,451 +3671,414 @@ class DatePicker extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-datePicker, p-datepicker, p-date-picker',
                     standalone: true,
                     imports: [CommonModule, Button, Ripple, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, AutoFocus, InputText, SharedModule],
                     template: `
-        <span #container [ngClass]="rootClass" [ngStyle]="style" [class]="styleClass">
-            <ng-template [ngIf]="!inline">
-                <input
-                    #inputfield
-                    pInputText
-                    [pSize]="size"
-                    type="text"
-                    role="combobox"
-                    [attr.id]="inputId"
-                    [attr.name]="name"
-                    [attr.required]="required"
-                    [attr.aria-required]="required"
-                    aria-autocomplete="none"
-                    aria-haspopup="dialog"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-controls]="overlayVisible ? panelId : null"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    [attr.aria-label]="ariaLabel"
-                    [value]="inputFieldValue"
-                    (focus)="onInputFocus($event)"
-                    (keydown)="onInputKeydown($event)"
-                    (click)="onInputClick()"
-                    (blur)="onInputBlur($event)"
-                    [readonly]="readonlyInput"
-                    (input)="onUserInput($event)"
-                    [ngStyle]="inputStyle"
-                    [class]="inputStyleClass"
-                    [ngClass]="'p-datepicker-input'"
-                    [placeholder]="placeholder || ''"
-                    [disabled]="disabled"
-                    [attr.tabindex]="tabindex"
-                    [attr.inputmode]="touchUI ? 'off' : null"
-                    autocomplete="off"
-                    [pAutoFocus]="autofocus"
-                    [variant]="variant"
-                    [fluid]="hasFluid"
-                />
-                <ng-container *ngIf="showClear && !disabled && value != null">
-                    <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="'p-datepicker-clear-icon'" (click)="clear()" />
-                    <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-datepicker-clear-icon" (click)="clear()">
-                        <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
-                    </span>
+        <ng-template [ngIf]="!inline">
+            <input
+                #inputfield
+                pInputText
+                [pSize]="size()"
+                [attr.size]="inputSize()"
+                type="text"
+                role="combobox"
+                [attr.id]="inputId"
+                [attr.name]="name()"
+                [attr.aria-required]="required()"
+                aria-autocomplete="none"
+                aria-haspopup="dialog"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? panelId : null"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-label]="ariaLabel"
+                [value]="inputFieldValue"
+                (focus)="onInputFocus($event)"
+                (keydown)="onInputKeydown($event)"
+                (click)="onInputClick()"
+                (blur)="onInputBlur($event)"
+                [attr.required]="required() ? '' : undefined"
+                [attr.readonly]="readonlyInput ? '' : undefined"
+                [attr.disabled]="disabled() ? '' : undefined"
+                (input)="onUserInput($event)"
+                [ngStyle]="inputStyle"
+                [class]="cn(cx('pcInputText'), inputStyleClass)"
+                [attr.placeholder]="placeholder"
+                [attr.tabindex]="tabindex"
+                [attr.inputmode]="touchUI ? 'off' : null"
+                autocomplete="off"
+                [pAutoFocus]="autofocus"
+                [variant]="$variant()"
+                [fluid]="hasFluid"
+                [invalid]="invalid()"
+            />
+            <ng-container *ngIf="showClear && !disabled() && value != null">
+                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" />
+                <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()">
+                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+                </span>
+            </ng-container>
+            <button
+                type="button"
+                [attr.aria-label]="iconButtonAriaLabel"
+                aria-haspopup="dialog"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? panelId : null"
+                *ngIf="showIcon && iconDisplay === 'button'"
+                (click)="onButtonClick($event, inputfield)"
+                [class]="cx('dropdown')"
+                [disabled]="disabled()"
+                tabindex="0"
+            >
+                <span *ngIf="icon" [ngClass]="icon"></span>
+                <ng-container *ngIf="!icon">
+                    <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
+                    <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </ng-container>
-                <button
-                    type="button"
-                    [attr.aria-label]="iconButtonAriaLabel"
-                    aria-haspopup="dialog"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-controls]="overlayVisible ? panelId : null"
-                    *ngIf="showIcon && iconDisplay === 'button'"
-                    (click)="onButtonClick($event, inputfield)"
-                    class="p-datepicker-dropdown"
-                    [disabled]="disabled"
-                    tabindex="0"
-                >
-                    <span *ngIf="icon" [ngClass]="icon"></span>
-                    <ng-container *ngIf="!icon">
-                        <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
-                        <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
-                    </ng-container>
-                </button>
-                <ng-container *ngIf="iconDisplay === 'input' && showIcon">
-                    <span class="p-datepicker-input-icon-container">
-                        <CalendarIcon
-                            (click)="onButtonClick($event)"
-                            *ngIf="!inputIconTemplate && !_inputIconTemplate"
-                            [ngClass]="{
-                                'p-datepicker-input-icon': showOnFocus
-                            }"
-                        />
+            </button>
+            <ng-container *ngIf="iconDisplay === 'input' && showIcon">
+                <span [class]="cx('inputIconContainer')">
+                    <CalendarIcon (click)="onButtonClick($event)" *ngIf="!inputIconTemplate && !_inputIconTemplate" [styleClass]="cx('inputIcon')" />
 
-                        <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
-                    </span>
-                </ng-container>
-            </ng-template>
-            <div
-                #contentWrapper
-                [attr.id]="panelId"
-                [class]="panelStyleClass"
-                [ngStyle]="panelStyle"
-                [ngClass]="panelClass"
-                [@overlayAnimation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                [attr.aria-label]="getTranslation('chooseDate')"
-                [attr.role]="inline ? null : 'dialog'"
-                [attr.aria-modal]="inline ? null : 'true'"
-                [@.disabled]="inline === true"
-                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                (@overlayAnimation.done)="onOverlayAnimationDone($event)"
-                (click)="onOverlayClick($event)"
-                *ngIf="inline || overlayVisible"
-            >
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                <ng-container *ngIf="!timeOnly">
-                    <div class="p-datepicker-calendar-container">
-                        <div class="p-datepicker-calendar" *ngFor="let month of months; let i = index">
-                            <div class="p-datepicker-header">
-                                <p-button
-                                    size="small"
-                                    rounded
-                                    text
-                                    (keydown)="onContainerButtonKeydown($event)"
-                                    styleClass="p-datepicker-prev-button p-button-icon-only"
-                                    (onClick)="onPrevButtonClick($event)"
-                                    [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
+                    <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
+                </span>
+            </ng-container>
+        </ng-template>
+        <div
+            #contentWrapper
+            [attr.id]="panelId"
+            [ngStyle]="panelStyle"
+            [class]="cn(cx('panel'), panelStyleClass)"
+            [@overlayAnimation]="{
+                value: 'visible',
+                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
+            }"
+            [attr.aria-label]="getTranslation('chooseDate')"
+            [attr.role]="inline ? null : 'dialog'"
+            [attr.aria-modal]="inline ? null : 'true'"
+            [@.disabled]="inline === true"
+            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+            (@overlayAnimation.done)="onOverlayAnimationDone($event)"
+            (click)="onOverlayClick($event)"
+            *ngIf="inline || overlayVisible"
+        >
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+            <ng-container *ngIf="!timeOnly">
+                <div [class]="cx('calendarContainer')">
+                    <div [class]="cx('calendar')" *ngFor="let month of months; let i = index">
+                        <div [class]="cx('header')">
+                            <p-button
+                                rounded
+                                variant="text"
+                                severity="secondary"
+                                (keydown)="onContainerButtonKeydown($event)"
+                                [styleClass]="cx('pcPrevButton')"
+                                (onClick)="onPrevButtonClick($event)"
+                                [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
+                                type="button"
+                                [ariaLabel]="prevIconAriaLabel"
+                            >
+                                <ng-template #icon>
+                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                </ng-template>
+                                <span *ngIf="previousIconTemplate || _previousIconTemplate">
+                                    <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
+                                </span>
+                            </p-button>
+                            <div [class]="cx('title')">
+                                <button
+                                    *ngIf="currentView === 'date'"
                                     type="button"
-                                    [ariaLabel]="prevIconAriaLabel"
+                                    (click)="switchToMonthView($event)"
+                                    (keydown)="onContainerButtonKeydown($event)"
+                                    [class]="cx('selectMonth')"
+                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                    [attr.aria-label]="this.getTranslation('chooseMonth')"
+                                    pRipple
                                 >
-                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
-                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
-                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
-                                    </span>
-                                </p-button>
-                                <div class="p-datepicker-title">
-                                    <button
-                                        *ngIf="currentView === 'date'"
-                                        type="button"
-                                        (click)="switchToMonthView($event)"
-                                        (keydown)="onContainerButtonKeydown($event)"
-                                        class="p-datepicker-select-month"
-                                        [disabled]="switchViewButtonDisabled()"
-                                        [attr.aria-label]="this.getTranslation('chooseMonth')"
-                                        pRipple
-                                    >
-                                        {{ getMonthName(month.month) }}
-                                    </button>
-                                    <button
-                                        *ngIf="currentView !== 'year'"
-                                        type="button"
-                                        (click)="switchToYearView($event)"
-                                        (keydown)="onContainerButtonKeydown($event)"
-                                        class="p-datepicker-select-year"
-                                        [disabled]="switchViewButtonDisabled()"
-                                        [attr.aria-label]="getTranslation('chooseYear')"
-                                        pRipple
-                                    >
-                                        {{ getYear(month) }}
-                                    </button>
-                                    <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
-                                        <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
-                                        <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
-                                    </span>
-                                </div>
-                                <p-button
-                                    rounded
-                                    text
-                                    size="small"
+                                    {{ getMonthName(month.month) }}
+                                </button>
+                                <button
+                                    *ngIf="currentView !== 'year'"
+                                    type="button"
+                                    (click)="switchToYearView($event)"
                                     (keydown)="onContainerButtonKeydown($event)"
-                                    styleClass="p-datepicker-next-button p-button-icon-only"
-                                    (onClick)="onNextButtonClick($event)"
-                                    [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
-                                    [ariaLabel]="nextIconAriaLabel"
+                                    [class]="cx('selectYear')"
+                                    [attr.disabled]="switchViewButtonDisabled() ? '' : undefined"
+                                    [attr.aria-label]="getTranslation('chooseYear')"
+                                    pRipple
                                 >
+                                    {{ getYear(month) }}
+                                </button>
+                                <span [class]="cx('decade')" *ngIf="currentView === 'year'">
+                                    <ng-container *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                    <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
+                                </span>
+                            </div>
+                            <p-button
+                                rounded
+                                variant="text"
+                                severity="secondary"
+                                (keydown)="onContainerButtonKeydown($event)"
+                                [styleClass]="cx('pcNextButton')"
+                                (onClick)="onNextButtonClick($event)"
+                                [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
+                                [ariaLabel]="nextIconAriaLabel"
+                            >
+                                <ng-template #icon>
                                     <ChevronRightIcon *ngIf="!nextIconTemplate && !_nextIconTemplate" />
+                                </ng-template>
 
-                                    <span *ngIf="nextIconTemplate || _nextIconTemplate">
-                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
-                                    </span>
-                                </p-button>
-                            </div>
-                            <table class="p-datepicker-day-view" role="grid" *ngIf="currentView === 'date'">
-                                <thead>
-                                    <tr>
-                                        <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
-                                            <span>{{ getTranslation('weekHeader') }}</span>
-                                        </th>
-                                        <th class="p-datepicker-weekday-cell" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last">
-                                            <span class="p-datepicker-weekday">{{ weekDay }}</span>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr *ngFor="let week of month.dates; let j = index">
-                                        <td *ngIf="showWeek" class="p-datepicker-weeknumber">
-                                            <span class="p-datepicker-weeklabel-container p-disabled">
-                                                {{ month.weekNumbers[j] }}
-                                            </span>
-                                        </td>
-                                        <td
-                                            *ngFor="let date of week"
-                                            [attr.aria-label]="date.day"
-                                            [ngClass]="{
-                                                'p-datepicker-day-cell': true,
-                                                'p-datepicker-other-month': date.otherMonth,
-                                                'p-datepicker-today': date.today
-                                            }"
-                                        >
-                                            <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
-                                                <span
-                                                    [ngClass]="dayClass(date)"
-                                                    (click)="onDateSelect($event, date)"
-                                                    draggable="false"
-                                                    [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
-                                                    (keydown)="onDateCellKeydown($event, date, i)"
-                                                    pRipple
-                                                >
-                                                    <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
-                                                    <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
-                                                        <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
-                                                    </ng-container>
-                                                    <ng-container *ngIf="!date.selectable">
-                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
-                                                    </ng-container>
-                                                </span>
-                                                <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
-                                                    {{ date.day }}
-                                                </div>
-                                            </ng-container>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                                <span *ngIf="nextIconTemplate || _nextIconTemplate">
+                                    <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
+                                </span>
+                            </p-button>
                         </div>
+                        <table [class]="cx('dayView')" role="grid" *ngIf="currentView === 'date'">
+                            <thead>
+                                <tr>
+                                    <th *ngIf="showWeek" [class]="cx('weekHeader')">
+                                        <span>{{ getTranslation('weekHeader') }}</span>
+                                    </th>
+                                    <th [class]="cx('weekDayCell')" scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last">
+                                        <span [class]="cx('weekDay')">{{ weekDay }}</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let week of month.dates; let j = index">
+                                    <td *ngIf="showWeek" [class]="cx('weekNumber')">
+                                        <span [class]="cx('weekLabelContainer')">
+                                            {{ month.weekNumbers[j] }}
+                                        </span>
+                                    </td>
+                                    <td *ngFor="let date of week" [attr.aria-label]="date.day" [class]="cx('dayCell', { date })">
+                                        <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
+                                            <span [ngClass]="dayClass(date)" (click)="onDateSelect($event, date)" draggable="false" [attr.data-date]="formatDateKey(formatDateMetaToDate(date))" (keydown)="onDateCellKeydown($event, date, i)" pRipple>
+                                                <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
+                                                <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
+                                                    <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
+                                                </ng-container>
+                                                <ng-container *ngIf="!date.selectable">
+                                                    <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
+                                                </ng-container>
+                                            </span>
+                                            <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                {{ date.day }}
+                                            </div>
+                                        </ng-container>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
-                    <div class="p-datepicker-month-view" *ngIf="currentView === 'month'">
-                        <span
-                            *ngFor="let m of monthPickerValues(); let i = index"
-                            (click)="onMonthSelect($event, i)"
-                            (keydown)="onMonthCellKeydown($event, i)"
-                            [ngClass]="{
-                                'p-datepicker-month': true,
-                                'p-datepicker-month-selected': isMonthSelected(i),
-                                'p-disabled': isMonthDisabled(i)
-                            }"
-                            pRipple
-                        >
+                </div>
+                <div [class]="cx('monthView')" *ngIf="currentView === 'month'">
+                    <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>
+                        {{ m }}
+                        <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
                             {{ m }}
-                            <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
-                                {{ m }}
-                            </div>
-                        </span>
-                    </div>
-                    <div class="p-datepicker-year-view" *ngIf="currentView === 'year'">
-                        <span
-                            *ngFor="let y of yearPickerValues()"
-                            (click)="onYearSelect($event, y)"
-                            (keydown)="onYearCellKeydown($event, y)"
-                            [ngClass]="{
-                                'p-datepicker-year': true,
-                                'p-datepicker-year-selected': isYearSelected(y),
-                                'p-disabled': isYearDisabled(y)
-                            }"
-                            pRipple
-                        >
+                        </div>
+                    </span>
+                </div>
+                <div [class]="cx('yearView')" *ngIf="currentView === 'year'">
+                    <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" [class]="cx('year', { year: y })" pRipple>
+                        {{ y }}
+                        <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
                             {{ y }}
-                            <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
-                                {{ y }}
-                            </div>
-                        </span>
-                    </div>
-                </ng-container>
-                <div class="p-datepicker-time-picker" *ngIf="(showTime || timeOnly) && currentView === 'date'">
-                    <div class="p-datepicker-hour-picker">
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="incrementHour($event)"
-                            (keydown.space)="incrementHour($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('nextHour')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        </div>
+                    </span>
+                </div>
+            </ng-container>
+            <div [class]="cx('timePicker')" *ngIf="(showTime || timeOnly) && currentView === 'date'">
+                <div [class]="cx('hourPicker')">
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="incrementHour($event)"
+                        (keydown.space)="incrementHour($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('nextHour')"
+                    >
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="decrementHour($event)"
-                            (keydown.space)="decrementHour($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('prevHour')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="decrementHour($event)"
+                        (keydown.space)="decrementHour($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('prevHour')"
+                    >
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </p-button>
-                    </div>
-                    <div class="p-datepicker-separator">
-                        <span>{{ timeSeparator }}</span>
-                    </div>
-                    <div class="p-datepicker-minute-picker">
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="incrementMinute($event)"
-                            (keydown.space)="incrementMinute($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('nextMinute')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    </p-button>
+                </div>
+                <div class="p-datepicker-separator">
+                    <span>{{ timeSeparator }}</span>
+                </div>
+                <div [class]="cx('minutePicker')">
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="incrementMinute($event)"
+                        (keydown.space)="incrementMinute($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('nextMinute')"
+                    >
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="decrementMinute($event)"
-                            (keydown.space)="decrementMinute($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('prevMinute')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                            <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
-                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                            </ng-container>
-                        </p-button>
-                    </div>
-                    <div class="p-datepicker-separator" *ngIf="showSeconds">
-                        <span>{{ timeSeparator }}</span>
-                    </div>
-                    <div class="p-datepicker-second-picker" *ngIf="showSeconds">
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="incrementSecond($event)"
-                            (keydown.space)="incrementSecond($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('nextSecond')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="decrementMinute($event)"
+                        (keydown.space)="decrementMinute($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('prevMinute')"
+                    >
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                        </ng-container>
+                    </p-button>
+                </div>
+                <div [class]="cx('separator')" *ngIf="showSeconds">
+                    <span>{{ timeSeparator }}</span>
+                </div>
+                <div [class]="cx('secondPicker')" *ngIf="showSeconds">
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcIncrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="incrementSecond($event)"
+                        (keydown.space)="incrementSecond($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('nextSecond')"
+                    >
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
-                        <p-button
-                            rounded
-                            text
-                            size="small"
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (keydown.enter)="decrementSecond($event)"
-                            (keydown.space)="decrementSecond($event)"
-                            (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
-                            (mouseup)="onTimePickerElementMouseUp($event)"
-                            (keyup.enter)="onTimePickerElementMouseUp($event)"
-                            (keyup.space)="onTimePickerElementMouseUp($event)"
-                            (mouseleave)="onTimePickerElementMouseLeave()"
-                            [attr.aria-label]="getTranslation('prevSecond')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
+                    <p-button
+                        rounded
+                        text
+                        size="small"
+                        [styleClass]="cx('pcDecrementButton')"
+                        (keydown)="onContainerButtonKeydown($event)"
+                        (keydown.enter)="decrementSecond($event)"
+                        (keydown.space)="decrementSecond($event)"
+                        (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
+                        (mouseup)="onTimePickerElementMouseUp($event)"
+                        (keyup.enter)="onTimePickerElementMouseUp($event)"
+                        (keyup.space)="onTimePickerElementMouseUp($event)"
+                        (mouseleave)="onTimePickerElementMouseLeave()"
+                        [attr.aria-label]="getTranslation('prevSecond')"
+                    >
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </p-button>
-                    </div>
-                    <div class="p-datepicker-separator" *ngIf="hourFormat == '12'">
-                        <span>{{ timeSeparator }}</span>
-                    </div>
-                    <div class="p-datepicker-ampm-picker" *ngIf="hourFormat == '12'">
-                        <p-button
-                            size="small"
-                            text
-                            rounded
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (onClick)="toggleAMPM($event)"
-                            (keydown.enter)="toggleAMPM($event)"
-                            [attr.aria-label]="getTranslation('am')"
-                        >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
-                        </p-button>
-                        <span>{{ pm ? 'PM' : 'AM' }}</span>
-                        <p-button
-                            size="small"
-                            text
-                            rounded
-                            styleClass="p-datepicker-increment-button p-button-icon-only"
-                            (keydown)="onContainerButtonKeydown($event)"
-                            (click)="toggleAMPM($event)"
-                            (keydown.enter)="toggleAMPM($event)"
-                            [attr.aria-label]="getTranslation('pm')"
-                        >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
-                        </p-button>
-                    </div>
+                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    </p-button>
+                </div>
+                <div [class]="cx('separator')" *ngIf="hourFormat == '12'">
+                    <span>{{ timeSeparator }}</span>
                 </div>
-                <div class="p-datepicker-buttonbar" *ngIf="showButtonBar">
-                    <p-button size="small" styleClass="p-datepicker-today-button" [label]="getTranslation('today')" (keydown)="onContainerButtonKeydown($event)" (onClick)="onTodayButtonClick($event)" [ngClass]="todayButtonStyleClass" />
-                    <p-button size="small" styleClass="p-datepicker-clear-button" [label]="getTranslation('clear')" (keydown)="onContainerButtonKeydown($event)" (onClick)="onClearButtonClick($event)" [ngClass]="clearButtonStyleClass" />
+                <div [class]="cx('ampmPicker')" *ngIf="hourFormat == '12'">
+                    <p-button size="small" text rounded [styleClass]="cx('pcIncrementButton')" (keydown)="onContainerButtonKeydown($event)" (onClick)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('am')">
+                        <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
+                    </p-button>
+                    <span>{{ pm ? 'PM' : 'AM' }}</span>
+                    <p-button size="small" text rounded [styleClass]="cx('pcDecrementButton')" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('pm')">
+                        <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                        <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
+                    </p-button>
                 </div>
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
-        </span>
+            <div [class]="cx('buttonbar')" *ngIf="showButtonBar">
+                <p-button
+                    size="small"
+                    [styleClass]="cx('pcTodayButton')"
+                    [label]="getTranslation('today')"
+                    (keydown)="onContainerButtonKeydown($event)"
+                    (onClick)="onTodayButtonClick($event)"
+                    [ngClass]="todayButtonStyleClass"
+                    severity="secondary"
+                    variant="text"
+                    size="small"
+                />
+                <p-button
+                    size="small"
+                    [styleClass]="cx('pcClearButton')"
+                    [label]="getTranslation('clear')"
+                    (keydown)="onContainerButtonKeydown($event)"
+                    (onClick)="onClearButtonClick($event)"
+                    [ngClass]="clearButtonStyleClass"
+                    severity="secondary"
+                    variant="text"
+                    size="small"
+                />
+            </div>
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+        </div>
     `,
                     animations: [
                         trigger('overlayAnimation', [
-                            state('visibleTouchUI', style({
+                            state('visibleTouchUI', style$1({
                                 transform: 'translate(-50%,-50%)',
                                 opacity: 1
                             })),
-                            transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))]),
-                            transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))]),
-                            transition('void => visibleTouchUI', [style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
+                            transition('void => visible', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style$1({ opacity: 1, transform: '*' }))]),
+                            transition('visible => void', [animate('{{hideTransitionParams}}', style$1({ opacity: 0 }))]),
+                            transition('void => visibleTouchUI', [style$1({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
                             transition('visibleTouchUI => void', [
-                                animate('{{hideTransitionParams}}', style({
+                                animate('{{hideTransitionParams}}', style$1({
                                     opacity: 0,
                                     transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
                                 }))
@@ -4643,20 +4087,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     ],
                     providers: [DATEPICKER_VALUE_ACCESSOR, DatePickerStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')"
+                    }
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.OverlayService }], propDecorators: { iconDisplay: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], inputStyle: [{
                 type: Input
             }], inputId: [{
                 type: Input
-            }], name: [{
-                type: Input
             }], inputStyleClass: [{
                 type: Input
             }], placeholder: [{
@@ -4667,9 +4111,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], iconAriaLabel: [{
                 type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], dateFormat: [{
                 type: Input
             }], multipleSeparator: [{
@@ -4688,24 +4129,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], showIcon: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], icon: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
             }], readonlyInput: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], shortYearCutoff: [{
                 type: Input
-            }], monthNavigator: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], yearNavigator: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], hourFormat: [{
                 type: Input
             }], timeOnly: [{
@@ -4723,9 +4153,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], showSeconds: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], showOnFocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -4785,10 +4212,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], variant: [{
-                type: Input
-            }], size: [{
-                type: Input
             }], minDate: [{
                 type: Input
             }], maxDate: [{
@@ -4797,8 +4220,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], disabledDays: [{
                 type: Input
-            }], yearRange: [{
-                type: Input
             }], showTime: [{
                 type: Input
             }], responsiveOptions: [{
@@ -4807,8 +4228,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], firstDayOfWeek: [{
                 type: Input
-            }], locale: [{
-                type: Input
             }], view: [{
                 type: Input
             }], defaultDate: [{
@@ -4837,9 +4256,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Output
             }], onShow: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container', { static: false }]
             }], inputfieldViewChild: [{
                 type: ViewChild,
                 args: ['inputfield', { static: false }]
@@ -4887,11 +4303,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class DatePickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule], exports: [DatePicker, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule], exports: [DatePicker, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePickerModule, imports: [DatePicker, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DatePicker, SharedModule],