primeng 18.0.4-lts → 18.0.6-lts

package/fesm2022/primeng-datepicker.mjs

@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, forwardRef, EventEmitter, inject, numberAttribute, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, ContentChildren, ContentChild, ViewChild, Output, Input, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, 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, blockBodyScroll, unblockBodyScroll, setAttribute, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
@@ -88,6 +88,19 @@ const theme = ({ dt }) => `
     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;
@@ -464,7 +477,11 @@ const classes = {
     day: ({ instance, date }) => {
         let selectedDayClass = '';
         if (instance.isRangeSelection() && instance.isSelected(date) && date.selectable) {
-            selectedDayClass = date.day === instance.value[0].getDate() || date.day === instance.value[1].getDate() ? 'p-datepicker-day-selected' : 'p-datepicker-day-selected-range';
+            const startDate = instance.value[0];
+            const endDate = instance.value[1];
+            const isStart = startDate && date.year === startDate.getFullYear() && date.month === startDate.getMonth() && date.day === startDate.getDate();
+            const isEnd = endDate && date.year === endDate.getFullYear() && date.month === endDate.getMonth() && date.day === endDate.getDate();
+            selectedDayClass = isStart || isEnd ? 'p-datepicker-day-selected' : 'p-datepicker-day-selected-range';
         }
         return {
             'p-datepicker-day': true,
@@ -703,7 +720,6 @@ const _c22 = a0 => ({ $implicit: a0 });
 const _c23 = (a0, a1) => ({ "p-datepicker-day-cell": true, "p-datepicker-other-month": a0, "p-datepicker-today": a1 });
 const _c24 = (a0, a1) => ({ "p-datepicker-month": true, "p-datepicker-month-selected": a0, "p-disabled": a1 });
 const _c25 = (a0, a1) => ({ "p-datepicker-year": true, "p-datepicker-year-selected": a0, "p-disabled": a1 });
-const _c26 = a0 => [a0];
 function DatePicker_ng_template_2_ng_container_2_TimesIcon_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "TimesIcon", 11);
@@ -810,11 +826,11 @@ function DatePicker_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(2, DatePicker_ng_template_2_ng_container_2_Template, 3, 2, "ng-container", 7)(3, DatePicker_ng_template_2_button_3_Template, 3, 6, "button", 8)(4, DatePicker_ng_template_2_ng_container_4_Template, 4, 5, "ng-container", 7);
 } if (rf & 2) {
-    let tmp_17_0;
+    let tmp_18_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.inputStyleClass);
-    i0.ɵɵproperty("value", ctx_r1.inputFieldValue)("readonly", ctx_r1.readonlyInput)("ngStyle", ctx_r1.inputStyle)("ngClass", "p-datepicker-input")("placeholder", ctx_r1.placeholder || "")("disabled", ctx_r1.disabled)("pAutoFocus", ctx_r1.autofocus)("variant", ctx_r1.variant)("fluid", ctx_r1.hasFluid);
-    i0.ɵɵattribute("id", ctx_r1.inputId)("name", ctx_r1.name)("required", ctx_r1.required)("aria-required", ctx_r1.required)("aria-expanded", (tmp_17_0 = ctx_r1.overlayVisible) !== null && tmp_17_0 !== undefined ? tmp_17_0 : false)("aria-controls", ctx_r1.overlayVisible ? ctx_r1.panelId : null)("aria-labelledby", ctx_r1.ariaLabelledBy)("aria-label", ctx_r1.ariaLabel)("tabindex", ctx_r1.tabindex)("inputmode", ctx_r1.touchUI ? "off" : null);
+    i0.ɵɵproperty("pSize", ctx_r1.size)("value", ctx_r1.inputFieldValue)("readonly", ctx_r1.readonlyInput)("ngStyle", ctx_r1.inputStyle)("ngClass", "p-datepicker-input")("placeholder", ctx_r1.placeholder || "")("disabled", ctx_r1.disabled)("pAutoFocus", ctx_r1.autofocus)("variant", ctx_r1.variant)("fluid", ctx_r1.hasFluid);
+    i0.ɵɵattribute("id", ctx_r1.inputId)("name", ctx_r1.name)("required", ctx_r1.required)("aria-required", ctx_r1.required)("aria-expanded", (tmp_18_0 = ctx_r1.overlayVisible) !== null && tmp_18_0 !== undefined ? tmp_18_0 : false)("aria-controls", ctx_r1.overlayVisible ? ctx_r1.panelId : null)("aria-labelledby", ctx_r1.ariaLabelledBy)("aria-label", ctx_r1.ariaLabel)("tabindex", ctx_r1.tabindex)("inputmode", ctx_r1.touchUI ? "off" : null);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.showClear && !ctx_r1.disabled && ctx_r1.value != null);
     i0.ɵɵadvance();
@@ -888,7 +904,7 @@ function DatePicker_div_3_ng_container_4_div_2_span_8_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate && ctx_r1._decadeTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate && !ctx_r1._decadeTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decadeTemplate || ctx_r1._decadeTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c22, ctx_r1.yearPickerValues));
 } }
@@ -1064,12 +1080,11 @@ function DatePicker_div_3_ng_container_4_div_2_Template(rf, ctx) { if (rf & 1) {
     const i_r17 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c21, i_r17 === 0 ? "visible" : "hidden"));
-    i0.ɵɵattribute("aria-label", ctx_r1.prevIconAriaLabel);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c21, i_r17 === 0 ? "visible" : "hidden"))("ariaLabel", ctx_r1.prevIconAriaLabel);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.previousIconTemplate && !ctx_r1._previousIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.previousIconTemplate || !ctx_r1._previousIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.previousIconTemplate || ctx_r1._previousIconTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
     i0.ɵɵadvance();
@@ -1077,12 +1092,11 @@ function DatePicker_div_3_ng_container_4_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "year");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(14, _c21, i_r17 === ctx_r1.months.length - 1 ? "visible" : "hidden"));
-    i0.ɵɵattribute("aria-label", ctx_r1.nextIconAriaLabel);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(14, _c21, i_r17 === ctx_r1.months.length - 1 ? "visible" : "hidden"))("ariaLabel", ctx_r1.nextIconAriaLabel);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate && !ctx_r1._decadeTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.nextIconTemplate && !ctx_r1._nextIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.nextIconTemplate || !ctx_r1._nextIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.nextIconTemplate || ctx_r1._nextIconTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
 } }
@@ -1324,7 +1338,7 @@ function DatePicker_div_3_div_5_div_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate || ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.pm ? "PM" : "AM");
+    i0.ɵɵtextInterpolate(ctx_r1.pm ? ctx_r1.getTranslation("pm") : ctx_r1.getTranslation("am"));
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("pm"));
     i0.ɵɵadvance();
@@ -1419,9 +1433,9 @@ function DatePicker_div_3_div_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("label", ctx_r1.getTranslation("today"))("ngClass", i0.ɵɵpureFunction1(4, _c26, ctx_r1.todayButtonStyleClass));
+    i0.ɵɵproperty("label", ctx_r1.getTranslation("today"))("ngClass", ctx_r1.todayButtonStyleClass);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("label", ctx_r1.getTranslation("clear"))("ngClass", i0.ɵɵpureFunction1(6, _c26, ctx_r1.clearButtonStyleClass));
+    i0.ɵɵproperty("label", ctx_r1.getTranslation("clear"))("ngClass", ctx_r1.clearButtonStyleClass);
 } }
 function DatePicker_div_3_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -1431,7 +1445,7 @@ function DatePicker_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21, 2);
     i0.ɵɵlistener("@overlayAnimation.start", function DatePicker_div_3_Template_div_animation_overlayAnimation_start_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOverlayAnimationStart($event)); })("@overlayAnimation.done", function DatePicker_div_3_Template_div_animation_overlayAnimation_done_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOverlayAnimationDone($event)); })("click", function DatePicker_div_3_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOverlayClick($event)); });
     i0.ɵɵprojection(2);
-    i0.ɵɵtemplate(3, DatePicker_div_3_ng_container_3_Template, 1, 0, "ng-container", 13)(4, DatePicker_div_3_ng_container_4_Template, 5, 3, "ng-container", 7)(5, DatePicker_div_3_div_5_Template, 28, 21, "div", 22)(6, DatePicker_div_3_div_6_Template, 3, 8, "div", 23);
+    i0.ɵɵtemplate(3, DatePicker_div_3_ng_container_3_Template, 1, 0, "ng-container", 13)(4, DatePicker_div_3_ng_container_4_Template, 5, 3, "ng-container", 7)(5, DatePicker_div_3_div_5_Template, 28, 21, "div", 22)(6, DatePicker_div_3_div_6_Template, 3, 4, "div", 23);
     i0.ɵɵprojection(7, 1);
     i0.ɵɵtemplate(8, DatePicker_div_3_ng_container_8_Template, 1, 0, "ng-container", 13);
     i0.ɵɵelementEnd();
@@ -1523,7 +1537,15 @@ class DatePicker extends BaseComponent {
      * Format of the date which can also be defined at locale settings.
      * @group Props
      */
-    dateFormat;
+    get dateFormat() {
+        return this._dateFormat;
+    }
+    set dateFormat(value) {
+        this._dateFormat = value;
+        if (this.initialized) {
+            this.updateInputfield();
+        }
+    }
     /**
      * Separator for multiple selection mode.
      * @group Props
@@ -1595,7 +1617,15 @@ class DatePicker extends BaseComponent {
      * Specifies 12 or 24 hour format.
      * @group Props
      */
-    hourFormat = '24';
+    get hourFormat() {
+        return this._hourFormat;
+    }
+    set hourFormat(value) {
+        this._hourFormat = value;
+        if (this.initialized) {
+            this.updateInputfield();
+        }
+    }
     /**
      * Whether to display timepicker only.
      * @group Props
@@ -2021,6 +2051,8 @@ class DatePicker extends BaseComponent {
     inputFieldValue = null;
     _minDate;
     _maxDate;
+    _dateFormat;
+    _hourFormat = '24';
     _showTime;
     _yearRange;
     preventDocumentListener;
@@ -2272,8 +2304,8 @@ class DatePicker extends BaseComponent {
             let m = month + i;
             let y = year;
             if (m > 11) {
-                m = (m % 11) - 1;
-                y = year + 1;
+                m = m % 12;
+                y = year + Math.floor((month + i) / 12);
             }
             this.months.push(this.createMonth(m, y));
         }
@@ -2486,7 +2518,7 @@ class DatePicker extends BaseComponent {
                 this.selectDate(dateMeta);
             }
         }
-        if ((this.isSingleSelection() && this.hideOnDateTimeSelect) || (this.isRangeSelection() && this.value[1])) {
+        if (this.hideOnDateTimeSelect && (this.isSingleSelection() || (this.isRangeSelection() && this.value[1]))) {
             setTimeout(() => {
                 event.preventDefault();
                 this.hideOverlay();
@@ -2746,12 +2778,25 @@ class DatePicker extends BaseComponent {
         return this.value != null && typeof this.value !== 'string';
     }
     isMonthSelected(month) {
-        if (this.isComparable() && !this.isMultipleSelection()) {
-            const [start, end] = this.isRangeSelection() ? this.value : [this.value, this.value];
-            const selected = new Date(this.currentYear, month, 1);
-            return selected >= start && selected <= (end ?? start);
+        if (!this.isComparable())
+            return false;
+        if (this.isMultipleSelection()) {
+            return this.value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+        }
+        else if (this.isRangeSelection()) {
+            if (!this.value[1]) {
+                return this.value[0]?.getFullYear() === this.currentYear && this.value[0]?.getMonth() === month;
+            }
+            else {
+                const currentDate = new Date(this.currentYear, month, 1);
+                const startDate = new Date(this.value[0].getFullYear(), this.value[0].getMonth(), 1);
+                const endDate = new Date(this.value[1].getFullYear(), this.value[1].getMonth(), 1);
+                return currentDate >= startDate && currentDate <= endDate;
+            }
+        }
+        else {
+            return this.value.getMonth() === month && this.value.getFullYear() === this.currentYear;
         }
-        return false;
     }
     isMonthDisabled(month, year) {
         const yearToCheck = year ?? this.currentYear;
@@ -2885,6 +2930,9 @@ class DatePicker extends BaseComponent {
         this.onModelTouched();
     }
     onButtonClick(event, inputfield = this.inputfieldViewChild?.nativeElement) {
+        if (this.disabled) {
+            return;
+        }
         if (!this.overlayVisible) {
             inputfield.focus();
             this.showOverlay();
@@ -2894,9 +2942,9 @@ class DatePicker extends BaseComponent {
         }
     }
     clear() {
-        this.inputFieldValue = null;
         this.value = null;
         this.onModelChange(this.value);
+        this.updateInputfield();
         this.onClear.emit();
     }
     onOverlayClick(event) {
@@ -3341,10 +3389,10 @@ class DatePicker extends BaseComponent {
                 if (this.navigationState.backward) {
                     let cells;
                     if (this.currentView === 'month') {
-                        cells = find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                        cells = find(this.contentViewChild.nativeElement, '.p-datepicker-month-view .p-datepicker-month:not(.p-disabled)');
                     }
                     else if (this.currentView === 'year') {
-                        cells = find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                        cells = find(this.contentViewChild.nativeElement, '.p-datepicker-year-view .p-datepicker-year:not(.p-disabled)');
                     }
                     else {
                         cells = find(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
@@ -3355,10 +3403,10 @@ class DatePicker extends BaseComponent {
                 }
                 else {
                     if (this.currentView === 'month') {
-                        cell = findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                        cell = findSingle(this.contentViewChild.nativeElement, '.p-datepicker-month-view .p-datepicker-month:not(.p-disabled)');
                     }
                     else if (this.currentView === 'year') {
-                        cell = findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                        cell = findSingle(this.contentViewChild.nativeElement, '.p-datepicker-year-view .p-datepicker-year:not(.p-disabled)');
                     }
                     else {
                         cell = findSingle(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
@@ -3380,22 +3428,22 @@ class DatePicker extends BaseComponent {
         const contentEl = this.contentViewChild?.nativeElement;
         let cell;
         if (this.currentView === 'month') {
-            let cells = find(contentEl, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
-            let selectedCell = findSingle(contentEl, '.p-monthpicker .p-monthpicker-month.p-highlight');
+            let cells = find(contentEl, '.p-datepicker-month-view .p-datepicker-month:not(.p-disabled)');
+            let selectedCell = findSingle(contentEl, '.p-datepicker-month-view .p-datepicker-month.p-highlight');
             cells.forEach((cell) => (cell.tabIndex = -1));
             cell = selectedCell || cells[0];
             if (cells.length === 0) {
-                let disabledCells = find(contentEl, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]');
+                let disabledCells = find(contentEl, '.p-datepicker-month-view .p-datepicker-month.p-disabled[tabindex = "0"]');
                 disabledCells.forEach((cell) => (cell.tabIndex = -1));
             }
         }
         else if (this.currentView === 'year') {
-            let cells = find(contentEl, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
-            let selectedCell = findSingle(contentEl, '.p-yearpicker .p-yearpicker-year.p-highlight');
+            let cells = find(contentEl, '.p-datepicker-year-view .p-datepicker-year:not(.p-disabled)');
+            let selectedCell = findSingle(contentEl, '.p-datepicker-year-view .p-datepicker-year.p-highlight');
             cells.forEach((cell) => (cell.tabIndex = -1));
             cell = selectedCell || cells[0];
             if (cells.length === 0) {
-                let disabledCells = find(contentEl, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]');
+                let disabledCells = find(contentEl, '.p-datepicker-year-view .p-datepicker-year.p-disabled[tabindex = "0"]');
                 disabledCells.forEach((cell) => (cell.tabIndex = -1));
             }
         }
@@ -3864,6 +3912,8 @@ class DatePicker extends BaseComponent {
                 if (!this.inline) {
                     this.overlay = event.element;
                     this.overlay?.setAttribute(this.attributeSelector, '');
+                    const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+                    addStyle(this.overlay, styles);
                     this.appendOverlay();
                     this.updateFocus();
                     if (this.autoZIndex) {
@@ -4126,7 +4176,7 @@ class DatePicker extends BaseComponent {
             output += seconds < 10 ? '0' + seconds : seconds;
         }
         if (this.hourFormat == '12') {
-            output += date.getHours() > 11 ? ' PM' : ' AM';
+            output += ` ${this.getTranslation(date.getHours() > 11 ? 'pm' : 'am')}`;
         }
         return output;
     }
@@ -4499,10 +4549,10 @@ class DatePicker extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputfieldViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.content = _t.first);
-        } }, inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: [2, "disabled", "disabled", booleanAttribute], dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: [2, "inline", "inline", booleanAttribute], showOtherMonths: [2, "showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: [2, "selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: [2, "showIcon", "showIcon", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: [2, "readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: [2, "monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: [2, "yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: [2, "timeOnly", "timeOnly", booleanAttribute], stepHour: [2, "stepHour", "stepHour", numberAttribute], stepMinute: [2, "stepMinute", "stepMinute", numberAttribute], stepSecond: [2, "stepSecond", "stepSecond", numberAttribute], showSeconds: [2, "showSeconds", "showSeconds", booleanAttribute], required: [2, "required", "required", booleanAttribute], showOnFocus: [2, "showOnFocus", "showOnFocus", booleanAttribute], showWeek: [2, "showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: [2, "showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: [2, "maxDateCount", "maxDateCount", numberAttribute], showButtonBar: [2, "showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: [2, "autofocus", "autofocus", booleanAttribute], autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: [2, "keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: [2, "hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: [2, "touchUI", "touchUI", booleanAttribute], timeSeparator: "timeSeparator", focusTrap: [2, "focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: [2, "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" }, standalone: true, features: [i0.ɵɵProvidersFeature([DATEPICKER_VALUE_ACCESSOR, DatePickerStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c16, decls: 4, vars: 6, consts: [["container", ""], ["inputfield", ""], ["contentWrapper", ""], [3, "ngClass", "ngStyle"], [3, "ngIf"], [3, "class", "ngStyle", "ngClass", "click", 4, "ngIf"], ["pInputText", "", "type", "text", "role", "combobox", "aria-autocomplete", "none", "aria-haspopup", "dialog", "autocomplete", "off", 3, "focus", "keydown", "click", "blur", "input", "value", "readonly", "ngStyle", "ngClass", "placeholder", "disabled", "pAutoFocus", "variant", "fluid"], [4, "ngIf"], ["type", "button", "aria-haspopup", "dialog", "class", "p-datepicker-dropdown", "tabindex", "0", 3, "disabled", "click", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], ["class", "p-datepicker-clear-icon", 3, "click", 4, "ngIf"], [3, "click"], [1, "p-datepicker-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["type", "button", "aria-haspopup", "dialog", "tabindex", "0", 1, "p-datepicker-dropdown", 3, "click", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"], [1, "p-datepicker-input-icon-container"], [3, "ngClass", "click", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "click", "ngClass"], [3, "click", "ngStyle", "ngClass"], ["class", "p-datepicker-time-picker", 4, "ngIf"], ["class", "p-datepicker-buttonbar", 4, "ngIf"], [1, "p-datepicker-calendar-container"], ["class", "p-datepicker-calendar", 4, "ngFor", "ngForOf"], ["class", "p-datepicker-month-view", 4, "ngIf"], ["class", "p-datepicker-year-view", 4, "ngIf"], [1, "p-datepicker-calendar"], [1, "p-datepicker-header"], ["size", "small", "rounded", "", "text", "", "styleClass", "p-datepicker-prev-button p-button-icon-only", "type", "button", 3, "keydown", "onClick", "ngStyle"], [1, "p-datepicker-title"], ["type", "button", "class", "p-datepicker-select-month", "pRipple", "", 3, "disabled", "click", "keydown", 4, "ngIf"], ["type", "button", "class", "p-datepicker-select-year", "pRipple", "", 3, "disabled", "click", "keydown", 4, "ngIf"], ["class", "p-datepicker-decade", 4, "ngIf"], ["rounded", "", "text", "", "size", "small", "styleClass", "p-datepicker-next-button p-button-icon-only", 3, "keydown", "onClick", "ngStyle"], ["class", "p-datepicker-day-view", "role", "grid", 4, "ngIf"], ["type", "button", "pRipple", "", 1, "p-datepicker-select-month", 3, "click", "keydown", "disabled"], ["type", "button", "pRipple", "", 1, "p-datepicker-select-year", 3, "click", "keydown", "disabled"], [1, "p-datepicker-decade"], ["role", "grid", 1, "p-datepicker-day-view"], ["class", "p-datepicker-weekheader p-disabled", 4, "ngIf"], ["class", "p-datepicker-weekday-cell", "scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], [1, "p-datepicker-weekheader", "p-disabled"], ["scope", "col", 1, "p-datepicker-weekday-cell"], [1, "p-datepicker-weekday"], ["class", "p-datepicker-weeknumber", 4, "ngIf"], [3, "ngClass", 4, "ngFor", "ngForOf"], [1, "p-datepicker-weeknumber"], [1, "p-datepicker-weeklabel-container", "p-disabled"], ["draggable", "false", "pRipple", "", 3, "click", "keydown", "ngClass"], ["class", "p-hidden-accessible", "aria-live", "polite", 4, "ngIf"], ["aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-datepicker-month-view"], ["pRipple", "", 3, "ngClass", "click", "keydown", 4, "ngFor", "ngForOf"], ["pRipple", "", 3, "click", "keydown", "ngClass"], [1, "p-datepicker-year-view"], [1, "p-datepicker-time-picker"], [1, "p-datepicker-hour-picker"], ["rounded", "", "text", "", "size", "small", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "keydown.enter", "keydown.space", "mousedown", "mouseup", "keyup.enter", "keyup.space", "mouseleave"], [1, "p-datepicker-separator"], [1, "p-datepicker-minute-picker"], ["class", "p-datepicker-separator", 4, "ngIf"], ["class", "p-datepicker-second-picker", 4, "ngIf"], ["class", "p-datepicker-ampm-picker", 4, "ngIf"], [1, "p-datepicker-second-picker"], [1, "p-datepicker-ampm-picker"], ["size", "small", "text", "", "rounded", "", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "onClick", "keydown.enter"], ["size", "small", "text", "", "rounded", "", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "click", "keydown.enter"], [1, "p-datepicker-buttonbar"], ["size", "small", "styleClass", "p-datepicker-today-button", 3, "keydown", "onClick", "label", "ngClass"], ["size", "small", "styleClass", "p-datepicker-clear-button", 3, "keydown", "onClick", "label", "ngClass"]], template: function DatePicker_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { iconDisplay: "iconDisplay", style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: [2, "disabled", "disabled", booleanAttribute], dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: [2, "inline", "inline", booleanAttribute], showOtherMonths: [2, "showOtherMonths", "showOtherMonths", booleanAttribute], selectOtherMonths: [2, "selectOtherMonths", "selectOtherMonths", booleanAttribute], showIcon: [2, "showIcon", "showIcon", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], icon: "icon", appendTo: "appendTo", readonlyInput: [2, "readonlyInput", "readonlyInput", booleanAttribute], shortYearCutoff: "shortYearCutoff", monthNavigator: [2, "monthNavigator", "monthNavigator", booleanAttribute], yearNavigator: [2, "yearNavigator", "yearNavigator", booleanAttribute], hourFormat: "hourFormat", timeOnly: [2, "timeOnly", "timeOnly", booleanAttribute], stepHour: [2, "stepHour", "stepHour", numberAttribute], stepMinute: [2, "stepMinute", "stepMinute", numberAttribute], stepSecond: [2, "stepSecond", "stepSecond", numberAttribute], showSeconds: [2, "showSeconds", "showSeconds", booleanAttribute], required: [2, "required", "required", booleanAttribute], showOnFocus: [2, "showOnFocus", "showOnFocus", booleanAttribute], showWeek: [2, "showWeek", "showWeek", booleanAttribute], startWeekFromFirstDayOfYear: "startWeekFromFirstDayOfYear", showClear: [2, "showClear", "showClear", booleanAttribute], dataType: "dataType", selectionMode: "selectionMode", maxDateCount: [2, "maxDateCount", "maxDateCount", numberAttribute], showButtonBar: [2, "showButtonBar", "showButtonBar", booleanAttribute], todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autofocus: [2, "autofocus", "autofocus", booleanAttribute], autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: [2, "keepInvalid", "keepInvalid", booleanAttribute], hideOnDateTimeSelect: [2, "hideOnDateTimeSelect", "hideOnDateTimeSelect", booleanAttribute], touchUI: [2, "touchUI", "touchUI", booleanAttribute], timeSeparator: "timeSeparator", focusTrap: [2, "focusTrap", "focusTrap", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: [2, "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" }, standalone: true, features: [i0.ɵɵProvidersFeature([DATEPICKER_VALUE_ACCESSOR, DatePickerStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c16, decls: 4, vars: 6, consts: [["container", ""], ["inputfield", ""], ["contentWrapper", ""], [3, "ngClass", "ngStyle"], [3, "ngIf"], [3, "class", "ngStyle", "ngClass", "click", 4, "ngIf"], ["pInputText", "", "type", "text", "role", "combobox", "aria-autocomplete", "none", "aria-haspopup", "dialog", "autocomplete", "off", 3, "focus", "keydown", "click", "blur", "input", "pSize", "value", "readonly", "ngStyle", "ngClass", "placeholder", "disabled", "pAutoFocus", "variant", "fluid"], [4, "ngIf"], ["type", "button", "aria-haspopup", "dialog", "class", "p-datepicker-dropdown", "tabindex", "0", 3, "disabled", "click", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], ["class", "p-datepicker-clear-icon", 3, "click", 4, "ngIf"], [3, "click"], [1, "p-datepicker-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["type", "button", "aria-haspopup", "dialog", "tabindex", "0", 1, "p-datepicker-dropdown", 3, "click", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"], [1, "p-datepicker-input-icon-container"], [3, "ngClass", "click", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "click", "ngClass"], [3, "click", "ngStyle", "ngClass"], ["class", "p-datepicker-time-picker", 4, "ngIf"], ["class", "p-datepicker-buttonbar", 4, "ngIf"], [1, "p-datepicker-calendar-container"], ["class", "p-datepicker-calendar", 4, "ngFor", "ngForOf"], ["class", "p-datepicker-month-view", 4, "ngIf"], ["class", "p-datepicker-year-view", 4, "ngIf"], [1, "p-datepicker-calendar"], [1, "p-datepicker-header"], ["size", "small", "rounded", "", "text", "", "styleClass", "p-datepicker-prev-button p-button-icon-only", "type", "button", 3, "keydown", "onClick", "ngStyle", "ariaLabel"], [1, "p-datepicker-title"], ["type", "button", "class", "p-datepicker-select-month", "pRipple", "", 3, "disabled", "click", "keydown", 4, "ngIf"], ["type", "button", "class", "p-datepicker-select-year", "pRipple", "", 3, "disabled", "click", "keydown", 4, "ngIf"], ["class", "p-datepicker-decade", 4, "ngIf"], ["rounded", "", "text", "", "size", "small", "styleClass", "p-datepicker-next-button p-button-icon-only", 3, "keydown", "onClick", "ngStyle", "ariaLabel"], ["class", "p-datepicker-day-view", "role", "grid", 4, "ngIf"], ["type", "button", "pRipple", "", 1, "p-datepicker-select-month", 3, "click", "keydown", "disabled"], ["type", "button", "pRipple", "", 1, "p-datepicker-select-year", 3, "click", "keydown", "disabled"], [1, "p-datepicker-decade"], ["role", "grid", 1, "p-datepicker-day-view"], ["class", "p-datepicker-weekheader p-disabled", 4, "ngIf"], ["class", "p-datepicker-weekday-cell", "scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], [1, "p-datepicker-weekheader", "p-disabled"], ["scope", "col", 1, "p-datepicker-weekday-cell"], [1, "p-datepicker-weekday"], ["class", "p-datepicker-weeknumber", 4, "ngIf"], [3, "ngClass", 4, "ngFor", "ngForOf"], [1, "p-datepicker-weeknumber"], [1, "p-datepicker-weeklabel-container", "p-disabled"], ["draggable", "false", "pRipple", "", 3, "click", "keydown", "ngClass"], ["class", "p-hidden-accessible", "aria-live", "polite", 4, "ngIf"], ["aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-datepicker-month-view"], ["pRipple", "", 3, "ngClass", "click", "keydown", 4, "ngFor", "ngForOf"], ["pRipple", "", 3, "click", "keydown", "ngClass"], [1, "p-datepicker-year-view"], [1, "p-datepicker-time-picker"], [1, "p-datepicker-hour-picker"], ["rounded", "", "text", "", "size", "small", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "keydown.enter", "keydown.space", "mousedown", "mouseup", "keyup.enter", "keyup.space", "mouseleave"], [1, "p-datepicker-separator"], [1, "p-datepicker-minute-picker"], ["class", "p-datepicker-separator", 4, "ngIf"], ["class", "p-datepicker-second-picker", 4, "ngIf"], ["class", "p-datepicker-ampm-picker", 4, "ngIf"], [1, "p-datepicker-second-picker"], [1, "p-datepicker-ampm-picker"], ["size", "small", "text", "", "rounded", "", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "onClick", "keydown.enter"], ["size", "small", "text", "", "rounded", "", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "click", "keydown.enter"], [1, "p-datepicker-buttonbar"], ["size", "small", "styleClass", "p-datepicker-today-button", 3, "keydown", "onClick", "label", "ngClass"], ["size", "small", "styleClass", "p-datepicker-clear-button", 3, "keydown", "onClick", "label", "ngClass"]], template: function DatePicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c15);
             i0.ɵɵelementStart(0, "span", 3, 0);
-            i0.ɵɵtemplate(2, DatePicker_ng_template_2_Template, 5, 24, "ng-template", 4)(3, DatePicker_div_3_Template, 9, 20, "div", 5);
+            i0.ɵɵtemplate(2, DatePicker_ng_template_2_Template, 5, 25, "ng-template", 4)(3, DatePicker_div_3_Template, 9, 20, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
@@ -4541,6 +4591,7 @@ class DatePicker extends BaseComponent {
                 <input
                     #inputfield
                     pInputText
+                    [pSize]="size"
                     type="text"
                     role="combobox"
                     [attr.id]="inputId"
@@ -4644,10 +4695,10 @@ class DatePicker extends BaseComponent {
                                     (onClick)="onPrevButtonClick($event)"
                                     [ngStyle]="{ visibility: i === 0 ? 'visible' : 'hidden' }"
                                     type="button"
-                                    [attr.aria-label]="prevIconAriaLabel"
+                                    [ariaLabel]="prevIconAriaLabel"
                                 >
                                     <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
-                                    <span *ngIf="previousIconTemplate || !_previousIconTemplate">
+                                    <span *ngIf="previousIconTemplate || _previousIconTemplate">
                                         <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
                                     </span>
                                 </p-button>
@@ -4677,7 +4728,7 @@ class DatePicker extends BaseComponent {
                                         {{ 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 *ngIf="!decadeTemplate && !_decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
                                         <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
                                     </span>
                                 </div>
@@ -4689,11 +4740,11 @@ class DatePicker extends BaseComponent {
                                     styleClass="p-datepicker-next-button p-button-icon-only"
                                     (onClick)="onNextButtonClick($event)"
                                     [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
-                                    [attr.aria-label]="nextIconAriaLabel"
+                                    [ariaLabel]="nextIconAriaLabel"
                                 >
-                                    <ChevronRightIcon *ngIf="!decadeTemplate && !_decadeTemplate" />
+                                    <ChevronRightIcon *ngIf="!nextIconTemplate && !_nextIconTemplate" />
 
-                                    <span *ngIf="nextIconTemplate || !_nextIconTemplate">
+                                    <span *ngIf="nextIconTemplate || _nextIconTemplate">
                                         <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
                                     </span>
                                 </p-button>
@@ -4937,7 +4988,7 @@ class DatePicker extends BaseComponent {
                             <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
                         </p-button>
-                        <span>{{ pm ? 'PM' : 'AM' }}</span>
+                        <span>{{ pm ? getTranslation('pm') : getTranslation('am') }}</span>
                         <p-button
                             size="small"
                             text
@@ -4954,8 +5005,8 @@ class DatePicker extends BaseComponent {
                     </div>
                 </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]" />
+                    <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>
                 <ng-content select="p-footer"></ng-content>
                 <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>